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

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

例如：

有一个表格叫做：配料和数量。我可以通过点击“添加更多”按钮添加另一个成分和数量字段。好吧，假设我添加了一个新字段，并写下它的值。但如果我再次单击“添加更多”按钮，它将删除我的最后一个字段值

**添加更多=（外部自动输入）

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>

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

英格兰人
定量

Javascript代码：

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

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

字段=0；
函数addmyrow（）{
如果（字段！=10）{
document.getElementById（'row'）.innerHTML+=“
”；
document.getElementById（'row'）.innerHTML+=“
”；
字段+=1；
}否则{
document.getElementById（'row'）.innerHTML+=“
只允许10个上载字段。”；
document.form.add.disabled=true；
}
}

---

谢谢。

innerHTML中的更改会导致所有子DOM被销毁。这个链接可能会有所帮助

给你，不管是谁杀了我都应该得到一勺食物

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

函数addmyrow（）{
var mydiv=document.getElementById（“行”）；
var newcontent=document.createElement（'div'）；
newcontent.innerHTML=“

”；
如果（字段<10）{
while（newcontent.firstChild）{
mydiv.appendChild（newcontent.firstChild）；
}
字段=字段+1；
}
否则{
document.getElementById（'row'）.innerHTML+=“
只允许10个上载字段。”；
document.form.add.disabled=true；
}
}

当您附加如下内容时：

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>

英格兰人
定量



字段=0；
函数addmyrow（）{
如果（字段！=10）{
var newComponents=document.createElement（'input'）；
var newQuantity=document.createElement（'input'）；
var brTag=document.createElement（'br'）；
setAttribute（'type'，'text'）；
setAttribute（'type'，'text'）；
setAttribute（'占位符'，'成分'）；
setAttribute（'placeholder'，'Quantity'）；
setAttribute（'name'，'components[]）；
setAttribute（'name'，'quantity[]）；
setAttribute（'class'，'tr'）；
setAttribute（'class'，'tr'）；
document.getElementById（'row'）.appendChild（NewComponents）；
document.getElementById（'row'）.appendChild（brTag）；
document.getElementById（'row'）.appendChild（newQuantity）；
document.getElementById（'row'）.appendChild（brTag）；
字段+=1；
}否则{
document.getElementById（'row'）.innerHTML+=“
只允许10个上载字段。”；
document.form.add.disabled=true；
}
}

---

这里有一个可行的办法：

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

因此，您可以尝试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;
    }
}

var字段=0；
函数addmyrow（）{
如果（字段！=10）{
$（“#行”）。追加（
）；
$（“#行”）。追加（
）；
字段+=1；
} 
否则{
$（“#行”）.append（
只允许10个上载字段）；
document.form.add.disabled=true；
}
}

---

很好，工作很好。谢谢。是的，jQuery是一个更优雅的解决方案。我的解决方案只使用标准JavaScript，因为这正是他的问题所在。