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) without entering all them by hand?

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

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://net.tutsplus.com/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Answer 3

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 4

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 5

Try the jquery form plugin.

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

Answer 6

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 7

I've sent rather complex (large) forms with $.ajax() and had no issue. I have not sent files over ajax requests, but I've seen it done and it works better then traditional posts because it doesn't tie up the browser while you are uploading.

Based on your comment to @zombat, My guess it that you have a very large number of inputs, most of which are going to be blank most of the time. Two suggestions here 1) split the inputs into separate forms and only send each as soon as it is touched/completed. 2) examine the state of your form with JavaScript and wrap the information into JSON or XML, and Instead of posting the form data, post just the data structure.

"Large" should not be a problem, perhaps you can find a better adjective to describe your data that will let everyone know why it is hard to send.