提交后刷新表单页面上的感谢消息

Question

我在页面中有一个简单的表单，该表单正在提交到同一页面并在其中显示感谢信息。 但是问题是我想在几秒钟后删除“谢谢”消息或刷新页面。 有什么解决办法。

这是脚本：

<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

在成功回调中，为执行所需行为的函数设置超时。

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

在success函数中，我将添加一个setTimeout ，如下所示：

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);
  }
}

数字500是执行代码之前要等待的毫秒数

Answer 4

您可以使用setTimeout在几秒钟后删除$('#show_subscriber_msg')的内容

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是一个jquery方法，用于删除所有子节点

Answer 5

请尝试以下对我有用的方法：

   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)