成功发布

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()方法。我不确定你的意思是＆＃39;关闭div＆＃39;，但你可以致电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会更好。然后，您可以使用布尔标志来显示请求的状态。

更新

  

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

鉴于这是您的按钮的代码还有另一个问题 - 您不会阻止提交表单，因此AJAX请求被取消。为此，请挂钩表单的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选择器。

Answer 2

用于清除表单字段

$("input[type=text], textarea").val("");

欢呼声

Answer 3

您也可以使用触发器

$（＆＃39;＃form_id＆＃39）触发。（＆＃34;重置＆＃34）;