How to submit and validate a form via ajax
20,062
Solution 1
Try this (working for me as expected):
HTML Form:
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/css/screen.css" />
<script src="http://jquery.bassistance.de/validate/lib/jquery.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script>
// JQuery Script to submit Form
$(document).ready(function () {
$("#commentForm").validate({
submitHandler : function () {
// your function if, validate is success
$.ajax({
type : "POST",
url : "process.php",
data : $('#commentForm').serialize(),
success : function (data) {
$('#message').html(data);
}
});
}
});
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required />
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required />
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url" />
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
<div id="message"></div>
PHP Code:
<?php
echo $_POST['email'];
?>
Solution 2
Pass data
as a parameter in your success function:
success: function(data){
Your success
function won't do anything because you haven't defined data
Solution 3
You forget to pass the response
$(document).ready(function() {
$(".button").click(function() {
//check the validation like this
if ($("#myform").valid()) {
//Ajax to process the form
$.ajax({
type: "POST",
url: "process.php",
data: {
firstname: $("#firstname").val()
},
//you forget to passs the response
success: function(response) {
$('#message').html(response);
}
});
return false;
}
});
});
Author by
Duahs
Updated on July 05, 2022Comments
-
Duahs almost 2 years
Please I am trying to simultaneously submit and validate my form to my database through the use of Ajax, but it is not working for me. Here is my jquery
$(document).ready(function(){ $(".button").click(function(){ $("#myform").validate(); //Ajax to process the form $.ajax({ type: "POST", url: "process.php", data: { firstname: $("#firstname").val()}, success: function(){ $('#message').html(data); } }); return false; }); });
The problem is when I submit the form,the Ajax form submit to itself. Please What is the right way to use the jquery validate and $.ajax together?