How do I capture response of form submit

Question

I have the following code    lt script type  text javascript  gt          function SubmitForm                          form1 submit                       function ShowResponse                         lt  script gt         lt div gt       lt a href     onclick  SubmitForm     gt Click lt  a gt   lt  div gt    I want to capture the html response of form1 submit  How do I do this  Can I register any callback function to form1 submit method

User · Answer

An Ajax alternative is to set an invisible <iframe> as your form's target and read the contents of that <iframe> in its onload handler. But why bother when there's Ajax?

Note: I just wanted to mention this alternative since some of the answers claim that it's impossible to achieve this without Ajax.

User · Answer

You can accomplish this using jQuery and the ajax   method    x000D   x000D   lt script src    ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt  x000D   lt script language  javascript  type  text javascript  gt  x000D  function submitform     x000D          ajax   x000D          headers     x000D             Accept    application json   x000D             Content-Type    application json   x000D             x000D          type   POST   x000D          url     hello hello   x000D          dataType    json   x000D          data   JSON stringify   hello name    hello     x000D          error  function      x000D            alert  loading Ajax failure    x000D             x000D       onFailure  function      x000D            alert  Ajax Failure    x000D          x000D       statusCode    x000D            404  function     x000D            alert  missing info    x000D                 x000D          x000D          success   function  response    x000D            alert  The server says      JSON stringify response    x000D            x000D           x000D         done function  data     x000D              result   text data  hello     x000D            x000D     lt  script gt  x000D   x000D   x000D

User · Answer

You can do that using javascript and AJAX technology  Have a look at jquery and at this form plug in  You only need to include two js files to register a callback for the form submit

User · Answer

you can do that without ajax    write your  like below                  and then in  action php      then after frmLogin submit     read variable  submit return      submit return contains return value    good luck

User · Answer

There is no callback  It s like following a link   If you want to capture the server response  use AJAX or post it to an Iframe and grab what appears there after the iframe s onload   event

User · Answer

An Ajax alternative is to set an invisible <iframe> as your form's target and read the contents of that <iframe> in its onload handler. But why bother when there's Ajax?

Note: I just wanted to mention this alternative since some of the answers claim that it's impossible to achieve this without Ajax.

User · Answer

You can accomplish this using jQuery and the ajax   method    x000D   x000D   lt script src    ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt  x000D   lt script language  javascript  type  text javascript  gt  x000D  function submitform     x000D          ajax   x000D          headers     x000D             Accept    application json   x000D             Content-Type    application json   x000D             x000D          type   POST   x000D          url     hello hello   x000D          dataType    json   x000D          data   JSON stringify   hello name    hello     x000D          error  function      x000D            alert  loading Ajax failure    x000D             x000D       onFailure  function      x000D            alert  Ajax Failure    x000D          x000D       statusCode    x000D            404  function     x000D            alert  missing info    x000D                 x000D          x000D          success   function  response    x000D            alert  The server says      JSON stringify response    x000D            x000D           x000D         done function  data     x000D              result   text data  hello     x000D            x000D     lt  script gt  x000D   x000D   x000D

User · Answer

You need to be using AJAX  Submitting the form usually results in the browser loading a new page

User · Answer

I am doing it this way and its working       form   submit function          ajax         url      form   attr  action          type   POST         data       form   serialize          success  function            console log  form submitted                         return false

User · Answer

You won t be able to do this easily with plain javascript  When you post a form  the form inputs are sent to the server and your page is refreshed - the data is handled on the server side  That is  the submit   function doesn t actually return anything  it just sends the form data to the server   If you really wanted to get the response in Javascript  without the page refreshing   then you ll need to use AJAX  and when you start talking about using AJAX  you ll need to use a library  jQuery is by far the most popular  and my personal favourite  There s a great plugin for jQuery called Form which will do exactly what it sounds like you want   Here s how you d use jQuery and that plugin       myForm        ajaxForm           url    myscript php      or whatever         dataType    json           success   function  response                alert  The server says      response

User · Answer

I have Following code perfactly run using ajax with multi-part form data    function getUserDetail         var firstName   document getElementById  firstName   value      var lastName   document getElementById  lastName   value      var username   document getElementById  username   value      var email   document getElementById  email   value      var phoneNumber   document getElementById  phoneNumber   value      var gender      userForm input type  radio   checked   val          var gender2   document getElementById  gender2   value        alert  fn  firstName lastName username email       var roleIndex   document getElementById  role        var role   roleIndex options roleIndex selectedIndex  value      var jobTitleIndex   document getElementById  jobTitle        var jobTitle   jobTitleIndex options jobTitleIndex selectedIndex  value      var shiftIdIndex   document getElementById  shiftId        var shiftId   shiftIdIndex options shiftIdIndex selectedIndex  value        var addressLine1   document getElementById  addressLine1   value      var addressLine2   document getElementById  addressLine2   value      var streetRoad   document getElementById  streetRoad   value       var countryIndex   document getElementById  country        var country   countryIndex options countryIndex selectedIndex  value       var stateIndex   document getElementById  state        var state   stateIndex options stateIndex selectedIndex  value       var cityIndex   document getElementById  city        var city   cityIndex options cityIndex selectedIndex  value         var pincode   document getElementById  pincode   value       var branchIndex   document getElementById  branch        var branch   branchIndex options branchIndex selectedIndex  value       var language   document getElementById  language   value      var profilePicture   document getElementById  profilePicture   value        alert profilePicture       var addDocument   document getElementById  addDocument   value        var shiftIdIndex   document getElementById  shiftId        var shiftId   shiftIdIndex options shiftIdIndex selectedIndex  value        var data   new FormData        data append  firstName   firstName       data append  lastName   lastName       data append  username   username       data append  email   email       data append  phoneNumber   phoneNumber       data append  role   role       data append  jobTitle   jobTitle       data append  gender   gender       data append  shiftId   shiftId       data append  lastName   lastName       data append  addressLine1   addressLine1       data append  addressLine2   addressLine2       data append  streetRoad   streetRoad       data append  country   country       data append  state   state       data append  city   city       data append  pincode   pincode       data append  branch   branch       data append  language   language       data append  profilePicture       profilePicture   0  files 0         for  var i   0  i  lt      document   0  files length  i                  data append  document         document   0  files i                       ajax             url      pageContext request contextPath  user save-user           type   POST           Accept   application json           async  true          contentType false          processData  false          data  data          cache  false           success   function data                      reset                    alert alert-success alert-div   text  New User Created Successfully                        error  function data  textStatus  xhr                  alert alert-danger alert-div   text  new User Not Create

User · Answer

First of all we will need serializeObject       fn serializeObject   function          var o           var a   this serializeArray          each a  function              if  o this name                 if   o this name  push                    o this name     o this name                              o this name  push this value                   else               o this name    this value                              return o       then you make a basic post and get response    post   Education StudentSave       frmNewStudent   serializeObject    function  data    if data     do true    else     do false

User · Answer

I am not sure that you understand what submit   does     When you do form1 submit    the form information is sent to the webserver   The WebServer will do whatever its supposed to do and return a brand new webpage to the client usually the same page with something changed    So  there is no way you can  catch  the return of a form submit   action

User · Answer

you can do that without ajax    write your  like below                  and then in  action php      then after frmLogin submit     read variable  submit return      submit return contains return value    good luck

User · Answer

This is my code for this problem    lt form id  formoid  action    demoText php  title    method  post  gt       lt div gt           lt label class  title  gt First Name lt  label gt           lt input type  text  id  name  name  name   gt       lt  div gt       lt div gt           lt input type  submit  id  submitButton   name  submitButton  value  Submit  gt       lt  div gt   lt  form gt    lt script type  text javascript  gt     attach a submit handler to the form        formoid   submit function event          stop form from submitting normally      event preventDefault          get the action attribute from the  lt form action    gt  element      var  form      this    url    form attr   action           Send the data using post with element id name and name2     var posting     post  url    name      name   val             Alerts the results      posting done function  data         alert  success               lt  script gt

User · Answer

ajax           url    users login         give your url here         type   POST           dataType   json           data  logindata          success  function   data                alert data      do your stuff                    error  function   data                alert data      do your stuff

User · Answer

An Ajax alternative is to set an invisible <iframe> as your form's target and read the contents of that <iframe> in its onload handler. But why bother when there's Ajax?

Note: I just wanted to mention this alternative since some of the answers claim that it's impossible to achieve this without Ajax.

User · Answer

I am not sure that you understand what submit   does     When you do form1 submit    the form information is sent to the webserver   The WebServer will do whatever its supposed to do and return a brand new webpage to the client usually the same page with something changed    So  there is no way you can  catch  the return of a form submit   action

User · Answer

You can do that using javascript and AJAX technology  Have a look at jquery and at this form plug in  You only need to include two js files to register a callback for the form submit

User · Answer

You can event preventDefault   in the click handler for your submit button to ensure that the HTML form default submit event doesn t fire  which is what leads to the page refreshing     Another alternative would be to use hackier form markup  It s the use of  lt form gt  and type  submit  that is getting in the way of the desired behavior here  as these ultimately lead to click events refreshing the page   If you want to still use  lt form gt   and you don t want to write custom click handlers  you can use jQuery s ajax method  which abstracts the entire problem away for you by exposing promise methods for success  error  etc      To recap  you can solve your problem by either         preventing default behavior in the handling function by using event preventDefault         using elements that don t have default behavior  e g   lt form gt          using jQuery ajax      i just noticed this question is from 2008  not sure why it showed up in my feed  at any rate  hopefully this is a clear answer

User · Answer

Future internet searchers   For new browsers  as of 2018  Chrome  Firefox  Safari  Opera  Edge  and most mobile browsers  but not IE   fetch is a standard API that simplifies asynchronous network calls  for which we used to need XMLHttpRequest or jQuery s   ajax    Here is a traditional form    lt form id  myFormId  action   api process form  method  post  gt       lt  -- form fields here -- gt       lt button type  submit  gt SubmitAction lt  button gt   lt  form gt    If a form like the above is handed to you  or you created it because it is semantic html   then you can wrap the fetch code in an event listener as below   document forms  myFormId   addEventListener  submit    event    gt        event preventDefault           TODO do something here to show user that form is being submitted     fetch event target action            method   POST           body  new URLSearchParams new FormData event target      event target is the form        then  resp    gt            return resp json       or resp text   or whatever the server sends        then  body    gt               TODO handle body        catch  error    gt               TODO handle error                Or  if like the original poster you want to call it manually without a submit event  just put the fetch code there and pass a reference to the form element instead of using event target    Docs   Fetch  https   developer mozilla org en-US docs Web API Fetch API  Other  https   developer mozilla org en-US docs Learn HTML Forms Sending forms through JavaScript That page in 2018 does not mention fetch  yet   But it mentions that the target  myIFrame  trick is deprecated  And it also has an example of form addEventListener for the  submit  event

User · Answer

document  ready function            form   submit function event            event preventDefault              ajax               url    quot  lt wiki action path   your struts action   gt  quot    path of url where u want to submit form             type    quot POST quot               data     this  serialize                success   function data                    var treeMenuFrame   parent frames  wikiMenu                    if  treeMenuFrame                        treeMenuFrame location href   treeMenuFrame location href                                    var contentFrame   parent frames  wikiContent                    contentFrame document open                    contentFrame document write data                   contentFrame document close                                           First of all use   document  ready function    inside this use   formid   submit function event   and then prevent default action after that call ajax form submission   ajax              It will take  parameter u can choose according your requirement then call a function success function data           do whatever you want my example to put response html on div

User · Answer

I am not sure that you understand what submit   does     When you do form1 submit    the form information is sent to the webserver   The WebServer will do whatever its supposed to do and return a brand new webpage to the client usually the same page with something changed    So  there is no way you can  catch  the return of a form submit   action

User · Answer

I am not sure that you understand what submit   does     When you do form1 submit    the form information is sent to the webserver   The WebServer will do whatever its supposed to do and return a brand new webpage to the client usually the same page with something changed    So  there is no way you can  catch  the return of a form submit   action

User · Answer

Building on the answer by  rajesh kw  https   stackoverflow com a 22567796 4946681   I handle form post errors and success           formName   on  submit   function event            event preventDefault       or return false  your choice           ajax               url    this  attr  action                type   post               data    this  serialize                success  function data  textStatus  jqXHR                       if success  HTML response is expected  so replace current                 if textStatus      success                            https   stackoverflow com a 1236378 4946681                     var newDoc   document open  text html    replace                        newDoc write data                       newDoc close                                               fail function jqXHR  textStatus  errorThrown                if jqXHR status    0    jqXHR    302                    alert  Your session has ended due to inactivity after 10 minutes  nPlease refresh this page  or close this window and log back in to system                   else                   alert  Unknown error returned while saving     typeof errorThrown     string   amp  amp  errorThrown trim   length  gt  0      n    errorThrown                                             I make use of this so that my logic is reusable  I expect HTML to be returned on a success so I render it and replace the current page  and in my case I expect a redirect to the login page if the session is timed out  so I intercept that redirect in order to preserve the state of the page   Now users can log in via another tab and try their submit again

User · Answer

You won t be able to do this easily with plain javascript  When you post a form  the form inputs are sent to the server and your page is refreshed - the data is handled on the server side  That is  the submit   function doesn t actually return anything  it just sends the form data to the server   If you really wanted to get the response in Javascript  without the page refreshing   then you ll need to use AJAX  and when you start talking about using AJAX  you ll need to use a library  jQuery is by far the most popular  and my personal favourite  There s a great plugin for jQuery called Form which will do exactly what it sounds like you want   Here s how you d use jQuery and that plugin       myForm        ajaxForm           url    myscript php      or whatever         dataType    json           success   function  response                alert  The server says      response

User · Answer

You can do that using javascript and AJAX technology  Have a look at jquery and at this form plug in  You only need to include two js files to register a callback for the form submit

User · Answer

The non-jQuery vanilla Javascript way  extracted from 12me21 s comment   var xhr   new XMLHttpRequest    xhr open  POST     your url name php     xhr onload   function event        alert  Success  server responded with      event target response      raw response        or onerror  onabort var formData   new FormData document getElementById  myForm      xhr send formData     For POST s the default content type is  application x-www-form-urlencoded  which matches what we re sending in the above snippet   If you want to send  other stuff  or tweak it somehow see here for some nitty gritty details

User · Answer

This is my code for this problem    lt form id  formoid  action    demoText php  title    method  post  gt       lt div gt           lt label class  title  gt First Name lt  label gt           lt input type  text  id  name  name  name   gt       lt  div gt       lt div gt           lt input type  submit  id  submitButton   name  submitButton  value  Submit  gt       lt  div gt   lt  form gt    lt script type  text javascript  gt     attach a submit handler to the form        formoid   submit function event          stop form from submitting normally      event preventDefault          get the action attribute from the  lt form action    gt  element      var  form      this    url    form attr   action           Send the data using post with element id name and name2     var posting     post  url    name      name   val             Alerts the results      posting done function  data         alert  success               lt  script gt

User · Answer

There is no callback  It s like following a link   If you want to capture the server response  use AJAX or post it to an Iframe and grab what appears there after the iframe s onload   event

User · Answer

In case you want to capture the output of an AJAX request using Chrome you can follow these simple steps    Open up the Programmers toolbox Go to the console and right anywhere inside it In the menu that appears  click  Enable XMXHTTPRequest Logging  After doing that everytime you make an AJAX request a message starting with  XHR finished loading http           will appear in your console  Clicking on the link that appears  will bring the  Resources tab  where your can see the headers and the content of the response

User · Answer

There is no callback  It s like following a link   If you want to capture the server response  use AJAX or post it to an Iframe and grab what appears there after the iframe s onload   event

User · Answer

You won t be able to do this easily with plain javascript  When you post a form  the form inputs are sent to the server and your page is refreshed - the data is handled on the server side  That is  the submit   function doesn t actually return anything  it just sends the form data to the server   If you really wanted to get the response in Javascript  without the page refreshing   then you ll need to use AJAX  and when you start talking about using AJAX  you ll need to use a library  jQuery is by far the most popular  and my personal favourite  There s a great plugin for jQuery called Form which will do exactly what it sounds like you want   Here s how you d use jQuery and that plugin       myForm        ajaxForm           url    myscript php      or whatever         dataType    json           success   function  response                alert  The server says      response

User · Answer

You need to be using AJAX  Submitting the form usually results in the browser loading a new page

User · Answer

An Ajax alternative is to set an invisible <iframe> as your form's target and read the contents of that <iframe> in its onload handler. But why bother when there's Ajax?

Note: I just wanted to mention this alternative since some of the answers claim that it's impossible to achieve this without Ajax.

User · Answer

You can use jQuery post   and return nicely structured JSON answers from server  It also allows you to validate sanitize your data directly on server  which is a good practice because it s more secure  and even easier  than doing this on client   For example if you need to post html form to server  to saveprofilechanges php  with user data for simple registration   I  Client parts   I a  HTML part    lt form id  user profile form  gt     lt label for  first name  gt  lt input type  text  name  first name  id  first name  required   gt First name lt  label gt     lt label for  family name  gt  lt input type  text  name  family name  id  family name  required   gt Family name lt  label gt     lt label for  email  gt  lt input type  email  name  email  id  email  required   gt Email lt  label gt      lt input type  submit  value  Save changes  id  submit    gt   lt  form gt    I b  Script part     function              user profile form   submit function event          event preventDefault          var postData             first name      first name   val            family name      family name   val            email      email   val                    post   saveprofilechanges php   postData          function data              var json   jQuery parseJSON data             if  json ExceptionMessage    undefined                alert json ExceptionMessage      the exception from the server                     json Field  focus       focus the specific field to fill in                       if  json SuccessMessage    undefined                alert json SuccessMessage      the success message from server                                      II  Server part  saveprofilechanges php     data     POST  if   empty  data   amp  amp  is array  data            Some data validation      if  empty  data  first name        preg match     a-zA-Z        data  first name              echo json encode array            ExceptionMessage    gt   First name missing or incorrect  only letters and spaces allowed               Field    gt   first name     Form field to focus in client form                   return FALSE            if  empty  data  family name        preg match     a-zA-Z         data  family name              echo json encode array            ExceptionMessage    gt   Family name missing or incorrect  only letters and spaces allowed               Field    gt   family name     Form field to focus in client form                   return FALSE            if  empty  data  email        filter var  data  email    FILTER VALIDATE EMAIL            echo json encode array            ExceptionMessage    gt   Email missing or incorrectly formatted  Please enter it again              Field    gt   email     Form field to focus in client form                   return FALSE               more actions          more actions       try             Some save to database or other action            this- gt User- gt update  data  array  username      gt   username           echo json encode array            SuccessMessage    gt   Data saved                     return TRUE        catch  Exception  e           echo json encode array            ExceptionMessage    gt   e- gt getMessage                     return FALSE

User · Answer

You can do that using javascript and AJAX technology  Have a look at jquery and at this form plug in  You only need to include two js files to register a callback for the form submit

User · Answer

You need to be using AJAX  Submitting the form usually results in the browser loading a new page

User · Answer

You need to be using AJAX  Submitting the form usually results in the browser loading a new page

User · Answer

Future internet searchers   For new browsers  as of 2018  Chrome  Firefox  Safari  Opera  Edge  and most mobile browsers  but not IE   fetch is a standard API that simplifies asynchronous network calls  for which we used to need XMLHttpRequest or jQuery s   ajax    Here is a traditional form    lt form id  myFormId  action   api process form  method  post  gt       lt  -- form fields here -- gt       lt button type  submit  gt SubmitAction lt  button gt   lt  form gt    If a form like the above is handed to you  or you created it because it is semantic html   then you can wrap the fetch code in an event listener as below   document forms  myFormId   addEventListener  submit    event    gt        event preventDefault           TODO do something here to show user that form is being submitted     fetch event target action            method   POST           body  new URLSearchParams new FormData event target      event target is the form        then  resp    gt            return resp json       or resp text   or whatever the server sends        then  body    gt               TODO handle body        catch  error    gt               TODO handle error                Or  if like the original poster you want to call it manually without a submit event  just put the fetch code there and pass a reference to the form element instead of using event target    Docs   Fetch  https   developer mozilla org en-US docs Web API Fetch API  Other  https   developer mozilla org en-US docs Learn HTML Forms Sending forms through JavaScript That page in 2018 does not mention fetch  yet   But it mentions that the target  myIFrame  trick is deprecated  And it also has an example of form addEventListener for the  submit  event

User · Answer

First of all we will need serializeObject       fn serializeObject   function          var o           var a   this serializeArray          each a  function              if  o this name                 if   o this name  push                    o this name     o this name                              o this name  push this value                   else               o this name    this value                              return o       then you make a basic post and get response    post   Education StudentSave       frmNewStudent   serializeObject    function  data    if data     do true    else     do false

User · Answer

I am doing it this way and its working       form   submit function          ajax         url      form   attr  action          type   POST         data       form   serialize          success  function            console log  form submitted                         return false

User · Answer

I have Following code perfactly run using ajax with multi-part form data    function getUserDetail         var firstName   document getElementById  firstName   value      var lastName   document getElementById  lastName   value      var username   document getElementById  username   value      var email   document getElementById  email   value      var phoneNumber   document getElementById  phoneNumber   value      var gender      userForm input type  radio   checked   val          var gender2   document getElementById  gender2   value        alert  fn  firstName lastName username email       var roleIndex   document getElementById  role        var role   roleIndex options roleIndex selectedIndex  value      var jobTitleIndex   document getElementById  jobTitle        var jobTitle   jobTitleIndex options jobTitleIndex selectedIndex  value      var shiftIdIndex   document getElementById  shiftId        var shiftId   shiftIdIndex options shiftIdIndex selectedIndex  value        var addressLine1   document getElementById  addressLine1   value      var addressLine2   document getElementById  addressLine2   value      var streetRoad   document getElementById  streetRoad   value       var countryIndex   document getElementById  country        var country   countryIndex options countryIndex selectedIndex  value       var stateIndex   document getElementById  state        var state   stateIndex options stateIndex selectedIndex  value       var cityIndex   document getElementById  city        var city   cityIndex options cityIndex selectedIndex  value         var pincode   document getElementById  pincode   value       var branchIndex   document getElementById  branch        var branch   branchIndex options branchIndex selectedIndex  value       var language   document getElementById  language   value      var profilePicture   document getElementById  profilePicture   value        alert profilePicture       var addDocument   document getElementById  addDocument   value        var shiftIdIndex   document getElementById  shiftId        var shiftId   shiftIdIndex options shiftIdIndex selectedIndex  value        var data   new FormData        data append  firstName   firstName       data append  lastName   lastName       data append  username   username       data append  email   email       data append  phoneNumber   phoneNumber       data append  role   role       data append  jobTitle   jobTitle       data append  gender   gender       data append  shiftId   shiftId       data append  lastName   lastName       data append  addressLine1   addressLine1       data append  addressLine2   addressLine2       data append  streetRoad   streetRoad       data append  country   country       data append  state   state       data append  city   city       data append  pincode   pincode       data append  branch   branch       data append  language   language       data append  profilePicture       profilePicture   0  files 0         for  var i   0  i  lt      document   0  files length  i                  data append  document         document   0  files i                       ajax             url      pageContext request contextPath  user save-user           type   POST           Accept   application json           async  true          contentType false          processData  false          data  data          cache  false           success   function data                      reset                    alert alert-success alert-div   text  New User Created Successfully                        error  function data  textStatus  xhr                  alert alert-danger alert-div   text  new User Not Create

User · Answer

The non-jQuery vanilla Javascript way  extracted from 12me21 s comment   var xhr   new XMLHttpRequest    xhr open  POST     your url name php     xhr onload   function event        alert  Success  server responded with      event target response      raw response        or onerror  onabort var formData   new FormData document getElementById  myForm      xhr send formData     For POST s the default content type is  application x-www-form-urlencoded  which matches what we re sending in the above snippet   If you want to send  other stuff  or tweak it somehow see here for some nitty gritty details

User · Answer

You can use jQuery post   and return nicely structured JSON answers from server  It also allows you to validate sanitize your data directly on server  which is a good practice because it s more secure  and even easier  than doing this on client   For example if you need to post html form to server  to saveprofilechanges php  with user data for simple registration   I  Client parts   I a  HTML part    lt form id  user profile form  gt     lt label for  first name  gt  lt input type  text  name  first name  id  first name  required   gt First name lt  label gt     lt label for  family name  gt  lt input type  text  name  family name  id  family name  required   gt Family name lt  label gt     lt label for  email  gt  lt input type  email  name  email  id  email  required   gt Email lt  label gt      lt input type  submit  value  Save changes  id  submit    gt   lt  form gt    I b  Script part     function              user profile form   submit function event          event preventDefault          var postData             first name      first name   val            family name      family name   val            email      email   val                    post   saveprofilechanges php   postData          function data              var json   jQuery parseJSON data             if  json ExceptionMessage    undefined                alert json ExceptionMessage      the exception from the server                     json Field  focus       focus the specific field to fill in                       if  json SuccessMessage    undefined                alert json SuccessMessage      the success message from server                                      II  Server part  saveprofilechanges php     data     POST  if   empty  data   amp  amp  is array  data            Some data validation      if  empty  data  first name        preg match     a-zA-Z        data  first name              echo json encode array            ExceptionMessage    gt   First name missing or incorrect  only letters and spaces allowed               Field    gt   first name     Form field to focus in client form                   return FALSE            if  empty  data  family name        preg match     a-zA-Z         data  family name              echo json encode array            ExceptionMessage    gt   Family name missing or incorrect  only letters and spaces allowed               Field    gt   family name     Form field to focus in client form                   return FALSE            if  empty  data  email        filter var  data  email    FILTER VALIDATE EMAIL            echo json encode array            ExceptionMessage    gt   Email missing or incorrectly formatted  Please enter it again              Field    gt   email     Form field to focus in client form                   return FALSE               more actions          more actions       try             Some save to database or other action            this- gt User- gt update  data  array  username      gt   username           echo json encode array            SuccessMessage    gt   Data saved                     return TRUE        catch  Exception  e           echo json encode array            ExceptionMessage    gt   e- gt getMessage                     return FALSE

User · Answer

You can event preventDefault   in the click handler for your submit button to ensure that the HTML form default submit event doesn t fire  which is what leads to the page refreshing     Another alternative would be to use hackier form markup  It s the use of  lt form gt  and type  submit  that is getting in the way of the desired behavior here  as these ultimately lead to click events refreshing the page   If you want to still use  lt form gt   and you don t want to write custom click handlers  you can use jQuery s ajax method  which abstracts the entire problem away for you by exposing promise methods for success  error  etc      To recap  you can solve your problem by either         preventing default behavior in the handling function by using event preventDefault         using elements that don t have default behavior  e g   lt form gt          using jQuery ajax      i just noticed this question is from 2008  not sure why it showed up in my feed  at any rate  hopefully this is a clear answer

User · Answer

In case you want to capture the output of an AJAX request using Chrome you can follow these simple steps    Open up the Programmers toolbox Go to the console and right anywhere inside it In the menu that appears  click  Enable XMXHTTPRequest Logging  After doing that everytime you make an AJAX request a message starting with  XHR finished loading http           will appear in your console  Clicking on the link that appears  will bring the  Resources tab  where your can see the headers and the content of the response

User · Answer

ajax           url    users login         give your url here         type   POST           dataType   json           data  logindata          success  function   data                alert data      do your stuff                    error  function   data                alert data      do your stuff

User · Answer

Building on the answer by  rajesh kw  https   stackoverflow com a 22567796 4946681   I handle form post errors and success           formName   on  submit   function event            event preventDefault       or return false  your choice           ajax               url    this  attr  action                type   post               data    this  serialize                success  function data  textStatus  jqXHR                       if success  HTML response is expected  so replace current                 if textStatus      success                            https   stackoverflow com a 1236378 4946681                     var newDoc   document open  text html    replace                        newDoc write data                       newDoc close                                               fail function jqXHR  textStatus  errorThrown                if jqXHR status    0    jqXHR    302                    alert  Your session has ended due to inactivity after 10 minutes  nPlease refresh this page  or close this window and log back in to system                   else                   alert  Unknown error returned while saving     typeof errorThrown     string   amp  amp  errorThrown trim   length  gt  0      n    errorThrown                                             I make use of this so that my logic is reusable  I expect HTML to be returned on a success so I render it and replace the current page  and in my case I expect a redirect to the login page if the session is timed out  so I intercept that redirect in order to preserve the state of the page   Now users can log in via another tab and try their submit again

User · Answer

There is no callback  It s like following a link   If you want to capture the server response  use AJAX or post it to an Iframe and grab what appears there after the iframe s onload   event

User · Answer

document  ready function            form   submit function event            event preventDefault              ajax               url    quot  lt wiki action path   your struts action   gt  quot    path of url where u want to submit form             type    quot POST quot               data     this  serialize                success   function data                    var treeMenuFrame   parent frames  wikiMenu                    if  treeMenuFrame                        treeMenuFrame location href   treeMenuFrame location href                                    var contentFrame   parent frames  wikiContent                    contentFrame document open                    contentFrame document write data                   contentFrame document close                                           First of all use   document  ready function    inside this use   formid   submit function event   and then prevent default action after that call ajax form submission   ajax              It will take  parameter u can choose according your requirement then call a function success function data           do whatever you want my example to put response html on div

User · Answer

You won t be able to do this easily with plain javascript  When you post a form  the form inputs are sent to the server and your page is refreshed - the data is handled on the server side  That is  the submit   function doesn t actually return anything  it just sends the form data to the server   If you really wanted to get the response in Javascript  without the page refreshing   then you ll need to use AJAX  and when you start talking about using AJAX  you ll need to use a library  jQuery is by far the most popular  and my personal favourite  There s a great plugin for jQuery called Form which will do exactly what it sounds like you want   Here s how you d use jQuery and that plugin       myForm        ajaxForm           url    myscript php      or whatever         dataType    json           success   function  response                alert  The server says      response

[javascript] How do I capture response of form.submit

Examples related to javascript

Examples related to forms

Examples related to dom-events

Examples related to form-submit