dynamically generate textboxes using JavaScript

Question

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>

Your HTML code is not visible. Please change all your tags from <tag> to <tag> — Sandeep Datta
– Sandeep Datta, Commented Feb 12, 2009 at 7:35
a more specific title for your question would help others help you. also, try formatting your code. — euge1979
– euge1979, Commented Feb 12, 2009 at 7:36

Sophia · Accepted Answer · 2009-02-12 07:55:23Z

2

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>

answered Feb 12, 2009 at 7:55

Sophia

5,87511 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sesh · Accepted Answer · 2009-02-12 07:39:15Z

0

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

answered Feb 12, 2009 at 7:39

Sesh

6,2424 gold badges34 silver badges40 bronze badges

Comments

Sachin Gaur · Accepted Answer · 2009-02-12 07:44:12Z

0

From your javascript code, it looks you should use following code:

tbl.innerHTML  +=

instead of

tbl.innerHTML  =

inside the for loop.

answered Feb 12, 2009 at 7:44

Sachin Gaur

13.1k9 gold badges36 silver badges38 bronze badges

Comments

kalyang · Accepted Answer · 2009-02-12 07:56:08Z

0

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>

edited Feb 12, 2009 at 7:56

answered Feb 12, 2009 at 7:50

kalyang

2193 silver badges13 bronze badges

1 Comment

kalyang Over a year ago

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

Jonas · Accepted Answer · 2009-03-20 07:51:14Z

0

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

answered Mar 20, 2009 at 7:51

Jonas

Comments

Sujitha Chandrasekaran · Accepted Answer · 2013-02-28 08:46:24Z

0

But if you are changing the value in the text box without refreshing the page more text boxes are adding after the previously added text box. But it is wrong whenever we change the value in the text box only tat number of new text boxes should be added instead of keeping the previous text boxes too. Can you please change the coding according to the conditions I said.

answered Feb 28, 2013 at 8:46

Sujitha Chandrasekaran

413 gold badges3 silver badges9 bronze badges

Collectives™ on Stack Overflow

dynamically generate textboxes using JavaScript

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related