Technology Answer: dynamically generate textboxes using JavaScript

Hi,

I want generate textboxes dynamically according to user input. If user enter the integer value in the textbox, if he/she enter 5 i want generate 5 textboxes. This code is working in Firefox but not working in IE and Netscape; please help me how to do this or point out any other mistake in this code to me. Also, the technology we are using is Struts 2.
Please help me.

JavaScript code:

function generate()
{
  var tot = document.getElementById("totmob").value;
  var tbl = document.getElementById("sim");

for(var i =1;i<=tot;i++)
{
  tbl.innerHTML  = 'Mobile No'+i+' <input type="text"  size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n';
}

HTML code:

<td>
<s:textfield id="totmob" label="Total Mobile Number"  />
<td>
<td>
<input type="button"  value="ADD" onclick="generate()"/>
</td>
</tr>
</table>
<div id="sim">
</div>

From stackoverflow

Can you try something else than InnerHtml - you can try this:
- use GetElementByID to get the element you want to add text boxes to
- remove any existing child items if required
- Add textboxes as child items to the selected node
From your javascript code, it looks you should use following code:
```
tbl.innerHTML  +=
```
instead of
```
tbl.innerHTML  =
```
inside the for loop.

The code below works perfect for me in IE as well as Firefox. When you say It's nt working, what do you mean ?

function generate()
{
  var tot = document.getElementById("totmob").value;
var tbl = document.getElementById("sim");

for(var i =1;i<=tot;i++)
{
  tbl.innerHTML  = tbl.innerHTML  +'Mobile No'+i+' <input type="text"  size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n';
}

}
</script>
<body>
<table>
<tr>
    <td>
        <span>Total Mobile Number  </span>
        <input type="text" id="totmob" />
    <td>
    <td>
    <input type="button"  value="ADD" onclick="generate()"/>
    </td>
</tr>
</table>
<div id="sim">
</div>
</body>
</html>

Kalyan Ganjam : Naveen, Can you share what went wrong and what change fixed your problem?

for(var i =1;i<=tot;i++)
{
  tbl.innerHTML  = 'Mobile No'+i+' <input type="text"  size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n';
}

should be

for(var i =1;i<=tot;i++)
{
  tbl.innerHTML  += 'Mobile No'+i+' <input type="text"  size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n';
}

because you need to append to the inner HTML, rather than replace it.

You've also used a <td> instead of a </td>

IF we want to distinguishes textbox then how we can do that??

add a unique identifier to the name of the input or a unique id to it.

like:

for(var i =1;i<=tot;i++)
{
  tbl.innerHTML  += 'Mobile No'+i+' <input type="text"  size = "20" maxlength= "20" name= hoardingregister.mobileno'+i+'> <br> \n';
}

or you put a id into it like:

id="input"+i

Technology Answer

Thursday, March 31, 2011

dynamically generate textboxes using JavaScript

0 comments:

Post a Comment

Blog Archive