成功发布后清除表格并关闭div [英] Clearing a form and closing the div after successful post

问题描述

我有一个脚本通过php-ajax发送表单.它确实返回成功，但是成功后我需要做的是清除所有表单数据并关闭div并加载另一个.我尝试了多种清除表格并关闭div的方法，但是它们似乎完全停止了它的工作.要关闭的div的ID是"5box"，我需要将其添加到其中的工作脚本是:

I have a script that sends my form via php-ajax. It does return success but what I need it to do when it has been successful is clear all the form data and close the div and load another one. I have tried many different ways to clear form and close div but they just seem to stop it working totally. The id of the div to close is '5box' The working script that i need to add these to is :

$(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;

    });
});

任何想法都会受到赞赏

推荐答案

要清除表单，可以调用基础Element的reset()方法.我不确定关闭div"的含义，但是您可以调用hide()使其消失.试试这个:

To clear the form you can call the reset() method of the underlying Element. I'm not sure what you mean by 'close the div', but you can call hide() to make it disappear. Try this:

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会是更好的做法.然后，您可以拥有一个布尔标志来显示请求的状态.

Also note that it would be much better practice to return JSON from the AJAX call. You can then have a boolean flag to show the state of the request.

更新

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

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

Given that is the code of your button there is another issue - you're not preventing the form from being submit, hence the AJAX request is cancelled. To do this, hook to the submit event of the form instead of the click of the button. From there you can call e.preventDefault() to stop form submission. Try this:

<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选择器.

Note I used a generic 'form' selector above. You can change that to a class or id selector on the form as required.

这篇关于成功发布后清除表格并关闭div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！