用jQuery过滤结果 [英] Filter results with Jquery
问题描述
我已经为php中的脚本创建了一个搜索表单.基本上，此表单有一些复选框和一个提交按钮.每个复选框都是一个类别，如果我选中一个或多个复选框，则结果将按选择的类别进行过滤.
I've created a search form for a script in php. Basicaly this form have some checkboxes and a submit button. Each checkbox is a category, if I check one or more checkboxes the result is filtered by thoose categories.
这是html代码:
<?php
if ($_POST['do_search'] == 'true') {
$results = 'Do the query and store results in the $results var';
}
?>
<form method="post" action="search.php" id="search">
<input type="checkbox" name="categories[]" id="categories[]" value="1">Category 1
<input type="checkbox" name="categories[]" id="categories[]" value="2">Category 2
<input type="checkbox" name="categories[]" id="categories[]" value="3">Category 3
<input type="submit" name="submit">
<input type="hidden" id="do_search" value="true">
</form>
<div id="search_results">
<?php echo $results; ?>
</div>
我试图使结果与ajax内联，在我脚本的大部分部分中，我都使用JQuery.任何人都可以帮助我弄清楚如何通过ajax实时传递$ _POST数据，而无需重新加载页面?
I'm trying to get the result inline with ajax, for most parts of my script I use JQuery. Anyone can help me to figure out how to pass the $_POST data in realtime through ajax, without reload the page?
p.s.对不起我的英语不好，我希望我足够清楚:|
p.s. I'm sorry for my poor english, I hope I was clear enough :|
推荐答案
ID必须唯一，表单只担心名称.
IDs must be unique, forms only worry about names.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#submitButton').click(function()
{
var catArray = new Array();
var j = 0;
for(var i = 0; i < 3; i++)
{
if(document.myForm.categories[i].checked == 1)
{
catArray[j] = document.myForm.categories[i].value;
j++;
}
}
// Just put this here so you can see the output
// alert('array:'+catArray.toString());
$.ajax(
{
type: "POST",
url: "search.php",
data: ({ categories : catArray.toString() }),
success: function(msg)
{
$('#search_results').html(msg);
}
});
return false;
});
});
</script>
</head>
<body>
<form name="myForm" onsubmit="return false">
Category 1<input type="checkbox" name="categories" id="category1" value="1" />
Category 2<input type="checkbox" name="categories" id="category2" value="2" />
Category 3<input type="checkbox" name="categories" id="category3" value="3" />
<button id="submitButton">Submit</button>
</form>
<div id="search_results"></div>
</body>
</html>
这篇关于用jQuery过滤结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
