使用 Javascript 添加另一个字段后删除表单最后一个值

Question

在我的 html 表单中，我可以使用 javascript 添加额外的文件。但问题是当我添加另一个字段时它删除了最后提交的值。

例如：

有一个名为：成分和数量的表单文件。我可以通过单击“添加更多”按钮添加另一个成分和数量字段。好吧，假设我添加了一个新字段并写了它的值。但是，如果我再次单击“添加更多”按钮，它会删除我的最后一个字段值。

**添加更多 = (Ajouter un autreingrédient)

HTML代码：

<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 代码：

<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>

谢谢。

Answer 1

当您附加这样的内容时：document.getElementById('row').innerHTML += ... 从技术上讲，您正在用新的 HTML 替换 innerHTML。

这会导致删除任何更改（即表单值更改）。

正确的方法是创建全新的 DOM 元素，然后附加这些元素。您现在所做的只是附加额外的 HTML。

这是更正的版本：

<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>

这是一个有效的小提琴：http://jsfiddle.net/tC7Dm/

Answer 2

innerHTML 的更改会导致所有子 DOM 被销毁。此链接可能会有所帮助 Is it possible to append to innerHTML without destroying descendants' event listeners?

你去吧，谁欺负我都值得一勺饲料。

<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>

Answer 3

@Babu，这个问题背后的原因是当您使用 innerHTML 获取现有值时，它不会获取输入 dom 元素的值，因为存储在属性中的值不在属性中。您可以在以下链接中找到相同的内容

Inner HTML with input values

所以你可以试试 jQuery，而不是使用 JS，下面是一个工作演示

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