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

Question

您好，我有一个使用 fancybox 的联系我们表单，我想在 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();