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

Refreshing the thankyou message on the form page after submitting

本文关键字：感谢 感谢信 信息 刷新 表单 提交      更新时间：2023-09-26

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

脚本如下:

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

在你的成功回调中，为执行你期望行为的函数设置一个超时时间。

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
}

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

在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是等待执行代码

的毫秒数。

您可以使用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方法，用于删除所有子节点

试试下面这个:

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

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

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

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

相关文章：