jQuery AJAX form submission not working

Question

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.

thecodedeveloper.com · Accepted Answer · 2013-04-03 07:25:31Z

5

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>

edited Apr 3, 2013 at 7:25

thecodedeveloper.com

3,2505 gold badges40 silver badges69 bronze badges

answered Apr 27, 2010 at 16:26

parserr

7291 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DisgruntledGoat Over a year ago

Turned out to be something really stupid - the jQuery library code wasn't being included. It was in a PHP conditional that was false on the page I was testing with... D'oh!

Villapalos · Accepted Answer · 2016-05-23 17:12:58Z

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...

edited May 23, 2016 at 17:12

Villapalos

7179 silver badges15 bronze badges

answered Apr 27, 2010 at 16:13

Tim

7,0668 gold badges40 silver badges58 bronze badges

Comments

Tom Beech · Accepted Answer · 2012-08-31 08:50:35Z

0

i had a similar problem- my problem was that during a form post, i was using $("form").submit to do something before the page submitted. this something included a jquery post action. unfortunatley, the post action wouldnt complete before the form post completed, and thus caused problems later- my code looked like this:

        $("form").submit(function () {
                var result =
                    $.post('/Controller/Action',
                    { data: array.toString() }
            });

The solution was to

        event.preventDefault;

immediately before return true, which stops the form posting until the ajax call has completed.

answered Aug 31, 2012 at 8:50

Tom Beech

2,4191 gold badge23 silver badges26 bronze badges

Comments

JustTry · Accepted Answer · 2021-07-14 02:16:36Z

0

i tried many option didnt work for me i used post instead

$.post("myUrl", $( "#hiddenForm" ).serialize() ).done(function(data){
 myMap = new Map(Object.entries(data));        
 .....
 ......
});

answered Jul 14, 2021 at 2:16

JustTry

1823 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX form submission not working

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related