javascript - 如何根据使用 javascript 选择的复选框添加隐藏的表单字段？

Question

我想根据选中的复选框将隐藏的输入写入表单。在我的示例中，我没有收到错误，但它仍然不会通过隐藏字段-(已编辑)

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div id="test"></div>
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="youremail@mail.com">
<input type="hidden" name="currency_code" value="US">
<input type="checkbox" id="chkbox1" name="camp1" value="a">
<input type="checkbox" id="chkbox2" name="camp2" value="b">
<input type="submit" value="PayPal">
</form>
<script type="text/javascript">
var element = document.getElementById('test');
if(element != null && element.checked) {

var newElement = document.createElement('input');
newElement.type = "hidden";
newElement.name = "item_name_1";
newElement.value = "MyItem #1";

document.getElementById('chkbox1').appendChild(newElement);

var newElement2 = document.createElement('input');
newElement2.type = "hidden";
newElement2.name = "amount_1";
newElement2.value = "7.00";

document.getElementById('test').appendChild(newElement2);
}

理论上这应该可行，但它让我感到难过。如果有人可以提供一些建议，将不胜感激。

Answer 1

首先，切勿在网页上下文中使用 document.write。这是不好的做法。如果你想用纯 javascript 动态添加一个元素，你只需创建一个新元素:

var newElement = document.createElement('input');
newElement.type = "hidden";
newElement.name = "something";
newElement.value = "someValue";

document.getElemenytById('somecontainer').appendChild(newElement);

其次，错误意味着对您的其中一个语句的 document.getElementById 调用没有找到指定的元素。您需要为 null 检查结果:

var element = document.getElementById('chkbox1');

if(element != null && element.checked)
   // Do Stuff

现在，如果不知道脚本的位置以及此表单在页面中的位置，您可能会受到加载位置的影响。如果您的脚本在加载 HTML 之前运行，您将找不到这些元素。