Submit form and stay on same page

Question

I have a form that looks like this   lt form action  receiver pl  method  post  gt     lt input name  signed  type  checkbox  gt     lt input value  Save  type  submit  gt   lt  form gt    and I would like to stay on the same page  when Submit is clicked  but still have receiver pl executed   How should that be done

User · Answer

99  of the time I would use XMLHttpRequest or fetch for something like this  However  there s an alternative solution which doesn t require javascript     You could include a hidden iframe on your page and set the target attribute of your form to point to that iframe    lt style gt     hide   position absolute  top -1px  left -1px  width 1px  height 1px     lt  style gt    lt iframe name  hiddenFrame  class  hide  gt  lt  iframe gt    lt form action  receiver pl  method  post  target  hiddenFrame  gt     lt input name  signed  type  checkbox  gt     lt input value  Save  type  submit  gt   lt  form gt    There are very few scenarios where I would choose this route  Generally handling it with javascript is better because  with javascript you can      gracefully handle errors  e g  retry  provide UI indicators  e g  loading  processing  success  failure  run logic before the request is sent  or run logic after the response is received

User · Answer

When you hit on the submit button  the page is sent to the server   If you want to send it async  you can do it with ajax

User · Answer

The HTTP CGI way to do this would be for your program to return an HTTP status code of 204  No Content

User · Answer

Use XMLHttpRequest  var xhr   new XMLHttpRequest    xhr open  POST     server   true      Send the proper header information along with the request xhr setRequestHeader  Content-Type    application x-www-form-urlencoded     xhr onreadystatechange   function        Call a function when the state changes      if  this readyState     XMLHttpRequest DONE  amp  amp  this status     200               Request finished  Do processing here          xhr send  foo bar amp lorem ipsum       xhr send new Int8Array         xhr send document

User · Answer

The easiest answer  jQuery  Do something like this     document  ready function       var  form      form        form submit function            post   this  attr  action      this  serialize    function response                  do something here on success          json          return false               If you want to add content dynamically and still need it to work  and also with more than one form  you can do this         form   live  submit   function            post   this  attr  action      this  serialize    function response                  do something here on success          json          return false

[javascript] Submit form and stay on same page?

Examples related to javascript

Examples related to html

Examples related to perl