このフォームには、チェックボックスを使用して複数の選択肢があります。例えば。jQueryまたはJavascriptを使用してクエリ文字列を解析する
すべて3がチェックされている与えられた?pet=dog&pet=cat&pet=mule
：あなたは自身のペットが複数の選択肢であり、そのようなミュールなど猫、犬、など様々なオプション
は、デフォルトでは今そこにある、送信されたクエリ文字列は次のようになります。
私は、クエリ文字列がどのように見えるように、これを解析する方法が必要です：
?pet=dog,cat,mule
別の要件は、それが他の標準形式と連携して動作する必要があるので、フォーム内の他のパラメータ/入力がある、ということです入力。
現在表示されている形式は従来の形式です。フォームフィールドの名前が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');
});
このジョブをサーバー側で実行することをお勧めします。サーバーがこの要求を受け取ると、petと呼ばれる配列を取得し、3つの要素、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;
OUTPUT：
前： 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
名前あなたのチェックボックスp1、p2などあなたのフォームに「ペット」という名前の隠しフィールドがある。 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>
私はあなたの答えが好きです！ –
偉大な答え、私はupvoteすることができた場合にのみ働く... –
クリーニングのビット必要はなく、プレーン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>
をacheiveすることができます？あなたの入力を "ペット"から "ペット[]"に名前を付けてください。 – jbrtrnd