Number Select from Dropdown to write number of form fields to page

[JordanR]

I am not a JavaScript writer by any means so I needing help with writing a number of form fields to browser based on the number selected from a drop down.

User selects say 5 from a drop down and maybe onchange()

<input field name"songTitle1" value="">
<input field name"songTitle2" value="">
<input field name"songTitle3" value="">
<input field name"songTitle4" value="">
<input field name"songTitle5" value="">

is written to the page.

Is this doable? If so could someone be kind enough to show me how?
Thanks in advance.

 

[Lighther]

You must use a function like these called by an onChange Event:

//Important: to make this easy, create an empty div element in the place u would like to show the input elements. In this case, my div's id will be "idDiv"

function createInputs(){
var myDiv = document.getElementById("idDiv"); //we get our div
var num = document.getElementById("idDropDown").value;//we get the number selected on the dropdown list
for(var i = 0; i < value; i++){
//we'll create x input elements
new formEl = document.createElement("input");//we create an input element
formEl.setAttribute("type", "text");//we set it's type attribute, in this case "text"
formEl.setAttribute("id","songTitle" + i);//we declare it's id attribute (for forms we can define it's name attribute too)
formEl.setAttribute("value", "");//Empty value defined
myDiv.appendChild(formEl);//we put the input element into the div

//Now the thing is done, but every input element will be so close to each other so, we can separate them with a <br>. For this we can create a br element and the we append it to the div//

var myBr = document.createElement(br);
myDiv.appendChild(myBr);
}
}

Try it, if there is an error or there is a better sol, please fix it or recommend another.

bye

 

[vacunita]

Unfortunatelyt that solution will keep appending children to the div rather than modifying the amount of available boxes in it. I'm assuming the TC wants to provide a specific number of inputs based on the selection, and not add inputs to the div every time.

That is if I chose 3 from the drop down I get 3 inputs, and if I then choose 5 I get 5, not 8 as your code would produce. as it would just append children, so the 3 I chose first plus the 5 I chose the second time gives me 8.

This is a simpler approach, and modifies the number of inputs with each selection:

function makeinputs(myamount){
var mydiv=document.getElementById('inputdiv'); [green]\\Get the div where we are going to place the inputs[/green]
var input_html=""; [green]\\define a variable to hold the html for the inputs[/green]
for(var i=1;i<=myamount;i++){ [green]\\initiate the loop to produce the required amount of inputs[/green]
input_html+="<input type=text name='myamount" + i + "' value=''>"; [green]\\generate the html for the inputs[/green]
}

mydiv.innerHTML=input_html; [green]\\Write the generated html to the div to create the inputs. [/green]
}
</script>

<select name="myinputs" onChange="makeinputs(this.value)"> \\call the function and pass to it the value chosen by the drop down. 
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
<option value=4>Four</option>
<option value=5>Five</option>
</select>
<form action='inputgen.php' method=POST>
<div id="inputdiv">
Inputs will appear here.

</div>
<input type=submit name=send value="Parse Fields">
</form>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Lighther]

Thx for the error, in fact my code is always adding elements, for that we should declare some first steps to empty the div, in case the div elements have child appended, so the code that should be added is:

while (myDiv.childNodes[0]) {
myDiv.removeChild(myDiv.childNodes[0]);
}

put this code before we declare the var myDiv, between these lines:

var myDiv = document.getElementById("idDiv"); //we get our div
var num = document.getElementById("idDropDown").value;//we get the number selected on the dropdown list

So this code removes the child in the inex 0 of the html object, when a 0 child is removed, the 1 child is changed as to the 0 index.

byee!!!!

 

[JordanR]

Hey guys thanks for the response. I am learning a lot here.
I have tried both methods you have presented but the one I understand most is the one Vacunita posted, however it only produces one field no matter which number I select.
I am not sure what I did wrong.

I haven't added the last piece of code Lighter has just submitted but I will give that a try.

 

[vacunita]

I just copied my code I posted to try out and it works.

Perhaps you are applying some CSS to the div that hides the rest of the inputs or aren't passing the correct value.

Copy the code back here so we may take a look.

Also you my want to remove my comments just in case.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[JordanR]

here is the code with minor tweaks. no css



function makeinputs(myamount){
var mydiv=document.getElementById('inputdiv'); //Get the div where we are going to place the inputs
var input_html=""; //define a variable to hold the html for the inputs
for(var i=1;i<=myamount ;i++){ //initiate the loop to produce the required amount of inputs
input_html="Song Title :&nbsp;<input type=text name='TrackTitle" + i + "' value=''>&nbsp;<br>Song File :&nbsp;<input type=text name='TrackFile" + i + "' value=''>"; //generate the html for the inputs
}

mydiv.innerHTML=input_html; //Write the generated html to the div to create the inputs.
}

 

[JordanR]

sorry, left a piece of code out

function makeinputs(myamount){
var mydiv=document.getElementById('inputdiv'); //Get the div where we are going to place the inputs
var input_html=""; //define a variable to hold the html for the inputs
for(var i=1;i<=myamount ;i++){ //initiate the loop to produce the required amount of inputs
input_html="Song Title :&nbsp;<input type=text name='TrackTitle" + i + "' value=''>&nbsp;<br>Song File :&nbsp;<input type=text name='TrackFile" + i + "' value=''>"; //generate the html for the inputs
}

mydiv.innerHTML=input_html; //Write the generated html to the div to create the inputs.
}
</script>
</head>


<select name="myinputs" onChange="makeinputs(this.value)"> <!--call the function and pass to it the value chosen by the drop down. -->
<option value=></option>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
<option value=4>Four</option>
<option value=5>Five</option>
<option value=6>Six</option>
<option value=7>Seven</option>
<option value=8>Eight</option>
<option value=9>Nine</option>
</select>

<form action='inputgen.asp' method=POST>
<div id="inputdiv">Inputs will appear here.</div>
<input type=submit name=send value="Parse Fields">

 

[vacunita]

Here:

input_html[red]>> <<[/red]="Song Title :&nbsp;<input type=text name='TrackTitle" + i + "' value=''>&nbsp;<br>Song File :&nbsp;<input type=text name='TrackFile" + i + "' value=''>"; //generate the html for the inputs

You removed the plus (+) sign. So instead of adding to the input_html var the new lines, it overwrites it each time.
Put it back.

input_html[red]+[/red]="Song Title...";

Also you may want to add a couple of <br>s at the end of each line to separate each set of inputs from the next. Or wrap them in a DIV or SPAN.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[JordanR]

Incredible. Thank you so much. the only thing now is knowing what the field names are as to know how to stuff the values into variables.

I tried for example
response.write Request.Form("TrackTitle1")
response.write Request.Form("TrackTitle2") etc but it didn't seem to catch anything.

I assume the

name='TrackTitle" + i + "'

would be the name of the field right?

 

[JordanR]

Please disregard that last post. The code works perfectly.
Thanks A Million!!!