[qie]

Dear friends...,
How to create multiple input text from combo-box options?

e.g:
I have 1 combobox with 3 options.
the values is 0,1,2,3
when i select option 1, will be show 1 input text box.
when i select option 2, will be show 2 input text box.
...
but the default is 0 (zero), and no input text box will show.

please help me...

[qie]

hi all,
i have one <select> form with options (0,1,2,3), when the value is change, when i select option 2, will be show 2 input text.

eg:

NORMAL
(when 0 selected is nothing happend)
-------------------------------
<select name=test>
<option value=0 selected>0</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>

WHEN I SELECT ONE OPTION
(when 2 selected, will be create/show new input text)
-------------------------------
<select name=test>
<option value=0>0</option>
<option value=1>1</option>
<option value=2 selected>2</option>
<option value=3>3</option>
</select>

<input type=text name=in1 /> <-- new when 2 opt is selected
<input type=text name=in2 /> <-- new when 2 opt is selected


help me please...
thanks

[Vicious]

adjust the code for your select box, so it executes a Javascript function when you change the value of that selectbox:

<select name="test" onchange="CreateInputs(this)">

Then you create a Javascript function "CreateInputs", with the selectbox as input:

function CreateInputs(selectbox){
    var amountInputs = selectbox.value; // or selectbox.elements[selectbox.selectedIndex].value
 
    // do a loop, to create the specified amount of input boxes:
    for (var i=1;i<=amountInputs;i++)
    {
        var textbox = document.createElement("input"); // create a new textfield
        textbox.setAttribute("name","in" + i); // give a unique name
        textbox.setAttribute("type","text"); // make sure it is of the type "text"
 
        // now we need to append the new textfield to the document:
        selectbox.parentNode.appendChild(textbox);
    }
} 

This code is quite simple, and you should add some custom code to delete surplus textboxes. (e.g. you first select 3 => 3 textboxes are created. When you then select 2, there will be 2 new textboxes, totalling to 5 textboxes) So don't forget to add some code to remove all existing textboxes first, and then create the new ones.

[qie]

Hi Vicious,
that script has successfully create input text, but why always gained when i select the other options?

That i want is, when i select 1, will create/show one input text, and when i select 2, will create/show two input text (not equal to three). and when i select 0 (default) there is no input text will create/show.

[Vicious]

Well, that was explained at the bottom of my code actually. But since you're asking so nicely, I'll give it for free:

function CreateInputs(selectbox){
    // clean previous input boxes:
    var f = selectbox.form; // get the parent form
    var inputs = f.getElementsByTagName("input");
    for (var j=0;j<inputs.length;j++)
    {
        if (inputs[j].getAttribute("name").indexOf("in") == 0)
        {
            // remove that element
            var p = inputs[j].parentNode;
            p.removeChild(inputs[j]);
        }
    }
 
    var amountInputs = selectbox.value; // or selectbox.elements[selectbox.selectedIndex].value
 
    // do a loop, to create the specified amount of input boxes:
    for (var i=1;i<=amountInputs;i++)
    {
        var textbox = document.createElement("input"); // create a new textfield
        textbox.setAttribute("name","in" + i); // give a unique name
        textbox.setAttribute("type","text"); // make sure it is of the type "text"
 
        // now we need to append the new textfield to the document:
        selectbox.parentNode.appendChild(textbox);
    }
} 

I hope it works...

[qie]

hi,
the code not work fine.
you can test it at the link below:
http://meta.uk.to/test/select.html

[jfulton]

What if you store the inputs in a div. Then on each "select" change, you can use the innerHTML property to add the text fields. That way you don't need to worry about adding or removing the correct number each time.

Code:

<script>
function CreateInputs(selectbox){
    var amountInputs = selectbox.value; // or selectbox.elements[selectbox.selectedIndex].value
    var txtHTML = "";
    // do a loop, to create the specified amount of input boxes:
    for (var i=1;i<=amountInputs;i++)
    {
        txtHTML += "<input type=\"text\" name=\"in" + i + "\" />";
    }
    document.getElementById("textBoxes").innerHTML = txtHTML;
}
</script>
...
<div id="textBoxes"></div>
...

[qie]

yes yes yes... it's works !
thanks jfulton & Vicious

to all, you can try at: http://meta.uk.to/test/select.html

maybe you need it