jQuery AJAX submit form

Question

I have a form with name orderproductForm and an undefined number of inputs   I want to do some kind of jQuery get or ajax or anything like that that would call a page through Ajax  and send along all the inputs of the form orderproductForm   I suppose one way would be to do something like  jQuery get  myurl              action   document orderproductForm action value             cartproductid   document orderproductForm cartproductid value             productid   document orderproductForm productid value                   However I do not know exactly all the form inputs  Is there a feature  function or something that would just send ALL the form inputs

User · Answer

JavaScript   function           var form      add-form          input       exampleFormControlTextarea1         form submit function event            event preventDefault             var req     ajax              url  form attr  action               type   POST              data  form serialize                  req done function data           if  data      success                var li       lt li class  list-group-item  gt    input val      lt  li gt                 li hide                    appendTo   list-group                    fadeIn                   input type  text   textarea   val                               jQuery      HTML       lt ul class  list-group col-sm-6 float-left  gt               lt  php             foreach   data as  item                    echo   lt li class  list-group-item  gt    item   lt  li gt                                gt           lt  ul gt            lt form id  add-form  class  col-sm-6 float-right  action   inc add-new php  method  post  gt               lt p class  form-group  gt                   lt textarea class  form-control  name  message  id  exampleFormControlTextarea1  rows  3  placeholder  Is there something new   gt  lt  textarea gt               lt  p gt               lt button type  submit  class  btn btn-danger  gt Add new item lt  button gt           lt  form gt

User · Answer

Simple version  does not send images    lt form action   my ajax url  class  my-form  gt       lt  form gt   lt script gt       function                body   on  submit     my-form   function e               e preventDefault                var form     e target                 post  form attr  action    form serialize    function res                   console log res                                     jQuery    lt  script gt    Copy and paste ajaxification of a form or all forms on a page  It is a modified version of Alfrekjv s answer   It will work with jQuery    1 3 2 You can run this before the document is ready You can remove and re-add the form and it will still work It will post to the same location as the normal form  specified in the form s  action  attribute   JavaScript  jQuery document  submit function e       var form   jQuery e target       if form is   form-id        check if this is the form that you want  delete this check to apply this to all forms          e preventDefault            jQuery ajax               type   POST               url  form attr  action                 data  form serialize       serializes the form s elements              success  function data                    console log data      show response from the php script   use the developer toolbar console  firefox firebug or chrome inspector console                                        I wanted to edit Alfrekjv s answer but deviated too much from it so decided to post this as a separate answer   Does not send files  does not support buttons  for example clicking a button  including a submit button  sends its value as form data  but because this is an ajax request the button click will not be sent   To support buttons you can capture the actual button click instead of the submit   jQuery document  click function e       var self   jQuery e target       if self is   form-id input type submit    form-id input type button    form-id button             e preventDefault            var form   self closest  form    formdata   form serialize              add the clicked button to the form data         if self attr  name                 formdata     formdata          amp                   formdata    self attr  name             self is  button     self html    self val                       jQuery ajax               type   POST               url  form attr  action                 data  formdata               success  function data                    console log data                                         On the server side you can detect an ajax request with this header that jquery sets HTTP X REQUESTED WITH for php  PHP  if  empty   SERVER  HTTP X REQUESTED WITH     amp  amp  strtolower   SERVER  HTTP X REQUESTED WITH        xmlhttprequest           is ajax

User · Answer

I know this is a jQuery related question  but now days with JS ES6 things are much easier  Since there is no pure javascript answer  I thought I could add a simple pure javascript solution to this  which in my opinion is much cleaner  by using the fetch   API  This a modern way to implements network requests  In your case  since you already have a form element we can simply use it to build our request   const form   document forms  orderproductForm    const formInputs   form getElementsByTagName  input     let formData   new FormData     for  let input of formInputs        formData append input name  input value       fetch form action                method  form method          body  formData             then response   gt  response json         then data   gt  console log data        catch error   gt  console log error message        finally      gt  console log  Done

User · Answer

I find it surprising that no one mentions data as an object  For me it s the cleanest and easiest way to pass data      form foo   submit function            ajax           url   http   foo bar some-ajax-script           type   POST           dataType   json           data                 foo    some-foo-value                bar       bar   val                    always function  response            console log response                return false        Then  in the backend      Example in PHP   POST  foo      some-foo-value   POST  bar      value in  bar

User · Answer

Another similar solution using attributes defined on the form element    lt form id  contactForm1  action   your url  method  post  gt       lt  -- Form input fields here  do not forget your name attributes   -- gt   lt  form gt    lt script type  text javascript  gt      var frm       contactForm1         frm submit function  e             e preventDefault               ajax               type  frm attr  method                url  frm attr  action                data  frm serialize                success  function  data                    console log  Submission was successful                     console log data                              error  function  data                    console log  An error occurred                     console log data                                       lt  script gt

User · Answer

To avoid multiple formdata sends   Don t forget to unbind submit event  before the form submited again   User can call sumbit function more than one time  maybe he forgot something  or was a validation error        idForm   unbind   submit  function e

User · Answer

If you re using form serialize   - you need to give each form element a name like this    lt input id  firstName  name  firstName        And the form gets serialized like this   firstName Chris amp lastName Halcrow

User · Answer

I got the following for me   formSubmit   login-form     api user login     members       where  function formSubmit form  url  target          form  submit function event              post url    form  serialize                 done function res                    if  res success                        window location   target                                    else                       alert res error                                                 fail function res                    alert  Server Error      res status         res statusText                           event preventDefault                This assumes the post to  url  returns an ajax in the form of  success  false  error  my Error to display    You can vary this as you like  Feel free to use that snippet

User · Answer

This code works even with file input    document  on  submit    form   function event        event preventDefault                  ajax           url    this  attr  action            type    this  attr  method            dataType   JSON           data  new FormData this           processData  false          contentType  false          success  function  data  status                                error  function  xhr  desc  err

User · Answer

This is not the answer to OP s question  but in case if you can t use static form DOM   you can also try like this   var  form       lt form  gt    append          lt input  gt     name   username    val  John Doe            lt input  gt     name   user id    val  john 1234         ajax       url   api user search       type   POST       contentType   application x-www-form-urlencoded       data   form serialize        success  function data  textStatus  jqXHR            console info data              error  function jqXHR  textStatus  errorThrown            var errorMessage   jqXHR responseText          if  errorMessage length  gt  0                alert errorMessage

User · Answer

There are a few things you need to bear in mind   1  There are several ways to submit a form   using the submit button by pressing enter by triggering a submit event in JavaScript possibly more depending on the device or future device     We should therefore bind to the form submit event  not the button click event  This will ensure our code works on all devices and assistive technologies now and in the future   2  Hijax  The user may not have JavaScript enabled  A hijax pattern is good here  where we gently take control of the form using JavaScript  but leave it submittable if JavaScript fails   We should pull the URL and method from the form  so if the HTML changes  we don t need to update the JavaScript   3  Unobtrusive JavaScript  Using event preventDefault   instead of return false is good practice as it allows the event to bubble up  This lets other scripts tie into the event  for example analytics scripts which may be monitoring user interactions   Speed  We should ideally use an external script  rather than inserting our script inline  We can link to this in the head section of the page using a script tag  or link to it at the bottom of the page for speed  The script should quietly enhance the user experience  not get in the way   Code  Assuming you agree with all the above  and you want to catch the submit event  and handle it via AJAX  a hijax pattern   you could do something like this     function          form my form   submit function event        event preventDefault       Prevent the form from submitting via the browser     var form     this         ajax         type  form attr  method          url  form attr  action          data  form serialize          done function data             Optionally alert the user of success here           fail function data             Optionally alert the user of an error here                        You can manually trigger a form submission whenever you like via JavaScript using something like     function          form my form   trigger  submit          Edit   I recently had to do this and ended up writing a plugin     function          fn autosubmit   function         this submit function event          event preventDefault          var form     this           ajax           type  form attr  method            url  form attr  action            data  form serialize            done function data               Optionally alert the user of success here             fail function data               Optionally alert the user of an error here                          return this         jQuery    Add a data-autosubmit attribute to your form tag and you can then do this   HTML   lt form action   blah  method  post  data-autosubmit gt     lt  -- Form goes here -- gt   lt  form gt    JS    function          form data-autosubmit    autosubmit

User · Answer

There s also the submit event  which can be triggered like this     form id   submit    You d use this method if the form is well represented in HTML already  You d just read in the page  populate the form inputs with stuff  then call  submit    It ll use the method and action defined in the form s declaration  so you don t need to copy it into your javascript   examples

User · Answer

You can also use FormData  But not available in IE    var formData   new FormData document getElementsByName  yourForm   0      yourForm  form selector           ajax       type   POST       url   yourURL     where you wanna post     data  formData      processData  false      contentType  false      error  function jqXHR  textStatus  errorMessage            console log errorMessage      Optional            success  function data   console log data          This is how you use FormData

User · Answer

You may use this on submit function like below   HTML Form   lt form class  form  action    method  post  gt       lt input type  text  name  name  id  name   gt       lt textarea name  text  id  message  placeholder  Write something to us  gt   lt  textarea gt       lt input type  button  onclick  return formSubmit     value  Send  gt   lt  form gt    jQuery function    lt script gt      function formSubmit            var name   document getElementById  name   value          var message   document getElementById  message   value          var dataString    name    name     amp message     message          jQuery ajax               url   submit php               data  dataString              type   POST               success  function data                       myForm   html data                              error  function                      return true         lt  script gt    For more details and sample Visit  http   www spiderscode com simple-ajax-contact-form

User · Answer

Try  fetch form action  method  post   body  new FormData form        x000D   x000D  function send e form    x000D    fetch form action  method  post   body  new FormData form     x000D   x000D    console log  We submit form asynchronously  AJAX     x000D    e preventDefault    x000D    x000D   lt form method  POST  action  myapi send  onsubmit  send event this   name  orderproductForm  gt  x000D       lt input hidden name  csrfToken  value   0meh  h  gt  x000D       lt input name  email  value  aa bb com  gt  x000D       lt input name  phone  value  123-456-666  gt  x000D       lt input type  submit  gt      x000D   lt  form gt  x000D   x000D  Look on Chrome Console  gt  Network after before  submit  x000D   x000D   x000D

User · Answer

consider using closest     table table form   closest  tr   filter   not  last-child    submit function  ev  frm            frm     ev target  closest  form              ajax               type  frm attr  method                url  frm attr  action                data  frm serialize                success  function  data                    alert data                                    ev preventDefault

User · Answer

You can use the ajaxForm ajaxSubmit functions from Ajax Form Plugin or the jQuery serialize function   AjaxForm       theForm   ajaxForm  url   server php   type   post      or      theForm   ajaxSubmit  url   server php   type   post      ajaxForm will send when the submit button is pressed  ajaxSubmit sends immediately   Serialize     get  server php         theForm   serialize       post  server php       theForm   serialize      AJAX serialization documentation is here

User · Answer

This is a simple reference     this is the id of the form    quot  idForm quot   submit function e         e preventDefault       avoid to execute the actual submit of the form       var form     this       var url   form attr  action               ajax              type   quot POST quot              url  url             data  form serialize       serializes the form s elements             success  function data                              alert data      show response from the php script

User · Answer

I really liked this answer by superluminary and especially the way he wrapped is solution in a jQuery plugin  So thanks to superluminary for a very useful answer  In my case  though  I wanted a plugin that would allow me to define the success and error event handlers by means of options when the plugin is initialized   So here is what I came up with     function defaults     undefined        var getSubmitHandler   function onsubmit  success  error            return function event                if  typeof onsubmit      function                     onsubmit call this  event                             var form     this                 ajax                   type  form attr  method                    url  form attr  action                    data  form serialize                  done function                     if  typeof success      function                         success apply this  arguments                                    fail function                     if  typeof error      function                         error apply this  arguments                                                 event preventDefault                            fn extend              Usage             jQuery selector  ajaxForm                                            onsubmit function                                               success function                                                error  function                                                        ajaxForm   function options                options     extend     defaults  options               return   this  each function                       this  submit getSubmitHandler options  onsubmit    options  success    options  error                                               jQuery     This plugin allows me to very easily  ajaxify  html forms on the page and provide onsubmit  success and error event handlers for implementing feedback to the user of the status of the form submit  This allowed the plugin to be used as follows       form   ajaxForm         onsubmit  function event                 User submitted the form                success  function data  textStatus  jqXHR                 The form was successfully submitted                error  function jqXHR  textStatus  errorThrown                 The submit action failed                Note that the success and error event handlers receive the same arguments that you would receive from the corresponding events of the jQuery  ajax method

User · Answer

jQuery AJAX submit form  is nothing but submit a form using form ID when you click on a button  Please follow steps   Step 1 - Form tag must have an ID field   lt form method  post  class  form-horizontal  action  test user add  id  submitForm  gt         lt  form gt    Button which you are going to click   lt button gt Save lt  button gt    Step 2 - submit event is in jQuery which helps to submit a form  in below code we are preparing JSON request from HTML element name       submitForm   submit function e        e preventDefault        var frm       submitForm        var data             each this  function i  v           var input     v           data input attr  name      input val            delete data  undefined                  ajax           contentType  application json  charset utf-8           type frm attr  method            url frm attr  action            dataType  json           data JSON stringify data           success function data                alert data message                           for live demo click on below link  How to submit a Form using jQuery AJAX

[javascript] jQuery AJAX submit form

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to submit

Examples related to forms