ajax表单提交后如何清除表单字段并打印成功消息答案

【问题标题】：How to clear form fields and print a success message after ajax form submissionajax表单提交后如何清除表单字段并打印成功消息
【发布时间】：2013-02-26 09:51:47
【问题描述】：

我正在使用表单提交。我想知道如何在表单提交后清除表单字段并打印成功消息。

我用过变量选项 = ( 清除形式：真 }

但是没用

我的代码：-

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                //alert("Thank you for your comment!"); 
            }); 

        }); 
    </script> 

</head>

<body>
    <form id="myForm" name="myForm" action="comment.php" method="post" enctype="multipart/form-data"> 
        <input type="text" name="name" />
        <br /> 
        <textarea name="comment"></textarea> 
        <br />
        <input type="file" value="Share a Pic" name="file" id="file" />
        <br />
        <input type="submit" value="Submit Comment" /> 
    </form>
</body>

【问题讨论】：

你也可以使用 form.reset() 来清除表单字段

标签： php jquery ajax form-submit

【解决方案1】：

只是猜测，但原生 form.reset() 不会这样做吗？

$(document).ready(function() { 
     $('#myForm').ajaxForm(function() { 
         this.reset();
         alert('success');
     }); 
});

【讨论】：

【解决方案2】：

您可以为此使用resetForm。这是文档http://malsup.com/jquery/form/#options-object

或 cna 使用 resetForm 和 clearForm http://malsup.com/jquery/form/#api 上的文档等函数

或者干脆试试：

$(document).ready(function() { 
     $('#myForm').ajaxForm(function() { 
         success:function(){
               $('#myForm').reset();
         }
     }); 
});

【讨论】：

【解决方案3】：

尝试使用clearForm(); 和resetForm();。

官方文档：http://malsup.com/jquery/form/#api

<script type="text/javascript">
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function() { 
            //alert("Thank you for your comment!"); 
            $(this).clearForm();
        }); 

    }); 
</script>

【讨论】：

【解决方案4】：

应该是：

 $(document).ready(function() { 
      $("#myForm").submit(function(){
         $("input[type='text']").val('');
         $("input[type='textarea']").val('');
         alert('Message');
      });
 });

【讨论】：

OP 使用 jQuery 插件所以不需要提交处理程序。

【解决方案5】：

它使用以下代码：-

<script type="text/javascript">
        $(document).ready(function() {
            var options = { 
                clearForm: true,
                resetForm: true
            };
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                //alert("Thank you for your comment!"); 

            }); 
            $('#myForm').ajaxForm(options);

        }); 
    </script>

感谢您的帮助

【讨论】：