How to display notification before form submit with jquery?

Question

Is it possible to hold form submission to display notification for a couple of seconds?

Before a page reloads after the callback form is submitted I would like to display something along those lines: "Thank you for your callback request. We will be in touch shortly."

The "Request a callback" feature? Why does the page need to reload? I.e. post the form in the background using ajax then display a message? (http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Alex K., Jul 17 '13 at 16:44
It's pretty straightfoward to run a function on submit that returns true after some other event. What have you tried? — isherwood, Jul 17 '13 at 16:47
Please keep the question directly answerable. Answers are not supposed to recommend ideas, but cut to the chase of your problem. Also, dumping a link in order for us to look for something is also not optimal. Instead, post relevant code. Your site is prone to change, and the question will lose context. — k0pernikus, Jul 17 '13 at 18:20

score 1 · Answer 1 · answered Jul 17 '13 at 16:51

1

You can use preventDefault() to stop the form from submitting, show the information you want and submit() the form in a setTimout() after the desired delay.

answered Jul 17 '13 at 16:51

Samurai

3,588
5
23
36

there's always `window.confirm();` as an option to a setTimeout – oomlaut Jul 17 '13 at 18:38

calexandru · Answer 2 · 2013-07-18T13:47:49.687

if you're submitting with AJAX there is no need to refresh.

Take this as an example:

<form>
  <input type="text" name="fname"/>
  <input type="text" name="lname"/>
  <input type="text" name="email"/>
  <input type="text" name="address"/>
  <input type="password" name="password"/>
  <!--
     Here you have two options. Use <a></a> or an input with type="submit"
     since you're using AJAX, I reccomend using <a href="#" id="submit_form">Submit</a>
  -->
  <a href="#" id="submit_form">Submit</a>
</form>

Thank you for your callback request. We will be in touch shortly.

On javascript then:

<script>
  $(document).ready(function(){
    $("#submit_form").bind("click",function(){
     //do a $.post();
     $.post("submit/this.php",something : "content_of_something",
       function(response){
          if(response==1)//or whatever you want
            $('#some_id').fadeIn(function() {
               setTimeout(function(){
                 window.location.reload();
               },3000);                         
            });
          else
            alert("Error ocurred");
       }
     );


    });
  });
</script>

On PHP, check if the variable got to the server through $_POST(for debug purpose do var_export($_POST) on the server and on the client put a alert(response) right after function(response)). If everything went how it was supposed, echo 1(so response will match 1== response == 1), else, you can echo something else you want.

How to display notification before form submit with jquery?

2 Answers2