的jQuery或JavaScript解析查詢字符串在提交

這種形式通過一個複選框多種選擇。例如。寵物，你自己的纔是一個選擇題，有多種選擇，如貓，狗，騾等的jQuery或JavaScript解析查詢字符串在提交

現在在默認情況下，發送的查詢字符串看起來像：

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

給出的所有3進行檢查。

我需要一種方法來解析這一點，以便查詢字符串的樣子：

?pet=dog,cat,mule

另一個要求是，有那麼它需要一起工作與其他標準形式的其他參數/表單輸入投入。

來源

2011-12-15 Francis Kim

你爲什麼不使用數組？將您的輸入「寵物」命名爲「寵物[]」。 – jbrtrnd 2011-12-15 08:41:41

你目前看到的格式是常規格式。如果您的表單字段被命名爲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'); 

});

來源

2011-12-15 08:42:55

我建議你在服務器端做這個工作。當你的服務器收到這個請求時，它會得到一個名爲pet的數組，它有三個元素：dog，cat和mule。你可以輕鬆地將它們連接

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

來源

2011-12-15 08:44:23 ijse

名稱的複選框

==== 我用JavaScript實現這個如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>

來源

2011-12-15 08:48:43 techfoobar

我喜歡你的答案！ – 2011-12-15 23:34:23

清潔的一點是必要的，但使用這種用普通JS可以acheive

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

來源

2011-12-15 09:12:40

的jQuery或JavaScript解析查詢字符串在提交

回答

相關問題