Creating the number of entries on the fly.

[jdubwelch]

I'm new to javascript and don't know what this is called to search for a tutorial and none of my books touch on this, but I've seen it done.

 

I want the user to select a number, on change depending on the number they selected it would then create than many form inputs.

 

here's my form code:

<p>How many times? 
  	  <select name="numTimes" id="numTimes">
  	<option value="">--</option>
  	        <?php
	   $maxNum = 15;

	   for ($i=1; $i<=$maxNum; $i++) {
		echo "<option value=\"$i\">$i</option>\n";
	    }
	   ?>
          </select>
  	  <br />

          <!-- this div is what i need to be repeated depending on the number the user selected -->
  <div id="mulitpleTimeEntryForm">
  	    Start Date & Start Time:
  	    <input type="text" id="mulitpleDate1" maxlength="25" size="25" name="multipleDate1"  value="<?php if(isset($_POST['date'])) { echo $_POST['date']; } ?>" />
            <a href="javascript:NewCal('multipleDate1','mmddyyyy',true,12,'dropdown',true)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date" /></a> Duration: 
            <input name="multipleDuration1" type="text" id="mulitpleDuration1" size="4" maxlength="5" />
in hours </p>
 </div>

 

 

[jdubwelch]

Or does anyone know what it's called so i can google it. 

 

Or if you know where a tutorial is, that'd be great too.

[phpQuestioner]

try this:

 

<script language="javascript">
function addFields(what)
{
document.getElementById("more").innerHTML="";
var amount = document.getElementById('numTimes').value;
var max = amount - 1;
for (i=0;i<=max;i++)
{
document.getElementById("more").innerHTML += "\n<input type='text' name='field"+i+"'><br><br>";
}
}
</script>

<select name="numTimes" id="numTimes" onchange="addFields(this.value)">
<option selected>Select Number
<option value="1">1
<option value="2">2
<option value="3">3
</select>

<br><br>

<span id="more">
<!-- Dynamically Populated Input Fields Here -->
</span>