How to post a form with many fields with jQuery?

Question

Though $.ajax() can be used to do ajax things, I don\'t think its fit for posting values of a big form.

How would you post a big form (many fields) with

Answer 1

What is your reasoning behind that assumption? POST is designed for transferring larger amounts of data than GET. An AJAX POST request is almost exactly the same as a "normal" POST request, it's just bundled and handled internally by a browser in a slightly different manner. A couple of headers might be slightly different, but the data is all the same. Why should AJAX fail to handle a "large" form?

What would you even define as a "large" form anyway?

Edit: Thanks for the clarification on your question. I understand what you're asking now, and I see where you're coming from. For a form with a lot of inputs, it could be a pain to bundle it up into an Ajax request all the time.

Since you're using jQuery, there's an easy solution to this. Check out the serialize() method. You give it a form, and it gives you back a query string of all the form input elements and values which you can pass directly to an ajax request. There's an example there on the manual page that shows how it's done.

All you have to do is this:

$.ajax({
    data: $("form").serialize(),
    //etc.
});

where "form" is the id of your form.

Answer 2

If you haven't tried it yet. Then create a BIG form (now whatever you mean by that) and use $.ajax() or jQuery Forms plugin to post it. You will know if it is for this kind of things or not!

EDIT:- (after your edit) Then forms plugin is for you! Give it a shot.

Answer 3

You can use jQuery.post( url, data, callback, type), as its simpler to jQuery.ajax( options ).

By using serialize, you can send the whole form automatically.

$.post("/post_handler/",
    $("form#my_form").serialize(),
    function(json){
        /*your success code*/
    }, "json");

A more complete example:

<script>
$().ready(function(){
    $("form#my_form submit").click(function(){
        $.post("/post_handler/",
            $("form#my_form").serialize(),
            function(json){
                /*your success code*/
            }, "json");
        return false;
    });
}
</script>
<form id="my_form" action="/post_handler/" method="post">
  <input type="text" name="text1" value="my text 1" />
  <input type="text" name="text2" value="my text 2" />
  <input type="submit" name="submit_button" value="Send" />
</form>

This would override the default post, and perform it with AJAX.

Answer 4

What you're asking is not hard. All you have to do is collect the content of the form and pass it to your server (usually using JSON).

Take a look at this howto:

http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59

Answer 5

You probably want to use serialize if you don't want to manually deal with each element.

$.ajax({
   type: "POST",
   url: "form.php",
   data: $("#form_id").serialize()
   success: function(msg) {
     alert("Form Submitted: " + msg);
   }
 });

Answer 6

Try the jquery form plugin.

It probably does exactly what you need to do out of the box.