繁体   English   中英

单击发送时表单未关闭

Form not closing when I click send

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个试图在用户单击“提交”按钮时关闭的表单,但它始终显示“正在发送”

这是整个表格

<div class="pos-bottom">

    <a class="modalbox" href="#inline"><img src="images/quote.gif" class="imgquote" width="297" height="72" border="0px" />
    </a>
    <br />
    <div id="inline" style="display: none">
        <h2>Request a Quote</h2>

        <form id="contact" name="contact" action="#" method="post" style="width:600px">
            <br />
            <table width="50%">
                <tr>
                    <td width="30%">*Your Name:</td>
                    <td width="20%">&nbsp;</td>
                    <td width="50%">
                        <input type="text" id="Form_Name" name="Form_Name" />
                    </td>
                </tr>
                <tr>
                    <td width="30%">Company Name:</td>
                    <td width="20%">&nbsp;</td>
                    <td width="50%">
                        <input type="text" id="Form_Company" name="Form_Company" />
                    </td>
                </tr>

                <tr>
                    <td>*Your E-Mail:</td>
                    <td>&nbsp;</td>
                    <td>
                        <input type="text" id="Form_Email" name="Form_Email" />
                    </td>
                </tr>
                <tr>
                    <td width="30%">*Phone Number:</td>
                    <td width="20%">&nbsp;</td>
                    <td width="50%">
                        <input type="text" id="Form_Number" name="Form_Number" />
                    </td>
                </tr>
                <tr>
                    <td width="30%" h>Comments:</td>
                    <td width="20%">&nbsp;</td>
                    <td width="50%">
                        <textarea id="Form_Comments" name="Form_Comments" cols="25" rows="3"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">&nbsp;</td>
                </tr>
                <tr>
                    <td width="100%" align="center" colspan="3">
                        <button id="send">Request Quote</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">&nbsp;</td>
                </tr>
                <tr>
                    <td width="100%">
                        <b><?php echo $itemname; ?></b>
                        <br />
                        <br /> Manufacturer:
                        <?php echo $manufactuer;?>
                        <br /> Model:
                        <?php echo $model;?>
                        <br /> Category:
                        <?php echo $category;?>
                        <br />
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <!-- basic fancybox setup -->
    <script type="text/javascript">
        $(document)
            .ready(function () {
                $(".modalbox").fancybox();
                $("#contact").submit(function () {
                        return false;
                    });
                $("#send").on("click", function () {
                        {
                            // if both validate we attempt to send the e-mail
                            // first we hide the submit btn so the user doesnt click twice
                            $("#send").replaceWith("<em>sending...</em>");

                            $.ajax({
                                type: "POST",
                                url: "AJAX_Quote.php",
                                data: {
                                    name: $("#Form_Name").val(),
                                    email: $("#Form_Email").val(),
                                    eid: $("#Form_ID").val(),
                                    company: $("#Form_Company").val(),
                                    number: $("#Form_Number").val(),
                                    comments: $("#Form_Comments").val()
                                },
                                dataType: 'json',
                                success: function () {
                                    {
                                        $("#contact")
                                            .fadeOut("fast", function () {
                                                $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
                                                setTimeout("$.fancybox.close()", 50);
                                            });
                                    }
                                }
                            });
                        }
                    });
            });
    </script>
    <br />
    <br />
</div>
<!--ends pos-bottom-->

我到处都看过,似乎无法正常工作。 任何帮助将不胜感激。

*****编辑****

这是我添加尼克建议的新代码。

 <script type="text/javascript">
    $(document)
        .ready(function () {
            $(".modalbox").fancybox();
            $("#contact").submit(function () {
                    return false;
                });
            $("#send").on("click", function () {

                    {
                        // if both validate we attempt to send the e-mail
                        // first we hide the submit btn so the user doesnt click twice
                        $("#send").replaceWith("<em>sending...</em>");

                        $.ajax({
                            type: "POST",
                            url: "AJAX_Quote.php",
                            data: JSON.stringify({name: $("#Form_Name").val(),email: $("#Form_Email").val(),eid: $("#Form_ID").val(),company: $("#Form_Company").val(),number: $("#Form_Number").val(),comments: $("#Form_Comments").val()}),
                            dataType: 'json',
                            success: function () {
                                {

                                    $("#contact")
                                        .fadeOut("fast", function () {
                                            $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
                                            setTimeout(function () { $.fancybox.close(); }, 50)
                                        });
                                }
                            }
                        });
                    }
                });
        });
</script>
3 个回复

服务器将期待一个json字符串,而不是json对象。 请更新

data: {name: $("#Form_Name").val(),email: $("#Form_Email").val(),eid: $("#Form_ID").val(),company: $("#Form_Company").val(),number: $("#Form_Number").val(),comments: $("#Form_Comments").val()},

data: JSON.stringify({name: $("#Form_Name").val(),email: $("#Form_Email").val(),eid: $("#Form_ID").val(),company: $("#Form_Company").val(),number: $("#Form_Number").val(),comments: $("#Form_Comments").val()}),

根据所使用的版本,看起来有多种方法。 不确定您的版本。

有人建议使用:$ .fancybox.close(true)

检查这些链接中的评论:

链接1链接2

我可以通过更改它来使其工作

success: function () {
                            {

                                $("#contact")
                                    .fadeOut("fast", function () {
                                        $(this).before("<p><strong>Success! Your feedback has     been sent, thanks :)</strong></p>");
                                        setTimeout(function () { $.fancybox.close(); }, 50)
                                    });
                            }

对此

success: setTimeout(function () { parent.$.fancybox.close(); }, 2000) 
1 单击表单提交时关闭模式

我的模态持有一个表单,我想在用户单击提交按钮时关闭模式。 简化形式如下所示: 你可以看到两个按钮。 关闭按钮使用data-dismiss='modal' ,工作正常。 但是我不能在提交按钮上使用它,因为它“取消”了ng-submit=submitModule()提交功能; 模态将 ...

2 单击关闭表单后,JQGrid编辑表单关闭

希望这是一个简单的问题。 在JQGrid表单编辑模式下,编辑表单会在屏幕中间弹出以进行编辑。 当我单击窗体的关闭时,如在背景区域上一样,窗体关闭,就像单击“取消”一样。 我知道我可以使用“ onClose”事件来捕获此事件,但是我想知道如何告诉网格不要关闭,除非您单击“取消”按钮。 如果 ...

3 单击时自动关闭应用程序-Android

我是Android上的新程序员。 我正在尝试创建一个具有2个按钮的应用程序。 如果您单击第一个,我想发送一个HTMLpost。 第二个,我想创建一个新的活动。 但是,当我在第一个对话框中单击“是”时,应用程序关闭。 当我想创建新活动时,发生了一些事情。 我只单击第二个,应用程序自动关 ...

5 单击 X 或外部时模态不会关闭

我为我的网站设置的模式打开但当我单击 X 按钮或外部时不会关闭。 当我在浏览器中运行我的代码时,我可以单击该按钮并且它可以工作。 但它不会关闭。 我不确定错误是什么或为什么这不起作用。 var modal = document.getElementById("WhiteSedan1 ...

7 关闭表格C#时,单击“是”两次。

我为事件关闭表单C#编写了代码。 它有效,但是当我单击“是”以关闭表单时,我必须单击两次。 怎么了 我该如何解决这个问题? 这是我的代码 ...

2015-07-29 06:30:08 4 132   c#
9 关闭表单时的MessageBox

通过单击我创建的名为“退出”的按钮关闭表单后,我希望它显示一个消息框,询问用户“您确定要退出吗?” 我不知道它的语法,有人可以帮我吗? 谢谢 ...

10 当我单击除选定区域以外的任何位置时,模态关闭

我制作了三个框,每个框都有自己的按钮,单击它们会弹出各自的模态,当我单击其他任何位置时它们都会关闭,您可以通过下面共享的链接看到它们。 现在出现的问题是,当我单击模态本身(在模态上)时,它已关闭,这是错误的。 我正在尝试解决此问题,但没有得到足够的解决方案,可能会得到你们的帮助。 在此 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM