Form last value removed after add another field with Javascript

Question

In my html form I can add extra fileds with javascript. But problem is it's removed the last submitted value when I add another field.

For example:

There is a form fileds called: Ingredient and Quantity. I can add another ingredient and Quantity field by click on "Add more" buttion. Ok suppose, I added a new fields and wrote it's value. But if I again click on the "Add more" buttion it's deleted my last fields value.

**Add more = (Ajouter un autre ingrédient)

Html Code:

<table width="700" border="0" cellspacing="0" cellpadding="5" class="table" style="float:">
<td width="180">Ingrédients</td>
    <td>
    <input type="text"class="tr" name="ingredients[]" id="ingredients" placeholder="Ingredient"/>
    </td>    
  </tr>
  <tr>
    <td>Quantité</td>
    <td><input name="quantity[]" type="text" id="quantity" placeholder="Quantity"   class="tr"  /></td>   
  </tr>  
  <tr>
    <td></td>
    <td><input type="button" onclick="addmyrow()" name="add" value="Ajouter un autre ingrédient" /><br/><br/>  <div id="row"></td>
  </tr> 
</table>

Javascript Code:

<script language="javascript">
fields = 0;
function addmyrow() {
if (fields != 10) {
document.getElementById('row').innerHTML += "<input type='text' class='tr' name='ingredients[]' id='ingredients' placeholder='Ingredient'/><br/>";
document.getElementById('row').innerHTML += "<input name='quantity[]' type='text' id='quantity' placeholder='Quantity'   class='tr'  /><br/>";

fields += 1;
} else {
document.getElementById('row').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>

Thanks.

Answer 1

When you append contents like this: document.getElementById('row').innerHTML += ... you're technically replacing the innerHTML with new HTML.

This causes any changes (ie, form value changes) to be erased.

The correct way is to create brand new DOM elements and then append those elements. What you're doing now is just appending additional HTML.

Here's the corrected version:

<table width="700" border="0" cellspacing="0" cellpadding="5" class="table" style="float:">
    <tr>
<td width="180">Ingrédients</td>
    <td>
    <input type="text"class="tr" name="ingredients[]" id="ingredients" placeholder="Ingredient"/>
    </td>    
  </tr>
  <tr>
    <td>Quantité</td>
    <td><input name="quantity[]" type="text" id="quantity" placeholder="Quantity"   class="tr"  /></td>   
  </tr>  
  <tr>
    <td></td>
      <td><input type="button" onclick="addmyrow()" name="add" value="Ajouter un autre ingrédient" /><br/><br/>  <div id="row"></div>
      </td>
  </tr> 
</table>


<script language="javascript">
fields = 0;

function addmyrow() {
    if (fields != 10) {
        var newIngredients = document.createElement('input');
        var newQuantity = document.createElement('input');
        var brTag = document.createElement('br');

        newIngredients.setAttribute('type', 'text');
        newQuantity.setAttribute('type', 'text');
        newIngredients.setAttribute('placeholder', 'Ingredient');
        newQuantity.setAttribute('placeholder', 'Quantity');
        newIngredients.setAttribute('name', 'ingredients[]');
        newQuantity.setAttribute('name', 'quantity[]');

        newIngredients.setAttribute('class', 'tr');
        newQuantity.setAttribute('class', 'tr');

        document.getElementById('row').appendChild(newIngredients); 
        document.getElementById('row').appendChild(brTag); 
        document.getElementById('row').appendChild(newQuantity);
        document.getElementById('row').appendChild(brTag); 

        fields += 1;
    } else {
        document.getElementById('row').innerHTML += "<br />Only 10 upload fields allowed.";
        document.form.add.disabled=true;
    }
}
</script>

And here's a working fiddle: http://jsfiddle.net/tC7Dm/

Answer 2

@Babu, the reason behind this issue is when you get the existing value with innerHTML it doesn't get the value for input dom elements because the value stored in the property not in the attribute. You could find the same in following links

Inner HTML with input values

So rather than using JS you could try jQuery, Below is a working demo

var fields = 0;
function addmyrow() {
    if (fields != 10) {
        $("#row").append("<input type='text' class='tr' name='ingredients[]' id='ingredients' placeholder='Ingredient' value='' /><br/>");
        $("#row").append("<input name='quantity[]' type='text' id='quantity' placeholder='Quantity'   class='tr'  /><br/>");
        fields += 1;
    } 
    else {
        $("#row").append("<br />Only 10 upload fields allowed.");
        document.form.add.disabled=true;
    }
}

Fiddle Demo

Answer 3

changes in innerHTML causes all child DOMs to be destroyed. this link might help Is it possible to append to innerHTML without destroying descendants' event listeners?

here you go, whoever minusoned me deserves a spoonful of feed.

<script>
function addmyrow() {
    var mydiv = document.getElementById("row");
    var newcontent = document.createElement('div');
    newcontent.innerHTML = "<input type='text' class='tr' name='ingredients[]' id='ingredients' placeholder='Ingredient'/><br/><input name='quantity[]' type='text' id='quantity' placeholder='Quantity'   class='tr'  /><br/>";    
    if (fields < 10) {
        while (newcontent.firstChild) {
            mydiv.appendChild(newcontent.firstChild);
        }
        fields=fields+1;
    }
    else {
    document.getElementById('row').innerHTML += "<br />Only 10 upload fields allowed.";
    document.form.add.disabled=true;
    }
}
</script>