Reputation: 454
hy! I have a signup form. I want to submit form using ajax after complete validation.I used jquery plugin for validation. But as soon as, i simply click on any field, the ajax request automatically sent to server and return a response before hitting submit button. Also, I am getting the "missing value" message. I do not know, where is the mistake. Help me !
Validation.js
$(document).ready(function() {
$('#signup_form').formValidation({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
}
})
.on('success.form.bv', function(e) {
$('#signup_form').data('formValidation').resetForm();
});
});
form_signup.php
<script type="text/javascript">
$(document).ready(function (){
$('#signup_form').submit(function(e){ e.preventDefault(); });
$(function(){
$("#signup_form").click(function(event){
//event.preventDefault();
$.ajax({
url:'form_process.php',
type:'POST',
data:$(this).serialize(),
success:function(result){
alert(result);
}
});
});
});
});
form_process.php
<?php
print_r($_POST);
require_once './functions/functions.php';
if(isset($_POST['FirstName']))
{
echo $firstName = $_POST['FirstName'];
}
else{ echo ("missing value!");}
Upvotes: 1
Views: 428
Reputation: 1049
your were calling ajax on form click inside form submit ?? , you need to call it on form submit instead !
$(document).ready(function(){
$('#signup_form').submit(function(e){
e.preventDefault();
$.ajax({
url:'form_process.php',
type:'POST',
data: $('#signup_form').serialize(),
success:function(result){
alert(result);
}
});
});
});
try this way...
Hope it helps
Upvotes: 3