Form submission using jQuery ajax not working

Question

I have a form generated dynamically using jQuery as below:

<form id="editorform" accept-charset="utf-8" method="post" name="editorform" action="menuupdate">
    <div>
        <input id="updateItem" type="submit" value="Update"></input>
    </div>
</form>

And I have jQuery Ajax code :

$("#editorform").submit(function(event)
        {

    var urls=$("#editorform").attr('action');
    event.preventDefault();
    var postData=$("#editorform").serializeArray();
    $.ajax({
        type:'POST',
        url:urls,
        data:postData,
        async:   false,
        contentType :'application/x-www-form-urlencoded; charset=UTF-8',
        success: function(results){
            alert(results);
        }
        });

    return false;

        });

The ajax call is not getting executed, instead a normal form submission is taking place.

Can anybody help figure out what's wrong with this piece of code?

Any help is greatly appreciated.

Do you see any error in the JS console?

rubyist
– rubyist

2015-05-17 18:47:16 +00:00
Commented May 17, 2015 at 18:47 — rubyist
– rubyist, Commented May 17, 2015 at 18:47

John S · Accepted Answer · 2015-05-17 19:00:52Z

1

You say the form is dynamically generated. It might be that you are registering the submit-event handler before the form element exists. If that is the case, then $("#editorform") does not represent any elements at that time.

You either have to bind the submit-event handler after the form element is added to the page, or use event delegation to bind the event.

Try changing this:

$("#editorform").submit(function(event)

To:

$(document).on('submit', '#editorform', function(event)

Also, I think you should call .serialize() instead of .serializeArray().

edited May 17, 2015 at 19:00

answered May 17, 2015 at 18:47

John S

21.5k9 gold badges50 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Form submission using jQuery ajax not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related