Adding fields dynamically using JavaScript makes fields disappear

Question

This is my JS code :

<script language="javascript">
function addInput() {
    document.getElementById('text').innerHTML += "<input type='text' value='' name='a1[]' size='60' />";
    document.getElementById('text').innerHTML += "<input type='text' value='' name='a2[]' size='9' /><br />";
}

function addInput1() {
    document.getElementById('text1').innerHTML += "<input type='text' value='' name='b[]' size='30' /><br />";
}

function addInput2() {
    document.getElementById('text2').innerHTML += "<input type='text' value='' name='c[]' size='30' />
}
</script>

This is my PHP form codes :

<form method="post" enctype="multipart/form-data" name="form1" >


<input type="submit" onclick="addInput()" name="add" value="Add Other" />
<div id="text"></div>

<input type="submit" onclick="addInput1()" name="add1" value="Add Other" />
<div id="text1"></div>

<input type="submit" onclick="addInput2()" name="add2" value="Add Other" />
<div id="text2"></div>

<input type="submit" name="submit" value="Submit" />
</form>

When I add the fields, it works perfectly, but when I try to edit the field, the page resets and all the added fields disappear.

Are there any problems with my JS code? Is there any other way to do this?

Off topic, but elem.innerHTML += "...new content..." is very destructive. While there may be some cases where it doesn't make much difference, I would suggest avoiding this practice. In your case, it'll erase the values of the inputs that are being destroyed. — the system
– the system, Commented Mar 2, 2013 at 16:22

Musa · Accepted Answer · 2013-03-02 16:22:15Z

2

You're using submit buttons to add inputs, but submit buttons submits the form better to use button inputs e.g.

<input type="button">

answered Mar 2, 2013 at 16:22

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

1 Comment

Redzwan Latif Over a year ago

Thank you very much for the answer :D. Didn't thought it would be very simple. :D . Really appreciate your help :D

Jav Rok · Accepted Answer · 2013-03-02 16:40:30Z

0

Submits buttons are for submitting the form. It's better to use buttons, but also returning false will stop default behaviour of the button. Ex:

function addInput() {
  // your code
  return false;
}

and on the html:

<input type="submit" onclick="return addInput()" name="add" value="Add Other" />

answered Mar 2, 2013 at 16:40

Jav Rok

3311 silver badge8 bronze badges

Collectives™ on Stack Overflow

Adding fields dynamically using JavaScript makes fields disappear

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related