jQuery AJAX form submission not working
Solution 1
your code works fine if html is setup right. here's my test html (with php), so you can compare to your own.
<?php
if (!empty($_POST)) {
die("<pre>" . print_r($_POST, true) . "</pre>");
}
?>
<html>
<head>
<title>ajax submit test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function ($) {
var $form = $('#default_contact');
$form.submit(function () {
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize(),
success: function (response) {
alert(response);
}
});
return false;
});
});
</script>
</head>
<body>
<form id="default_contact" action="formsubmit.php" method="post">
<input type="hidden" value="123" name="in1" />
<input type="hidden" value="456" name="in2" />
<input type="submit" value="send" />
</form>
</body>
</html>
Solution 2
If you have your html set up so that the form works all on its own, then it will act just as a normal form without the jquery. So take out the action attribute from the html, and change your jquery to:
url: your-submit-file.php,
If that doesn't work, try:
jQuery(document).ready( function($) {
var $form = $('#default_contact');
$form.submit( function(event) {
$.ajax({
type: 'POST',
url: your-submit-file.php,
data: $form.serialize(),
success: function( response ) {
console.log( response );
}
});
event.preventDefault;
return false;
});
Also, have you tried jQuery's $.post() ? It's much easier to use...
DisgruntledGoat
I'm a web developer and programmer from the UK. I'll fill this out more when I can be bothered; really I'm just trying to get the autobiography badge.
Updated on July 09, 2022Comments
-
DisgruntledGoat almost 2 years
I'm trying to submit a form through AJAX instead of using the normal POST submission. The HTML is just a standard form with
method="post"
and my jQuery code is as follows:jQuery.noConflict(); jQuery(document).ready( function($) { var $form = $('#default_contact'); $form.submit( function() { $.ajax({ type: 'POST', url: $form.attr( 'action' ), data: $form.serialize(), success: function( response ) { console.log( response ); } }); return false; }); });
(Based on this answer)
I'm returning false from the submit function, but the form is still getting submitted and I can't figure out why. Not getting any Firebug errors.