jQuery.ajax - submit all elements in form without manually entering them

Question

I would like to use jQuery.ajax to submit a form using POST without having to specify everything manually in the "data: " part.

This is what I don't want:

data:   "username=" + document.getElementById("username").value + 
    "&email=" + document.getElementById("email").value,

Is there a way to just have it include alla elements with their values from an entire FORM field? This form is generated dynamically so it would save me a lot of time!

score 94 · Accepted Answer · answered Aug 04 '09 at 18:42

94

Use serialize method.

data :   $("form").serialize()

answered Aug 04 '09 at 18:42

SolutionYogi

31,807
12
70
78

2

Don't forget to give each input element a name. – Valentin Despa Jan 31 '13 at 14:29
4

Use the `:input` selector: `$("#form :input").serialize()` – John Magnolia Dec 15 '13 at 19:10
holy cow, why is that so hard to find! beautiful. – greg Feb 01 '16 at 23:04

score 10 · Answer 2 · answered Aug 04 '09 at 18:43

10

Look at http://docs.jquery.com/Ajax/serialize.

That would make the following example:

$("#submit").click(function() {
    $.ajax({
        data: $("form").serialize(),
        ...rest
    });
});

answered Aug 04 '09 at 18:43

Dykam

10,190
4
27
32

score 2 · Answer 3 · answered Feb 10 '16 at 05:52

2

Use .serialize() method to send entire form data in jQuery Ajax.

data:$('#formID').serialize()

Example script can be found from here - How to send entire form data in jQuery Ajax

answered Feb 10 '16 at 05:52

JoyGuru

1,803
20
11

jQuery.ajax - submit all elements in form without manually entering them

3 Answers3

Linked