Question

我有一个普通的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

Answer 1

我要做的是：

向form（要使用的选择器）
在submit按钮

喜欢：

<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>

然后将click绑定到submit按钮的选择器，并在关闭fancybox后将submit绑定到form，并将输入字段返回到form中的位置{1}}：

$(".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

FancyBox里面有一个html表单

1 个答案: