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();
}
}
});
});
