单击发送时表单未关闭

Question

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

这是整个表格

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

Answer 1

服务器将期待一个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()}),

Answer 2

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

有人建议使用：$ .fancybox.close（true）

检查这些链接中的评论：

链接1 ， 链接2

Answer 3

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

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)