Question

此表单通过复选框有多个选项。例如。 Pet You Own是一个多种选择，有各种选择，如猫，狗，骡子等。

现在默认情况下，发送的查询字符串将如下所示：

?pet=dog&pet=cat&pet=mule

给予所有3个检查。

我需要一种方法来解析它，以便查询字符串看起来像：

?pet=dog,cat,mule

另一个要求是，表单中还有其他参数/输入，因此需要与其他标准表单输入一起使用。

Answer 1

您目前看到的格式是传统格式。如果您的表单字段名为pet[]而不是pet，则您的服务器可以将结果解释为数组。

话虽如此，要实际执行您要求的操作，您可以重置复选框的name属性，以便不会发布它们，而是发布一个隐藏字段，其中包含值你的复选框是逗号分隔的字符串：

$('#my-form').submit(function() {

    var pets = [];
    $('input[name=pet]:checked').each(function() {
        pets.push($(this).val());
    });

    // stop checkboxes from being posted
    $('input[name=pet]').attr('name','');

    // have an input field be posted instead
    $('#my-hidden-field')
        .val(pets.join(','))
        .attr('name', 'pet');

});

Answer 2

我建议你在服务器端做这个工作。当您的服务器收到此请求时，它将获得一个名为pet的数组，其中包含三个元素：dog，cat和mule。你可以轻松地将它们联系起来。

==== 我用JavaScript实现了这个：

var str = window.location.href;
var queryString = "", temp = {};
str = str.substring(str.lastIndexOf("?") + 1);
str.split("&").some(function(item) {
var tarr = item.split("=");
    if(typeof temp[tarr[0]] == "undefined") {
        temp[tarr[0]] = tarr[1];
    } else if(typeof temp[tarr[0]] == "string") {
        temp[tarr[0]] += "," + tarr[1];
    }
});
// Make queryString
for(var i in temp) {
    queryString += "&" + i + "=" + temp[i];
}
queryString = queryString.replace(/^./,"");

// 
var href = window.location.href;
console.log("before:", href);
href = href.replace(/\?.*$/, "?");
// the url is that you want
console.log("after:", href + queryString);
//window.location.href = href + queryString;

输出：

之前：   http://www.boutell.com/newfaq/creating/forcedownload.html?pet=dog&pet=cat&pet=mule&animal=camel
  后：   http://www.boutell.com/newfaq/creating/forcedownload.html?pet=dog,cat,mule&animal=camel

Answer 3

需要进行一些清洁，但使用普通的JS可以实现

<html>
    <head>
    <title>My Page</title>
    <script>
    function myFunction(){
    var options = "";
    if(document.getElementById("option1").checked){
    options = options+"Milk";
    }
    if(document.getElementById("option2").checked){
    options = options+",Butter";
    }
    if(document.getElementById("option3").checked){
    options = options+",Cheese";
    window.location = "end.html&options="+options
    }
    }
    </script>
    </head>
    <body>

    <div align="center"><br>
    <input id="option1" type="checkbox" name="option1" value="Milk"> Milk<br>
    <input id="option2" type="checkbox" name="option2" value="Butter" checked> Butter<br>
    <input id="option3" type="checkbox" name="option3" value="Cheese"> Cheese<br>
    <br>

    </div>
    <a href="#" onClick="myFunction();">Button to submit </a>
    </body>
    </html>

Answer 4

将复选框命名为p1，p2等。在表单中有一个名为“pet”的隐藏字段。在使用JS提交之前，按照您需要的方式设置隐藏变量的值并返回true。

function beforeSubmit() {
  var p = '';
  if($('#p1').attr('checked')==true) p += ',cat';
  if($('#p2').attr('checked')==true) p += ',dog';
  ...
  p = p.substring(1); // strip the , at 0
  $('#pet').val(p);
  return true;
}

并且您的表单应该是：

<form ... onsubmit="return beforeSubmit()">
...
<input type="checkbox" name="p1" id="p1">Cat<br>
<input type="checkbox" name="p2" id="p2">Dog<br>
...
<input type="hidden" name="pet" id="pet" value="">
</form>

jQuery或Javascript在提交时解析查询字符串

4 个答案: