Multiple select and AJAX submit
I'm trying to submit a form with ajax.
HTML code (this is a jquery multiselect, I can select from 1 to 3 options):
-
<form action="" method="post" id="formzone">
<select id="zone" name="zone" multiple="multiple" size="5">
<option value="1">OPTION 1</option>
<option value="2">OPTION 2</option>
<option value="3">OPTION 3</option>
<option value="4">OPTION 4</option>
</select>
<input type="submit" value="Show Results" />
</form>
<div id="filterzone"></div>
js code:
-
$('#formzone').submit(function() {
var results = $(this).serialize();
$("#filterzone").text(results);
return false; //these last two lines wont be there when I add ajax
This works, I think: if I select options 1, 2 and 4, the text in #filterzone becomes:
zone=1&zone=2&zone=4
I'm now trying to add AJAX and display the response in that div.
The response comes from this simple page (just to see if it works...):
-
filterzone.php:
<?php
print_r ($_POST);
?>
Ajax code:
-
$.ajax({
type: "POST",
data: results,
url: "filterzone.php",
error: function() {
$("#filterzone").text("Failed to submit");
},
success: function(r) {
$("#filterzone").text(r);
}
});
});
It says "Failed to submit" for a moment, then refreshes the page.
What am I doing wrong? I looked around for some tutorials, but they're always about a login form (so with a fixed number of inputs, I could have thousands of options instead, although i submit just three of them).
Thank you