如何根据javascript选中的复选框添加隐藏表单字段?

如何根据javascript选中的复选框添加隐藏表单字段?,javascript,forms,hidden,field,checkbox,Javascript,Forms,Hidden,Field,Checkbox,我想根据选中的复选框将隐藏的输入写入表单。在我的示例中,我没有收到错误,但它仍然不会传递隐藏字段-(已编辑) var元素=document.getElementById('test'); if(element!=null&&element.checked){ var newElement=document.createElement('input'); newElement.type=“隐藏”; newElement.name=“项目名称1”; newElement.value=“MyItem

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


var元素=document.getElementById('test');
if(element!=null&&element.checked){
var newElement=document.createElement('input');
newElement.type=“隐藏”;
newElement.name=“项目名称1”;
newElement.value=“MyItem#1”;
document.getElementById('chkbox1').appendChild(newElement);
var newElement2=document.createElement('input');
newElement2.type=“隐藏”;
newElement2.name=“金额1”;
newElement2.value=“7.00”;
document.getElementById('test').appendChild(newElement2);
}

理论上这应该行得通,但这让我很难堪。如果有人能提供一些建议,我们将不胜感激

首先,不要使用
文档。在网页上下文中编写
。那是个坏习惯。如果要使用纯javascript动态添加元素,只需创建一个新元素:

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

document.getElemenytById('somecontainer').appendChild(newElement);
其次,该错误意味着对语句之一的
document.getElementById
调用没有找到指定的元素。检查结果时需要为空:

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

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

现在,在不知道脚本的位置以及表单在页面中的位置的情况下,您可能会受到加载位置的影响。如果脚本在加载HTML之前运行,则找不到元素

不完全相关,但请确保对插入的价格进行某种服务器端验证这只会在运行脚本时发生一次-如果要在切换复选框时添加/删除这些字段,则需要为每个复选框上的选中事件添加处理程序。然而,最简单的方法可能是让字段以任何方式出现,并根据后端的复选框选择决定要做什么?您应该在复选框的
onclick
事件中创建一个函数来触发它,另外,这些隐藏的输入真的有必要吗?你不能把隐藏的输入值放在复选框的值中吗?
var element = document.getElementById('chkbox1');

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