CODEWITHSUNDEEP
javascriptjquery
Luke G
Luke G

Reputation: 1747

How to display notification before form submit with jquery?

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."

Upvotes: 0

Views: 625

Answers (2)

calexandru
calexandru

Reputation: 307

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.

Upvotes: 1

Samurai
Samurai

Reputation: 3754

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.

Upvotes: 1

Related Questions