CODEWITHSUNDEEP
javascripthtml
naveen
naveen

Reputation:

dynamically generate textboxes using JavaScript

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>

Upvotes: 0

Views: 8223

Answers (6)

Sujitha Chandrasekaran
Sujitha Chandrasekaran

Reputation: 41

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.

Upvotes: 0

Jonas
Jonas

Reputation:

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

Upvotes: 0

kalyang
kalyang

Reputation: 209

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>

Upvotes: 0

Sophia
Sophia

Reputation: 5823

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>

Upvotes: 2

Sachin Gaur
Sachin Gaur

Reputation: 13099

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

tbl.innerHTML  +=

instead of

tbl.innerHTML  =

inside the for loop.

Upvotes: 0

Sesh
Sesh

Reputation: 6182

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

Upvotes: 0

Related Questions