Prevent redirect after form is submitted

Question

I have an HTML form that submits an email with PHP  and when it submits  it redirects to that PHP page  Is there a way to prevent this redirect from happening  I built an animation with jQuery that I want to occur instead of redirecting  I tried return false   but it wouldn t work  Here s my function     function             submit   click function                 registerform   submit            return false                 Here s the opening form tag    lt form id  registerform  action  submit php  method  post  gt    And the submit button    lt input type  submit  value  SUBMIT  class  submit    gt

User · Answer

Using Ajax

Using the jQuery Ajax request method you can post the email data to a script (submit.php). Using the success callback option to animate elements after the script is executed.

note - I would suggest utilizing the ajax Response Object to make sure the script executed successfully.

$(function() {
    $('.submit').click(function() {
        $.ajax({
            type: 'POST',
            url: 'submit.php',
            data: 'password=p4ssw0rt',
            error: function()
            {
               alert("Request Failed");
            },
            success: function(response)
            {  
               //EXECUTE ANIMATION HERE
            } // this was missing
        });
        return false;
    }); 
})

User · Answer

You can use as below  e preventDefault      If this method is called  the default action of the event will not be triggered   Also if I may suggest read this   prop   vs  attr    I hope it will help you   code example      a   click function event       event preventDefault          do what you want

User · Answer

Since it is bypassing CORS and CSP  this is to keep in the toolbox  Here is a variation   This will POST a base64 encoded object at localhost 8080  and will clean up the DOM after usage    x000D   x000D  const theOBJECT    message   Hello world    target   local   x000D   x000D  document body innerHTML      lt iframe id  postframe  name  hiddenFrame  width  0  height  0  border  0  style  display  none   gt  lt  iframe gt  lt form id  dynForm  target  hiddenFrame  action  http   localhost 8080   method  post  gt  lt input type  hidden  name  somedata  value    btoa JSON stringify theOBJECT      gt  lt  form gt    x000D  document getElementById  dynForm   submit    x000D  dynForm outerHTML      x000D  postframe outerHTML      x000D   x000D   x000D    From the network debugger tab  we can observe a successful POST to a http    unencrypted server from a tls https page

User · Answer

The simple answer is to shoot your call off to an external scrip via AJAX request   Then handle the response how you like

User · Answer

Probably you will have to do just an Ajax request to your page  And doing return false there is doing not what you think it is doing

User · Answer

You can simply make your action result as NoContentResult  on controller  public NoContentResult UploadFile  FromForm  VwModel model               return new NoContentResult

User · Answer

You should post it with ajax  this will stop it from changing the page  and you will still get the information back     function            form   submit function               ajax               type   POST               url   submit php               data    username    this  name value                       password    this  password value                       return false                See Post documentation for JQuery

User · Answer

I found this page 10 years     after the original post  and needed the answer as vanilla js instead of AJAX  I figured it out with the help of  gargAman s answer   Use an appropriate selector to assign your button to a variable  e g   document getElementById  myButton    then  myButton addEventListener  click   function e        e preventDefault           do cool stuff       I should note that my html looks like this  specifically  I am not using type  Submit  in my button and action    in my form      lt form method  POST  action    id  myForm  gt       lt  -- form fields -- gt       lt button id  myButton  class  btn-submit  gt Submit lt  button gt     lt  form gt

User · Answer

registerform   submit function e       e preventDefault         ajax           type   POST           url   submit php           data    this  serialize            beforeSend    do something         complete    do something         success    do something for example if the request response is success play your animation

User · Answer

If you can run javascript  which seems like you can  create a new iframe  and post to that iframe instead  You can do  lt form target  iframe-id      gt   That way all the redirects happen in the iframe and you still have control of the page    The other solution is to also do a post via ajax  But that s a little more tricky if the page needs to error check or something    Here is an example       lt iframe id  test    gt    appendTo document body      form   attr  target    test

User · Answer

You must put the return inside submit   call         submit   click function              registerform   submit function           sendContactForm         return false                Here you can do anything after submit

User · Answer

The design of HTTP means that making a POST with data will return a page  The original designers probably intended for that to be a  result  page of your POST   It is normal for a PHP application to POST back to the same page as it can not only process the POST request  but it can generate an updated page based on the original GET but with the new information from the POST  However  there s nothing stopping your server code from providing completely different output  Alternatively  you could POST to an entirely different page    If you don t want the output  one method that I ve seen before AJAX took off was for the server to return a HTTP response code of  I think  250  This is called  No Content  and this should make the browser ignore the data   Of course  the third method is to make an AJAX call with your submitted data  instead

User · Answer

Instead of return false  you could try event preventDefault    like this     function         registerform   submit function event        event preventDefault          this  submit

User · Answer

Just like Bruce Armstrong suggested in his answer  However I d use FormData     function            form   submit function             var formData   new FormData   this  0              ajax               type   POST               url   submit php               data  formData              processData  false              contentType  false                      return false

User · Answer

With out knowing exactly what your trying to accomplish here its hard to say but if your spending the time to solve this problem with javascript an AJAX request is going to be your best bet  However if you d like to do it completely in PHP put this at the end of your script  and you should be set   if isset   SERVER  HTTP REFERER          header  Location        SERVER  HTTP REFERER           else       echo  An Error       This will still cause the page to change  twice  but the user will end on the page initiating the request  This is not even close to the right way to do this  and I highly recommend using an AJAX request  but it will get the job done

User · Answer

If you want the information in the form to be processed by the PHP page  then you HAVE to make a call to that PHP page  To avoid a redirection or refresh in this process  submit the form info via AJAX  Perhaps use jQuery dialog to display the results  or your custom animation

[jquery] Prevent redirect after form is submitted

Using Ajax

Examples related to jquery

Examples related to html

Examples related to forms

Examples related to redirect