0

你好我有一个使用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>
4

2 回答 2

2

And you can do it a lot more easier and cleaner. E.g. if you want to clear all input fields just do it that way without repetitive and spaghetti code:

document.getElementById("yourFormId").reset();
于 2013-06-13T10:09:04.240 回答
1

您不需要隐藏#inline，因为插件会自行隐藏

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

注意将 fancybox2 的“afterClosed”更改为“afterClose”（打字错误）

于 2013-06-13T09:13:26.657 回答