Pass entire form as data in jQuery Ajax function

Question

I have a jQuery ajax function and would like to submit an entire form as post data  We are constantly updating the form so it becomes tedious to constantly update the form inputs that should be sent in the request

User · Answer

A good jQuery option to do this is through FormData. This method is also suited when sending files through a form!

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

Your send function in jQuery would look like this:

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

to add data to your form you can either use a hidden input in your form, or you add it on the fly:

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );

User · Answer

Use  serialize     var str      form   serialize      Serialize a form to a query string  that could be sent to a server in an Ajax request

User · Answer

You just have to post the data  and Using jquery ajax function set parameters  Here is an example    lt script gt            function                      form   on  submit   function  e                     e preventDefault                       ajax                       type   post                       url   your complete url                       data     form   serialize                        success  function  response                                 form   0  reset                                  feedback   text response                           if response   True                                    form   0  reset                                    feedback   text  Your information has been stored                                                       else                                 feedback   text   Some Error has occured Errror     ID duplicate                                                                                 lt  script gt

User · Answer

The other solutions didn t work for me  Maybe the old DOCTYPE in the project I am working on prevents HTML5 options   My solution    lt form id  form 1  action  result php  method  post   onsubmit  sendForm this id  return false  gt       lt input type  hidden  name  something  value  1  gt   lt  form gt    js   function sendForm form id       var form         form id         ajax           type   POST           url    form  attr  action            data    form  serialize            success  function result                console log result

User · Answer

In general use serialize   on the form element   Please be mindful that multiple  lt select gt  options are serialized under the same key  e g    lt select id  foo  name  foo  multiple  multiple  gt       lt option value  1  gt one lt  option gt       lt option value  2  gt two lt  option gt       lt option value  3  gt three lt  option gt   lt  select gt    will result in a query string that includes multiple occurences of the same query parameter    path  foo 1 amp foo 2 amp foo 3 amp someotherparams      which may not be what you want in the backend   I use this JS code to reduce multiple parameters to a comma-separated single key  shamelessly copied from a commenter s response in a thread over at John Resig s place    function compress data        data   data replace      amp          amp          amp  1    amp     g    1 2  4 3        return      amp          amp  1  test data    compress data    data      which turns the above into    path  foo 1 2 3 amp someotherparams      In your JS code you d call it like this   var inputs   compress     your-form   serialize       Hope that helps

User · Answer

There s a function that does exactly this   http   api jquery com serialize   var data      form   serialize      post  url   data

User · Answer

serialize   is not a good idea if you want to send a form with post method  For example if you want to pass a file via ajax its not gonna work   Suppose that we have a form with this id    myform    the better solution is to make a FormData and send it       var myform   document getElementById  myform        var fd   new FormData myform          ajax           url   example php           data  fd          cache  false          processData  false          contentType  false          type   POST           success  function  dataofconfirm                   do something with the result

[jquery] Pass entire form as data in jQuery Ajax function

Examples related to jquery

Examples related to ajax