0

私は通常のhtmlフォームを持っています。フォーム内にはいくつかのフィールドがあります。そのフォーム内には、ライトボックス div もあります。ライトボックスの中に送信ボタンがあります。したがって、次のようになります。

<form action="path" method="post">
    Name: <input type="text" name="name" /><br/>

    <a href="#fancybox">Link to open fancybox</a>

    <div id="fancybox" style="display: none;">
        <input type="text" name="captcha" />
        <input type="submit" value="Submit" />
    </div>

</form>

リンクをクリックしてファンシーボックスを開き、送信ボタンをクリックすると。うまくいきません。フォームは送信されません。

何が起こっているのですか？ここに状況のjsfiddleがありますJsFiddle

4

1 に答える 1

3

私がすることは：

  • formID またはクラスを(再生するセレクター) に追加します。
  • submitボタンに ID またはクラスを追加する

お気に入り ：

<form id="myForm" action="http://jsfiddle.net" method="post">Name:
    <input type="text" name="name" />
    <br/> <a href="#fancybox" class="fancybox">Link to open fancybox</a>

    <div id="fancybox" style="display: none;">
        <input type="text" name="captcha" placeholder="captcha" />
        <input type="submit" value="Submit" id="mySubmit" />
    </div>
</form>

次に a をボタンclickのセレクターにバインドし、fancybox を閉じた後、入力フィールドを の位置に戻します。submitsubmitformform

$(".fancybox").fancybox({
    afterShow: function () {
        $("#mySubmit").on("click", function () {
            $.fancybox.close();
            setTimeout(function () {
                $("#myForm").submit();
            }, 100); // wait for the inout field to be back inside the form then submit
        });
    }
});

要素setTimeout()内でフィールドが置換されるまでの時間を確保するために使用していることに注意してください。formまた、fancybox 内でキャプチャを検証する場合は、同じコールバック内に適切なスクリプトを含めます。

JSFIDDLEを参照してください

于 2013-07-31T18:56:27.797 に答える