Refreshing the thankyou message on the form page after submitting

Question

I have a simple form in a page.The form is submitting to the same page and displaying the thank you message there it self. But the issue is that i want to remove the thank you message after some seconds or refresh the page. Is there any solution.

Here is the script:

<script>
    /* ==============================================
    Ajax Submiting For Email Subscriber Form.
    =====================================================================*/ 
    $("#subscriber_form").submit(function(e) {
      $('#show_subscriber_msg').html('<div class=gen>Submiting..</div>');
      var subscriberemail = $('#subscriberemail').val();
      var formURL = $(this).attr("action");
      var data = {
        subscriberemail: subscriberemail
      }
      $.ajax({
        url: formURL,
        type: "POST",
        data: data,
        success: function(res) {
          if (res == '1') {
            $('#show_subscriber_msg').html('<div class=gen>Thanks for your interest in Water Lily Pond. We are going to get in touch with you very soon. </div>');
          }
      if (res == '5') {
            $('#show_subscriber_msg').html('<div class=err>Please enter a valid email address</div>');
          }
        }
      });
      e.preventDefault();
      //STOP default action
    });
    </script>

Answer 1

In your success callback, set a timeout for a function that executes your desired behavior.

success: function(res) {
  if (res == '1') {
    $('#show_subscriber_msg').html('<div class=gen>Thanks for your interest in Water Lily Pond. We are going to get in touch with you very soon. </div>');
    setTimeout(yourFunction, 5000);
  }
  if (res == '5') {
    $('#show_subscriber_msg').html('<div class=err>Please enter a valid email address</div>');
  }
}

function yourFunction() {
    // your code here
}

Answer 2

success: function(res) {
    if (res == '1') {
        $('#show_subscriber_msg').html('<div class=gen>Thanks for your interest in Water Lily Pond. We are going to get in touch with you very soon. </div>');
        setTimeout(function() {
            $('#show_subscriber_msg').html('');
        }, 5000);
    }
    if (res == '5') {
        $('#show_subscriber_msg').html('<div class=err>Please enter a valid email address</div>');
    }
}

Answer 3

Inside the success function I would add a setTimeout , like this:

success: function(res) {
  if (res == '1') {
    $('#show_subscriber_msg').html('<div class=gen>Thanks for your interest in Water Lily Pond. We are going to get in touch with you very soon. </div>');
    setTimeout(function() {
      // do what you want, for example:
      $('#show_subscriber_msg').html('');
    // this number is in milliseconds
    }, 500);
  }
}

The number, 500 is the number of milliseconds to wait until executing the code

Answer 4

You can use setTimeout to remove the content of $('#show_subscriber_msg') after some seconds

success: function(res) {
          if (res == '1') {
            $('#show_subscriber_msg').html('<div class=gen>Thanks for your interest in Water Lily Pond. We are going to get in touch with you very soon. </div>');
          }
      if (res == '5') {
            $('#show_subscriber_msg').html('<div class=err>Please enter a valid email address</div>');
          }
setTimeout(function(){
  $('#show_subscriber_msg').empty()
},5000)
        }

empty is a jquery method which is used to remove all child nodes

Answer 5

Try below its worked for me :

   success: function(response) {
if (response) {
              $('#div_id').hide().html('Write Your message here').fadeIn('slow').delay(6000).hide(1);
             } 
      }

Answer 6

如果您想隐藏它或setTimout，也可以使用jQuery延迟。

$("#show_subscriber_msg").html('your html').delay(1000).fadeOut();

setTimeout(function() { // your code to modify or hide the message div }, 1000)