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

そして、それをはるかに簡単かつクリーンに行うことができます。たとえば、すべての入力フィールドをクリアしたい場合は、反復的なスパゲッティ コードを使用せずに、次のようにします。

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();
    }
});

ファンシーボックス 2 の「afterClosed」を「afterClose」に変更 (タイプミス)

于 2013-06-13T09:13:26.657 に答える