jQuery AJAX form submission not working

ajax, forms, jquery, submit

Solution

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>

Problem

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.

Original source

Related problems