In some cases we require to add n number of text boxes where n depends on user input. For e.g., we want to define amenities of a property. No. of amenities will vary from property to property.
Using Javascript we will input no. of amenities required
and dynamically required boxes will be generated. You
can test this source code here.
(first copy code
in notepad then copy code from notepad ->paste in
editor)
Put following source code inside Head tag:
<script>
var numLinesAdded = 0;
function generateRow() {
a=document.form1.nos.value;
for(i=1;i<=a;i++)
{var d=document.getElementById("div");
s="Amenties "+(numLinesAdded+1);
d.innerHTML+="<table><tr><td><font size=2>"+ s +"</font></td><td><input type='text' name='Amenties_" + numLinesAdded + "'></td></tr></table>";
numLinesAdded++;}}
</script> |
Put following source code inside Body tag where you want to generate dynamic text boxes:
<form name="form1">
<table>
<tr>
<td valign="top" bgcolor="#E8E8E8">
<p align="right">Amenities </p></td>
<td valign="top" bgcolor="#E8E8E8"> <div id="div"></div>
<input name="nos" type="text" id="nos" size="4">
<input name="button" type="button" onclick="generateRow()" value="No. of Amenities"/> </tr>
</table>
</form> |
Have you tried this on your page? It must be working fine. Now question is how to send these values to Database.
Soon I will update this article explaining how to send these values to Database.
- Poonam |
