[英]Pass checkbox values with Jquery to PHP and display result in div
我想使用jQuery過濾實時結果(就像在此網站上http://shop.www.hi.nl/hi/mcsmambo.p?M5NextUrl=RSRCH一樣 )。 因此,當某人選中一個復選框時,結果應實時更新(以div為單位)。 現在,我是jQuery的新手,我嘗試了很多示例,但無法正常工作。 這是我的代碼,有人可以告訴我我做錯了嗎? 非常感謝你!
HTML
<div id="c_b">
Kleur:<br />
<input type="checkbox" name="kleur[1]" value="Blauw"> Blauw <br />
<input type="checkbox" name="kleur[2]" value="Wit"> Wit <br />
<input type="checkbox" name="kleur[3]" value="Zwart"> Zwart <br />
<br />
Operating System:<br />
<input type="checkbox" name="os[1]" value="Android"> Android <br />
<input type="checkbox" name="os[2]" value="Apple iOS"> Apple iOS <br />
</div>
<div id="myResponse">Here should be the result</div>
jQuery的
function updateTextArea() {
var allVals = [];
$('#c_b :checked').each(function() {
allVals.push($(this).val());
});
var dataString = $(allVals).serialize();
$.ajax({
type:'POST',
url:'/wp-content/themes/u-design/filteropties.php',
data: dataString,
success: function(data){
$('#myResponse').html(data);
}
});
}
$(document).ready(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
PHP
//Just to see if the var passing works
echo var_export($_POST);
您使用的.serialize()錯誤,它僅適用於表單元素。
有了這段代碼,我想您會得到您所需要的。
Javascript / JQuery
function updateTextArea() {
var allVals = "";
$('#c_b input[type=checkbox]:checked').each(function() {
currentName = $(this).attr("name");
currentVal = $(this).val();
allVals = allVals.concat( (allVals == "") ? currentName + "=" + currentVal : "&" + currentName + "=" + currentVal );
});
$.ajax({
type:'POST',
url:'/wp-content/themes/u-design/filteropties.php',
data: allVals,
dataType: "html",
success: function(data){
$('#myResponse').html(data);
}
});
}
$(document).ready(function() {
$('#c_b input[type=checkbox]').click(updateTextArea);
updateTextArea();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.