如何关闭fancybox并重置输入表单值

Question

您好，我有一个使用fancybox 的联系我们表单，我想在fancybox 关闭时重置/清除表单输入值（当用户在弹出窗口外单击或使用“关闭”弹出按钮时）

包含花式框内容的元素是“内联”，所以我的猜测是：

...
$("#fancybox-overlay").fancybox({

'afterClosed': function() {
        $('#inline').hide(250, function() {
            $('#name input').val('');
            $('#phone input').val('');
            $('#email input').val('');
            $('#subject input').val('');
            $('#msgcontent textarea').val('');
            $('#security_code input').val('');

            $('#name input').removeClass('error');
            $('#phone input').removeClass('error');
            $('#email input').removeClass('error');
            $('#subject input').removeClass('error');
            $('#msgcontent textarea').removeClass('error');
            $('#security_code input').removeClass('error');
            $('#security_code_error').html('');
        });
    }
});

但结果如下： 前 ：

之后：

在弹出窗口外部单击“关闭”操作期间重置/清除表单值的任何帮助将不胜感激。谢谢。

更新： @Spokey 请求的 html 是：

<div id="inline" style="z-index:999999;">
    <h2 class="popupheader">...Contact Us: Send us a Message</h2>

    <div style="margin:2% 8%;background:#fff;border-radius:5px;width:auto;box-shadow: 3px 3px 10px #bbb;">
        <p style="display:inline-block;padding:10px;">
            ...
        </p>
        <p style="display:inline-block;padding:10px;float:right;">
            ...
        </p>
    </div>
    <form id="contact" name="contact" action="#" method="post">
        <label for="name">Your Name</label>
        <input type="text" id="name" name="name" class="txt" style="margin-left: 3px">
        <br>
        <label for="phone">Your Phone No.</label>
        <input type="text" id="phone" name="phone" class="txt" >
        <br>
        <label for="email">Your E-mail</label>
        <input type="email" id="email" name="email" class="txt">
        <br>
        <label for="subject">Subject</label>
        <input type="text" id="subject" name="subject" class="txt" size="45">
        <br>
        <label for="msgcontent">Enter a Message</label>
        <textarea id="msgcontent" name="msgcontent" class="txtarea" style="margin-left: 3px"></textarea>

        <br>

        <label for="security_code" style="width:auto;">Verify you are human</label>
        <img border="0" id="captcha" src="../../image.php" alt="">&nbsp;<a href="JavaScript: new_captcha();">
        <img border="0" alt="" src="../../images/refresh.png" align="bottom"></a>
        <input name="security_code" id="security_code" class="txt" style="width:150px;vertical-align: top;margin: 0px;" size="20" type="text" >
        <span id="security_code_error" name="security_code_error" style="background:#fefefe;color:red;"></span><? /*<div class="field_error error_pos"><?php if($error['security_code'] != "") echo $error['security_code']; ?></div> */ ?>
<br />
<hr style="color:#f2f2f2;border:1px solid #f2f2f2;width:auto;">
        <button id="send" name="send">Send Message</button>
    </form>
</div>

Answer 1

而且您可以更轻松、更清洁地进行操作。例如。如果您想清除所有输入字段，只需这样做，无需重复和意大利面条代码：

document.getElementById("yourFormId").reset();

Answer 2

你不需要隐藏#inline，因为插件会自己隐藏它

$("#fancybox-overlay").fancybox({
'afterClose': function() {
        $('#inline input, #inline textarea').val('');
        $('#inline').children().removeClass('error');
        $('#security_code_error').empty();
    }
});

注意为 fancybox2 更改了“afterClosed” 到'afterClose'（错别字）