Question

MyJSP

<td id="CardNumLabel" colspan="2" width="300px" align="left">
  <input readonly="readonly" type="text" name="Names1" id="cNames1" size="25"
    value="Cardnumber1" />
  <input type="text" name="Values1" id="cValues1" size="25" value="" maxlength="6"/
  <input type="hidden" name="Cardnumbersay" id="Cardnumbersay" value="1">
  <input type="button" value="+" onClick="addCardnumber();">
</td>

我的JavaScript

function addCardnumber()
{
    var cardsay;
    cardsay = parseInt(document.getElementById('Cardnumbersay').value);
    if(document.getElementById('cNames'+cardsay.toString()).value=="" || document.getElementById('cValues'+cardsay.toString()).value=="")
    {
        alert('NULL');
    }else{
        cardsay = cardsay+1;
        CardNumLabel.innerHTML = CardNumLabel.innerHTML+"<input type='text' readonly='readonly' name='Names"+say+"' id='cNames"+cardsay+"' size='25' value='Cardnumber"+cardsay+"' />"+"&nbsp;"+
        "<input type='text' name='Values"+say+"' id='cValues"+cardsay+"' size='25' maxlength='6'/><br>";
         document.getElementById('Cardnumbersay').value = cardsay;
    }
}

你好，伙计们，当我单击“+”按钮时，javascript函数会添加新的文本框以进行填充。这部分正常运行。问题是，当我单击按钮添加第二个文本框时，js会添加它们，但会删除我输入到第一个文本框的值。当我点击添加按钮时，我不想丢失数据。怎么解决？感谢

Answer 1

您正在丢失用户已在文本框中输入的数据，因为当您使用以下js代码修改innerHTML时，整个文本框将被更新的文本框替换：

CardNumLabel.innerHTML = CardNumLabel.innerHTML+"<some_html_goes_here>";

由于上述陈述，具有id="CardNumLabel"的td的全部内容被更新的值替换。放入的较新的innerHTML的文本框数量增加了一个，但没有规定保留用户先前在文本框中输入的内容。

保留先前输入的数据内容：

使用appendChild()方法，而不是直接修改innerHTML
或者，在js中写一个循环来复制用户输入的数据并将其存储在一个数组中。然后使用相同的innerHTML方式增加文本框的数量，然后编写另一个循环以将数据从数组中放回文本框

希望我帮忙！

如何在jsp中使用javascript动态添加文本框

1 个答案: