Javascript 成功发布后，清除表单并关闭div

我有一个脚本，它通过php ajax发送我的表单。它确实返回success，但成功后我需要它做的是清除所有表单数据并关闭div并加载另一个。我尝试了许多不同的方法来清除表单和关闭div，但它们似乎完全停止了它的工作。要关闭的div的id为“5box”。我需要将其添加到的工作脚本为：

$(document).ready(function() {
   $('#btn-finish').on('click', function() {

        // Add text 'loading...' right after clicking on the submit button. 
        $('.output_message').text('Processing...'); 

        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: form.attr('method'),
            data: form.serialize(),
            success: function(result){
                if (result == 'success'){
                    $('.output_message').text('Message Sent!');

                } else {
                    $('.output_message').text('Error Sending email!');
                }
            }
        });

        // Prevent default submission of the form after clicking on the submit button. 
        return false;

    });
});

---

如果您想清除您可以调用底层元素的

reset（）

方法的表单，我们将不胜感激。我不确定“关闭div”是什么意思，但可以调用

hide（）

使其消失。试试这个：

success: function(result) {
  if (result == 'success') {
    $('.output_message').text('Message Sent!');
    form[0].reset();
    $('#5box').hide();
  } else {
    $('.output_message').text('Error Sending email!');
  }
}

<script>
  $(function() {
    $('form').on('submit', function(e) { 
      e.preventDefault();
      $('.output_message').text('Processing...'); 

      var form = $(this);
      $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: form.serialize(),
        success: function(result) {
          if (result == 'success') {
            $('.output_message').text('Message Sent!');
            form[0].reset();
            $('#5box').hide();
          } else {
            $('.output_message').text('Error Sending email!');
          }
        }
      });
    });
  });
</script>

还请注意，从AJAX调用返回JSON将是更好的做法。然后可以使用布尔标志来显示请求的状态

更新

Finish

鉴于这是按钮的代码，还有一个问题-您没有阻止表单提交，因此AJAX请求被取消。为此，请钩住表单的

submit

事件，而不是单击按钮。从那里，您可以调用

e.preventDefault（）

停止表单提交。试试这个：

success: function(result) {
  if (result == 'success') {
    $('.output_message').text('Message Sent!');
    form[0].reset();
    $('#5box').hide();
  } else {
    $('.output_message').text('Error Sending email!');
  }
}

<script>
  $(function() {
    $('form').on('submit', function(e) { 
      e.preventDefault();
      $('.output_message').text('Processing...'); 

      var form = $(this);
      $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: form.serialize(),
        success: function(result) {
          if (result == 'success') {
            $('.output_message').text('Message Sent!');
            form[0].reset();
            $('#5box').hide();
          } else {
            $('.output_message').text('Error Sending email!');
          }
        }
      });
    });
  });
</script>

$（函数（）{
$（'form'）。在（'submit'，函数（e）{
e、 预防默认值（）；
$（'.output_message'）.text（'处理…'）；
变量形式=$（此）；
$.ajax({
url:form.attr（'action'），
方法：form.attr（'method'），
数据：form.serialize（），
成功：功能（结果）{
如果（结果=‘成功’）{
$（'.output_message'）.text（'message Sent！'）；
表单[0]。重置（）；
$（“#5box”）.hide（）；
}否则{
$（'.output_message'）.text（'发送电子邮件时出错！'）；
}
}
});
});
});

注：我在上面使用了一个通用的

'form'

选择器。您可以根据需要将其更改为窗体上的类或id选择器

用于清除表单字段

---

干杯

您也可以使用触发器

---

$（'form#u id'）。触发器（“重置”）

嗨，如果我同时添加这两个，它将停止工作，如果我添加了。隐藏它不会隐藏它？控制台中有错误吗？另外，

#btn finish

是表单中的提交按钮吗？您可以使用$（'#5box'）.css（'display'，'None'）隐藏div。@KhanjanBhatt您可以，但这样做是不好的做法way@RoryMcCrossan谢谢，仅供参考，您可以

编辑您的答案以添加更多信息。