我正在向我访问受限的外部服务器发送表单。我有一个表单，其中包含用户感兴趣的不同产品的许多复选框。我需要将它们发送到一个字符串中，列出他们检查的所有产品。
我知道我需要使用 JavaScript 来捕获选择并将它们组合成一个变量，然后通过 POST 将其发送到外部服务器。我在 Javascript 方面不是很有经验，不知道具体如何。
【问题讨论】：
标签： javascript forms post
我只是给你一个提示，告诉你在提交表单后如何赶上选中的复选框 (DEMO)。
假设您有以下 html：
<form id="testForm">
<input class="checkbox" name="one" type="checkbox">
<input class="checkbox" name="two" type="checkbox">
<input class="checkbox" name="three" type="checkbox">
<input type="hidden" name="checkboxStr" id="checkbox_str">
<button>Send</button>
</form>
您可以在表单提交中添加事件监听器：
var form = document.getElementById('testForm');
try {
form.addEventListener("submit", submitFn, false);
} catch(e) {
form.attachEvent("onsubmit", submitFn); //IE8
}
然后您可以获得所有需要的复选框，例如其类名。 循环遍历它们并将选中的那些添加到一个数组中，然后再加入一个字符串。
function submitFn(event) {
event.preventDefault();
var boxes = document.getElementsByClassName('checkbox');
var checked = [];
for(var i=0; boxes[i]; ++i){
if(boxes[i].checked){
checked.push(boxes[i].name);
}
}
var checkedStr = checked.join();
document.getElementById('checkbox_str').value = checkedStr;
form.submit();
return false;
}
您现在可以通过 ajax 发送此字符串，或者您可以添加一个隐藏的表单字段并将字符串设置为其值，然后在不使用 ajax 的情况下提交表单。
【讨论】：
if (form.addEventListener) { ... } else { ... } 而不是 try-catch 块
首先，您需要获取名称值对并将它们存储到一个对象中：
var obj = {}; // this will hold your name value pairs
您可以从那里使用 JSON 将数据发送到服务器。 JSON数据在发送到服务器时是字符串形式的。
var json_string = JSON.stringify(obj);
【讨论】：