提交表单前，将复选框值合并到字符串中 [英] Combine checkbox values into string before submitting form

问题描述

我将表单发送到我有限访问的外部服务器。我有一个表单，其中包含许多用户感兴趣的不同产品的复选框。我需要用一个字符串发送这些复选框，列出他们检查的所有产品。

我知道我需要使用JavaScript来捕获选择并将它们合并为一个变量，然后通过POST将其发送到外部服务器。我不是很熟练的使用Javascript来了解具体情况。

我只是想给你一个提示，在表单提交后追踪复选框（ DEMO ）。

假设您有以下html：

 < form id = 了testForm > 
< input class =checkboxname =onetype =checkbox> 
< input class =checkboxname =twotype =checkbox> 
< input class =checkboxname =threetype =checkbox> 
< input type =hiddenname =checkboxStrid =checkbox_str> 
<按钮>发送< / button> 
< / form> 
  

您可以添加一个事件侦听器来提交表单：

  var form = document.getElementById（'testForm'）; 
 
尝试{
 form.addEventListener（submit，submitFn，false）; 
} catch（e）{
 form.attachEvent（onsubmit，submitFn）; // IE8 
} 
  

然后你可以得到所有需要的复选框，例如班级名称。
循环它们并将选中的元素添加到数组中，稍后您将加入到一个字符串中。

 函数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（）; 
 
返回false; 
} 
  

你现在可以通过ajax发送这个字符串，或者你可以添加一个隐藏的表单域并将该字符串设置为其值，并提交没有Ajax的表单。

I am sending a form to an external server I have limited access to. I have a form with many check-boxes for different products the user is interested in. I need to send these in a single string that lists all the products they checked.

I know I need to use JavaScript to capture the selections and combine them into one variable and then send it through POST to the external server. I'm not very experienced in Javascript to know how exactly.

解决方案

I'm just going to give you a hint on how to catch up the checked checkboxes once the form is submitted (DEMO).

Imagine you have the following 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>

You can add an event listener to form submission:

var form = document.getElementById('testForm');

try {
    form.addEventListener("submit", submitFn, false);
} catch(e) {
    form.attachEvent("onsubmit", submitFn); //IE8
}

And then you can get all the needed checkboxes with for example its class name. Loop trough them and add the checked ones to an array which you later on join to a string.

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

You can now send this string via ajax or you can add a hidden form field and set the string as its value and submit the form without ajax.

这篇关于提交表单前，将复选框值合并到字符串中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！