I need some help with getting JQuery AJAX to work with a method in one of my PHP classes. I validated the form using a PHP class and which extends a Database class. I just need the AJAX to work and I’m good. How do you get AJAX to work with OO PHP? I have been stuck on this for the past few days and have researched all across the internet and have not found anything that works. Can someone maybe post a simple example of getting JQuery’s AJAX function to work with a PHP method?
Here is the PHP method that returns whether the user passed validation or not (contact.class.php which extends database.class.php):
public function isValidData() {
if ($this -> firstName() && $this -> lastName() && $this -> email() && $this -> subject() && $this -> message()) {
return true;
} else {
return false;
}
}
Here is the Jquery. The Ajax is at the bottom:
//Submit function called when the user clicks the submit button
$('#contact_form').submit(function(e) {
//Prevent submission until the user passes validation
e.preventDefault();
//If all the functions return true, then send form to the AJAX function
if(validFirstName() && validLastName() && validEmail() && validSubject() && validMessage()) {
//Serialize the data in the form for the AJAX Request
var formData = $('#contact_form').serialize();
//submitForm(formData);
//Displays success message, clears contact form and hides the lightbox
$('#contact_form').fadeOut(1000, function() {
$('.success').html('Form submission successful.' + '<br/>' + 'Thank you ' + $('input.first').val() + "!").fadeIn(4000, function() {
//Clears contact form
$('.first').val('');
$('.last').val('');
$('.email').val('');
$('.subject').val('');
$('.message').val('');
//Hides success message
$('.success').hide();
//Hides lightbox
$('.mask, .main_contact').css('display', 'none');
});
});
return true;
} else {
return false;
}
});
//Validates the user's first name
function validFirstName() {
var firstName = $('.first').val();
if(firstName.length <= 2 || firstName == '') {
$('.error').show().html('3 Characters required!<br/>');
$('.first').css('box-shadow', ' 0 0 10px #B40404');
return false;
} else {
$('.first').css('box-shadow', '0 0 4px #000');
$('.error').hide();
return true;
}
}
//Validates the user's last name
function validLastName() {
var lastName = $('input.last').val();
if(lastName.length <= 2 || lastName == '') {
$('.error').show().html('3 Characters required!<br/>');
$('input.last').css('box-shadow', '0 0 10px #B40404');
return false;
} else {
$('input.last').css('box-shadow', '0 0 4px #000');
$('.error').hide();
return true;
}
}
//Validates the user's email
function validEmail() {
var email = $('.email').val();
if(!email.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)) {
$('.error').show().html('Invalid email address!<br/>');
$('.email').css('box-shadow', ' 0 0 10px #B40404');
return false;
} else {
$('.email').css('box-shadow', '0 0 4px #000');
$('.error').hide();
return true;
}
}
//Validate the subject input in the contact form
function validSubject() {
var subject = $('.subject').val();
if(subject.length <= 2 || subject == '') {
$('.error').show().html('3 Characters required!<br/>');
$('.subject').css('box-shadow', ' 0 0 10px #B40404');
return false;
} else {
$('.subject').css('box-shadow', '0 0 4px #000');
$('.error').hide();
return true;
}
}
//Validate the message input
function validMessage() {
var message = $('.message').val();
if(message.length <= 2 || message == '') {
$('.error').show().html('3 Characters required!<br/>');
$('.message').css('box-shadow', ' 0 0 10px #B40404');
return false;
} else {
$('.message').css('box-shadow', '0 0 4px #000');
$('.error').hide();
return true;
}
}
});
//Ajax Request
function submitForm(formData) {
$.ajax({
type : "POST",
url : "includes/function.php",
data : formData,
dataType: 'json',
cache : false,
success : function(formData) {
if(formData.success) {
alert(formData.msg);
} else {
alert("Error");
}
console.log(formData);
}
});
The Jquery seems to disable my PHP serverside validation too. When the JQuery is disabled, the server side validation works fine. Any idea why JQuery would disable the server validation? I am kinda new to programming and I would appreciate any help, thanks.
the jquery is client side validation it cannot affect server side execution, the problem is the serialized data is not getting posted to the server hence the validation at server is not done because no data is reaching there.
why don’t u use alert at every step to see the flow of data.