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?
3 answers
solution1
2 2014-07-14 16:39:47
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.
solution2
1 2014-07-14 16:41:25
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.
solution3
0 2014-07-14 16:49:35
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.