I have a simple form that sends data using jQuery/Ajax/PHP. The PHP code validates the input before it sends it to the database and returns an error message to the response div if the input is invalid.
It works great on my computer and on my own server. But when I upload it to the client's server it doesn't work as expected. I noticed the following when I access the page from the client's server:
The validation result is being sent to the response div only if ALL the input fields have values. If any of the fields is empty, then nothing happens and no validation message is returned.
It doesn't seem to be a machine issue because I'm using the same computer to access the 3 copies, the one on my localhost, the one on my server, and the one on the client's server.
Here is the code; the jQuery:
$(document).ready(function() {
$('#signup').click(function() {
var queryString = 'ajax=true';
var txtName = encodeURIComponent($('#txtName').val());
if(txtName.length > 0){
txtName = txtName.replace(/\%/g, '-');
}
var txtEmail = escape($('#txtEmail').val());
var txtPhone = encodeURIComponent($('#txtPhone').val());
if(txtPhone.length > 0){
txtPhone = txtPhone.replace(/\%/g, '-');
}
var txtPhoneCode = encodeURIComponent($('#txtPhoneCode').val());
if(txtPhoneCode.length > 0){
txtPhoneCode = txtPhoneCode.replace(/\%/g, '-');
}
queryString = queryString + '&txtEmail=' + txtEmail;
queryString = queryString + '&txtName=' + txtName;
queryString = queryString + '&txtPhone=' + txtPhone;
queryString = queryString + '&txtPhoneCode=' + txtPhoneCode;
$.ajax({
type: "GET",
url: 'send.php',
data: queryString ,
success: function(msg) {
$('#response').html(msg);
}
});
return false;
});
});
The PHP page:
<?php
if(isset($_GET['ajax']) && ($_GET['ajax'] == 'true')){
$name = trim($_GET['txtName']); // coming from input text
$email = trim($_GET['txtEmail']); // coming from input text
$phone = trim($_GET['txtPhone']); // coming from input text
$phonecode = trim($_GET['txtPhoneCode']); // coming from a select
if(strlen($name) == 0){
echo 'Please enter your name';
}
elseif(strlen($email) == 0){
echo 'Please enter your email';
}
elseif(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*$/i", $email)){
echo 'Please enter a valid email';
}
elseif(strlen($phonecode) == 0){
echo 'Please select phone code';
}
elseif(strlen($phone) == 0){
echo 'Please enter your phone';
}
elseif(!preg_match("/^[0-9]*$/i", $phone)){
echo 'Please enter a valid phone';
}
else{
require('config.php');
// send to mysql db
$email = stripslashes($email);
$name = urldecode(str_replace('-', '%', $name));
$phone = urldecode(str_replace('-', '%', $phone));
$phonecode = urldecode(str_replace('-', '%', $phonecode));
$dt = gmdate("Y-m-d H:i:s");
$sql = "insert into subscribers(datecreated, name, email, phone, phonecode) values('$dt', '$name', '$email', '$phone', '$phonecode')";
$result = mysql_query($sql) or die('Error: Failed to save subscription!');
// redirect
echo '<script>setTimeout(function(){ window.location = "thankyou.html#ty"; }, 0);</script>';
}
}
?>
You are not posting data to the server since you are setting type: "GET".
This means that an HTTP GET request is sent, not HTTP POST. GET requests are typically cached by the client and therefore you may experience that no request is sent at all (when some combinations of field values are used) because the response of that request is already in the client's cache.
You should change your code (both javascript and php) to use HTTP POST instead. The reason for this is twofold: