jquery popup after form submission

Question

I have the following code.

<script type="text/javascript">
        $(document).ready(function () {
            $("#submit").click(function (e) {
                e.preventDefault();

               /* Get some values from elements on the page: */
                var values = $(this).serialize();
                $.ajax({
                    url: "submit.php",
                    type: "post",
                    data: values            
                });
                $("#dialog").dialog({modal: true, height: 200, width: 300 });



            });
        });
    </script>


<body>
<form id="contactfrm">
<input type="text" name="fullname"/>
<input type="text" name="email"/>
<input type="text" name="phone"/>
<a href="" class="submit" id="submit">submit</a>
</form> 
</body>

the only reason i am using a link is because a designer has designed the link button and wasn't able to do a submit button.

Now when i click the button it popsup the window but it never submits the form. I can't understand why this is happening?

You mean the ajax code is not executed?? – Hackerman Jul 14 '14 at 16:37 — Hackerman, Jul 14 '14 at 16:37

score 2 · Answer 1 · answered Jul 14 '14 at 16:39

This is happening because you use e.preventDefault(); which prevents your form to submit. In order to submit it, put in the end of your code: $( "form" ).submit();.

When you call the $.ajax(...) method an asynchronous call will be made, so the form will not be submitted.

Moreover, note that when you call $("#dialog").dialog({modal: true, height: 200, width: 300 });, it will be closed after the $( "form" ).submit(); is called. The thing is, I do not understand the reason for opening a dialog when the form is to be submitted.

score 1 · Answer 2 · answered Jul 14 '14 at 16:41

If you want code to run when the ajax request is done, set the succes parameter:

$.ajax({
    url: "submit.php",
    type: "post",
    data: values,
    success: function(data){
        $("#dialog").dialog({modal: true, height: 200, width: 300 });
    }
});

If you just put the code behind the ajax request, it will immediately run after the request has started instead of when it has succeeded.

score 0 · Answer 3 · answered Jul 14 '14 at 16:49

I think you are getting the values in a wrong way. You should use

 var values = $(this).parent().serialize();

instead of

var values = $(this).serialize();

But what about use form button with CSS?

input[type=submit] {
    background: none;
    border: none;
    cursor: Pointer;    
}

jquery popup after form submission

3 Answers3

Linked