Filter results with Jquery
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.
Here is the html code:
<?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[]"开发者_JAVA技巧 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>
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. I'm sorry for my poor english, I hope I was clear enough :|
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>
Inside jQuery, when you do an AJAX request, you call:
jQuery.ajax(options)
In your options object, make sure you set the data member. This member serializes a javascript object into post data.
You can then intercept the form submit, and submit it via AJAX by building up the request from the action, and form fields.
Alternatively you can use the simpler
jQuery.post()
function.
http://docs.jquery.com/Ajax
start with this:
$('#search').submit(function(){
var _this = $(this);
$.post(_this.attr('action'), _this.serialize(), function(result){
// callback
});
return false;
});
Here is a fairly detailed tutorial on AJAX form submission, which should answer your questions although I don't like the way the query parameters are done. It has:
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
I would instead do this:
$.ajax({
type: "POST",
url: "bin/process.php",
data: {
name: name,
email: email,
phone: phone
},
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
If you want to automatically construct the form variables rather than doing it automatically, take a look at Serialize form to JSON with jQuery.
加载中,请稍侯......
精彩评论