How to submit an HTML form without redirection

Question

If I have a form like this   lt form action  quot  Car Edit 17 quot  id  quot myForm quot  method  quot post quot  name  quot myForm quot  gt       lt  form gt   how can I submit it without redirecting to another view by JavaScript jQuery  I read plenty of answers from Stack  Overflow  but all of them redirect me to the view returned by the POST function

User · Answer

Place a hidden iFrame at the bottom of your page and target it in your form   lt iframe name  quot hiddenFrame quot  width  quot 0 quot  height  quot 0 quot  border  quot 0 quot  style  quot display  none  quot  gt  lt  iframe gt    lt form action  quot  Car Edit 17 quot  id  quot myForm quot  method  quot post quot  name  quot myForm quot  target  quot hiddenFrame quot  gt       lt  form gt   Quick and easy  Keep in mind that while the target attribute is still widely supported  and supported in HTML5   it was deprecated in HTML 4 01  So you really should be using Ajax to future-proof

User · Answer

Okay  I m not going to tell you a magical way of doing it because there isn t  If you have an action attribute set for a form element  it will redirect   If you don t want it to redirect simply don t set any action and set onsubmit  someFunction      In your someFunction   you do whatever you want   with AJAX or not  and in the ending  you add return false  to tell the browser not to submit the form

User · Answer

If you control the back end  then use something like response redirect instead of response send  You can create custom HTML pages for this or just redirect to something you already have  In Express js  const handler    req  res    gt      const   body     req   handleResponse body     then data   gt        console log data      res redirect  https   yoursite com ok html           catch err   gt        console log err      res redirect  https   yoursite com err html              app post   endpoint   handler

User · Answer

Using this snippet  you can submit the form and avoid redirection  Instead you can pass the success function as argument and do whatever you want  function submitForm form  successFn       if  form getAttribute  quot id quot            form getAttribute  quot id quot      null           var id   form getAttribute  quot id quot          else           console log  quot Form id attribute was not set  the form cannot be serialized quot                 ajax           type  form method          url  form action          data    id  serializeArray            dataType   quot json quot           success  successFn            error  errorFn data             And then just do  var formElement   document getElementById  quot yourForm quot    submitForm formElement  function         console log  quot Form submitted quot

User · Answer

See jQuery s post function   I would create a button  and set an onClickListener      button   on  click   function         and send the data in the function   Also  see the preventDefault function  of jQuery

User · Answer

Since all current answers use jQuery or tricks with iframe  figured there is no harm to add method with just plain JavaScript  function formSubmit event      var url    quot  post url here quot     var request   new XMLHttpRequest      request open  POST   url  true     request onload   function        request successful      we can use server response to our request now     console log request responseText           request onerror   function            request failed         request send new FormData event target       create FormData from form that triggered event   event preventDefault          and you can attach form submit event like this for example function attachFormSubmitEvent formId     document getElementById formId  addEventListener  quot submit quot   formSubmit

User · Answer

The desired effect can also be achieved by moving the submit button outside of the form as described here  Prevent page reload and redirect on form submit ajax jquery Like this   lt form id  quot getPatientsForm quot  gt      Enter URL for patient server      lt br  gt  lt br  gt       lt input name  quot forwardToUrl quot  type  quot hidden quot  value  quot  WEB-INF jsp patient patientList jsp quot    gt       lt input name  quot patientRootUrl quot  size  quot 100 quot  gt  lt  input gt       lt br  gt  lt br  gt   lt  form gt    lt button onclick  quot javascript postGetPatientsForm    quot  gt Connect to Server lt  button gt

User · Answer

One-liner solution as of 2020  if your data is not meant to be sent as multipart form-data or application x-www-form-urlencoded   lt form onsubmit  return false  gt       lt  --     -- gt              lt  form gt

User · Answer

In order to achieve what you want  you need to use jQuery Ajax as below      myForm   submit function e       e preventDefault          ajax           url    Car Edit 17            type   post           data     myForm   serialize            success function                   Whatever you want to do after the form is successfully submitted                        Also try this one  function SubForm e       e preventDefault        var url     this  closest  form   attr  action        data     this  closest  form   serialize          ajax           url  url          type   post           data  data          success  function                  Whatever you want to do after the form is successfully submitted                    Final solution This worked flawlessly  I call this function from Html ActionLink      function SubForm           ajax           url    Person Edit  Model Id            type   post           data      myForm   serialize            success  function                alert  quot worked quot

User · Answer

You need Ajax to make it happen  Something like this    document  ready function           quot  myform quot   on  submit   function            var name      quot  name quot   val            var email      quot  email quot   val            var password      quot  password quot   val            var contact      quot  contact quot   val             var dataString    name1     name     amp email1     email     amp password1     password     amp contact1     contact          if name        email        password        contact                            alert  quot Please fill in all fields quot                      else                          Ajax code to submit form                ajax                   type   quot POST quot                   url   quot ajaxsubmit php quot                   data  dataString                  cache  false                  success  function result                       alert result                                                      return false

User · Answer

You can achieve that by redirecting the form s action to an invisible  lt iframe gt   It doesn t require any JavaScript or any other type of scripts   lt iframe name  quot dummyframe quot  id  quot dummyframe quot  style  quot display  none  quot  gt  lt  iframe gt    lt form action  quot submitscript php quot  target  quot dummyframe quot  gt       lt  -- Form body here -- gt   lt  form gt

[javascript] How to submit an HTML form without redirection

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to forms