I have an AJAX form that I am trying to get working and I cannot figure out why. I am not receiving and PHP errors as I have checked the log files. Basically, nothing is happening when I submit the form. I have another form that is very similar and it is working, so I do not know what is going on. Probably something very simple that I am overlooking.
Here is the form:
<div id="give-away-form">
<form method="post" action="ajax.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_name" class="col-sm-2 col-xs-12 control-label">Name</label>
<div class="col-sm-5 col-xs-12">
<input type="text" class="form-control" name="give_away_name" id="give_away_name" placeholder="Name">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_email" class="col-sm-2 col-xs-12 control-label">Email</label>
<div class="col-sm-5 col-xs-12">
<input type="text" class="form-control" name="give_away_email" id="give_away_email" placeholder="Email">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_phone_no" class="col-sm-2 col-xs-12 control-label">Phone No</label>
<div class="col-sm-5 col-xs-12">
<input type="text" class="form-control" name="give_away_phone_no" id="give_away_phone_no" placeholder="Phone No">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<!-- Street -->
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_street" class="col-sm-2 col-xs-12 control-label">Street</label>
<div class="col-sm-5 col-xs-12">
<input class="form-control" name="give_away_street" id="give_away_street" placeholder="Street">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<!-- End Street -->
<!-- City -->
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_city" class="col-sm-2 col-xs-12 control-label">City</label>
<div class="col-sm-2 col-xs-12">
<input class="form-control" name="give_away_city" id="give_away_city" placeholder="City">
</div>
<!-- End City -->
<!-- State -->
<label for="give_away_state" class="col-sm-1 col-xs-12 control-label">State</label>
<div class="col-sm-2 col-xs-12">
<select class="form-control" name="give_away_state" id="give_away_state">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<!-- <div class="col-sm-3 hidden-xs"></div> -->
</div>
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label class="col-sm-2 col-xs-12 control-label hidden-xs"> </label>
<div class="col-sm-5 col-xs-12 text-left">
<input type="hidden" name="action" value="give_away_form" />
<input type="submit" class="btn btn-primary" value="Submit">
<div class="clear"></div>
<div id="give_away_form_message"></div>
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
</form>
<!-- End Form -->
</div>
Here is the PHP:
if(isset($_POST['action']) && $_POST['action'] == 'give_away_form') {
$result = array();
$give_away_name = strip_tags(trim($_POST['give_away_name']));
$give_away_email = strip_tags(trim($_POST['give_away_email']));
$give_away_phone_no = strip_tags(trim($_POST['give_away_phone_no']));
$give_away_street = strip_tags(trim($_POST['give_away_street']));
$give_away_city = strip_tags(trim($_POST['give_away_city']));
$give_away_state = strip_tags(trim($_POST['give_away_state']));
if($give_away_name == '')
$result['error']['give_away_name'] = 'Name required.';
if($give_away_email == '')
$result['error']['give_away_email'] = 'Email address required.';
else if(!filter_var($give_away_email, FILTER_VALIDATE_EMAIL))
$result['error']['give_away_email'] = 'Invalid email address.';
if($give_away_phone_no == '')
$result['error']['give_away_phone_no'] = 'Phone no required.';
if($give_away_comment == '')
$result['error']['give_away_comment'] = 'Comment required.';
if(!isset($result['error'])) {
$to = $give_away_to;
$subject = $give_away_subject;
$message = '<p>Hi,</p>';
$message .= '<p>You have received this message from give_away form on Hope Starts Here - Columbus</p>';
$message .= '<p><strong>Name:</strong>'.$give_away_name.'</p>';
$message .= '<p><strong>Email:</strong>'.$give_away_email.'</p>';
$message .= '<p><strong>Phone No:</strong>'.$give_away_phone_no.'</p>';
$message .= '<p><strong>Comment:</strong><br>'.$give_away_comment.'</p>';
$message .= '<p> </p>';
$message .= '<p><strong>Thank You.</strong></p>';
$headers = "From: " . strip_tags($give_away_from) . "
";
$headers .= "Reply-To: ". strip_tags($give_away_email) . "
";
//$headers .= "CC: abc@example.com
";
$headers .= "MIME-Version: 1.0
";
$headers .= "Content-Type: text/html; charset=ISO-8859-1
";
if(@mail($to, $subject, $message, $headers)) {
$result['success'] = 'Thank you for entering to win! Once the names are drawn, we will contact the winners by email or phone.';
} else {
$result['error']['give_away_form_message'] = 'Something wrong please try again...';
}
}
echo json_encode($result);
die;
}
And, the JS:
$('#give-away-form form').submit(function(e) {
$('span.form-message').remove();
e.preventDefault();
$this = $(this);
var url = $this.attr('action');
var data = $this.serialize();
$.ajax({
url: url,
method: 'POST',
data: data,
dataType: 'json',
success: function(response) {
if(response.error) {
var focus_field = '';
$.each(response.error, function(id, message) {
$('#'+id).after('<span class="form-message label label-danger">' + message + '</span>');
if(focus_field == '')
focus_field = id;
});
$('#'+focus_field).focus();
}
if(response.success) {
$('#give_away_form_message').after('<span class="form-message label label-success">' + response.success + '</span>');
$this[0].reset();
}
}
});
});
I found the problem. I copied this form from another form and forgot to change a couple of variables.
if($give_away_comment == '')
$result['error']['give_away_comment'] = 'Comment required.';
There is no $give_away_comment.
Thanks for all of the help from all of you!
Can you try this code and tell us, which alerts have worked?
$('#give-away-form form').submit(function(e) {
$('span.form-message').remove();
e.preventDefault();
$this = $(this);
var url = $this.attr('action');
var data = $this.serialize();
$.ajax({
url : url,
method : 'POST',
data : data,
dataType : 'json',
success : function(response) {
alert("Number 1");
if(response.error) {
alert("Number 2");
var focus_field = '';
$.each(response.error, function(id, message) {
alert("Number 3");
$('#'+id).after('<span class="form-message label label-danger">' + message + '</span>');
if(focus_field == '')
focus_field = id;
});
$('#'+focus_field).focus();
}
if(response.success) {
alert("Number 4");
$('#give_away_form_message').after('<span class="form-message label label-success">' + response.success + '</span>');
$this[0].reset();
}
}
});
});
Could you please add echo "page works"; before your PHP code and then try to access it in your browser without the ajax. Just go to ajax.php on your server and see if the page is accessible and share the result with us.