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

我会做的是：

  • 将 ID 或类添加到form（要使用的选择器）
  • 向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到submit按钮submit的选择器，然后form关闭花式框，并且输入字段返回到它们在中的位置form：

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