在提交表单前将复选框值合并到字符串中

我正在向外部服务器发送表单，因此我有限制的访问权限。我有一个表单，其中包含许多用户感兴趣的不同产品的复选框。我需要将这些复选框以单个字符串的形式发送，其中列出了他们检查的所有产品。在提交表单前将复选框值合并到字符串中

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

来源

2013-07-29 Brian Barrus

服务器对数据的期望格式是什么？只有一个名称 - 值对的字符串，或者它是JSON格式，如下面的阿姆斯特丹所讨论的？ – 2013-07-29 23:35:51

其实我发送它到一个SalesForce服务器，所以我只需要在逗号分隔的字符串中的选中复选框的输入名称：“产品A，产品D，产品F”。另外，我从来没有使用JSON来发布表单。 –

我提高了马塞尔的。 – 2013-07-30 00:12:28

我只是去给你上一次在提交表单（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。

来源

2013-07-30 00:06:33

我会倾向'如果（form.addEventListener）{...}其他{...}'通过try-catch块 –

你能解释为什么吗？ :) –

我敢肯定，这是一个愚蠢的错误，但经过很多努力，我无法获得脚本来设置隐藏字段的值... oyy –

首先，你需要抢名称值对，并将它们存储到一个对象，例如：

var obj = {}; // this will hold your name value pairs

从那里，你可以使用JSON将数据发送到服务器。 JSON数据发送到服务器时采用字符串形式。

var json_string = JSON.stringify(obj);

来源

2013-07-29 23:26:33

也许你应该解释如何获取名称 - 值对。他说他没有经验 – 2013-07-29 23:34:39

（打断）对不起，先生。 –

在提交表单前将复选框值合并到字符串中

回答

相关问题