Question

我有一个联系表单，我试图在提交后自动重置。我在SO上看过几个关于重置或清除表格的帖子。

我已尝试了几个，但我不确切知道在哪里发布代码。

这就是我所拥有的代码：

$.ajax({
    type: 'POST',
    url: 'sendmessage.php',
    data: $("#contact").serialize(),
    success: function(data) {
        if(data == "true") {
            $("#contact").fadeOut("fast", function(){
                $(this).before("<p> <strong>Success! Your request has been sent. We will respond to it as soon as possible. </strong></p>");                            
                   setTimeout("$.fancybox.close()", 3000);

我一直试图放置

$("#contact")[0].reset();

但是我试图放置代码的所有地方都不起作用......

Answer 1

您可以在该表单中获取所有子项“input”标记和“textareas”并清除值

$('#contact').find('input[type=text], textarea').attr("value", "")

我希望这就是你所要求的

Answer 2

我做了一个小小的jsfiddle（远非智能或优化），可能对你有用。

在我的情况下，表单会像您提到的那样使用$('#contact')[0].reset();重置，但您可以看到我在哪里使用它并在之后构建解决方案。

HTML

<form id="contact" action="">
    <input type="text" name="foo" />
    <input type="text" name="bar" />    
</form>

<button id="btnSubmit">Submit</button>
<button id="btnShowForm" style='display:none'>Show form again</button>

JS / jQuery

$("#btnSubmit").on("click", function () {

    $("#contact").fadeOut("fast", function () {
        $("#contact")[0].reset();
        $('#btnSubmit').hide();

        $(this).before("<p id='msg'> <strong>Success! Your request has been sent. We will respond to it as soon as possible. </strong></p>");

        setTimeout(function () {

            $('#msg').fadeOut();            
            $("#btnShowForm").fadeIn();
        }, 3000);

    });
});

$("#btnShowForm").on("click", function () {
    $("#contact").fadeIn();
    $("#btnSubmit").fadeIn();
    $(this).hide();    
});

的jsfiddle

http://jsfiddle.net/fabio_silva/Lh2uq/

如何使用jQuery重置表单？

2 个答案:

HTML

JS / jQuery

的jsfiddle