javascript - 成功发布后清除表单并关闭 div

Question

我有一个通过 php-ajax 发送表单的脚本。它确实返回成功，但成功后我需要它做的是清除所有表单数据并关闭 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;

    });
});

任何想法将不胜感激

Answer 1

要清除表格，您可以调用 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!');
  }
}

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

更新

<button name ='send' value="Send" type='submit' class='btn btn-primary'>Finish</button>

鉴于这是您按钮的代码，还有另一个问题 - 您没有阻止表单提交，因此 AJAX 请求被取消。为此，请 Hook submit表单的事件而不是按钮的单击。从那里您可以调用 e.preventDefault()停止表单提交。试试这个:

<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'上面的选择器。您可以根据需要将其更改为表单上的类或 ID 选择器。