Form not closing when I click send

Question

I have a form I am trying to get to close when the user clicks the submit button but it just stays up saying "sending"

Here is the entire form

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

I have looked everywhere and I cannot seem to get it working. Any help would be greatly appreciated.

*****EDIT****

Here is the new code I have adding Nicks advice.

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

Maybe unrelated to your problem, but don't pass `setTimeout` a string. Pass it a function like `setTimeout(function () { $.fancybox.close(); }, 50)`. — Nick, Jan 14 '15 at 18:42

Lumi Lu · Answer 1 · 2015-01-14T18:51:14.933

0

The server will expect a json string, not json object. Please update this,

From

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()},

To

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()}),

edited Jan 14 '15 at 18:51

answered Jan 14 '15 at 18:45

Lumi Lu

3,289
1
11
21

Didnt work, just still says "sending" and not closing. – WebbieWorks Jan 14 '15 at 19:05
No, nothing in the console besides the page getting the css files. – WebbieWorks Jan 14 '15 at 19:12
which browser you use? – Lumi Lu Jan 14 '15 at 19:21
I am using chrome and safari. – WebbieWorks Jan 14 '15 at 19:22

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

Looks like there are multiple ways based on the version being used. Not sure of your version.

Some one has suggested using: $.fancybox.close(true)

Check comments in these links:

LINK 1, LINK 2

edited May 23 '17 at 12:05

Community

1
1

answered Jan 14 '15 at 19:29

A Baldino

178
1
11

Tried both codes in the links and neither worked. Also tried some code from the fancybox api site. – WebbieWorks Jan 14 '15 at 19:54
Sorry to hear that, have you checked Nick's comment - setTimeOut should have function parameter like setTimeout(function () { $.fancybox.close(); }, 50) **Syntax:** window.setTimeout("javascript function", milliseconds); – A Baldino Jan 14 '15 at 20:02

score 0 · Answer 3 · answered Jan 14 '15 at 21:14

I was able to get itworking by changing this

success: function () {
                            {

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

to this

success: setTimeout(function () { parent.$.fancybox.close(); }, 2000)

Form not closing when I click send

3 Answers3