Unchecked Checkbox is causing AJAX Feedback to hang (with spinning loading icon) - php

Question

Paul here. I'm working on a simple form with one checkbox, a textarea and some inputs. I got POST to database to work on my localhost, I can submit all form data successfully, but having trouble when a checkbox in my form is unchecked: feedback fails, it says 'please wait' and just spins. The database registers the data okay in either case, but I would appreciate any help to get it more responsive.
The main problem occurs when user leaves 'subscribe' unchecked: no feedback.
I'm also hoping to learn how to create deeper feedback, such as "Your message has been sent. We'll be in touch shortly. You have also been added to our mailing list."
Here is my php:
<?php
/*Contact Form*/
//ajax call
if(isset($_GET['action'])&& $_GET['action'] == 'contact'){
mysql_connect('localhost','******','**********');
mysql_select_db('*******');
//sanitize data
$email = mysql_real_escape_string($_POST['contact-email']);
//validate email address - check if input was empty
if(empty($email)){
$status = 'error';
$message = 'You did not enter an email address!';
}
else if(!preg_match('/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\#[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/', $email)){ //validate email address - check if is a valid email address
$status = "error";
$message = "You have entered an invalid email address!";
}
else {
$existingContact = mysql_query("SELECT * FROM contact WHERE contact_email_address='$email'");
if(mysql_num_rows($existingContact) < 1){
//database insert code
$message = $_POST['contact-textarea'];
$checkbox = $_POST['contact-checkbox'];
$name = $_POST['contact-name'];
$date = date('Y-m-d');
$time = date('H:i:s');
$insertContact = mysql_query("INSERT INTO contact (contact_email_address, contact_date, contact_time, contact_name, contact_message, contact_checkbox) VALUES ('$email','$date','$time','$name','$message','$checkbox')");
if($insertContact){
$status = 'success';
$message = 'your message has been received';
}
else {
$status = 'error';
$message = "Oops, there's been a technical error!";
}
}
else {
$status = 'error';
$message = 'This email address has already been registered!';
}
}
//return the JSON response
$data = array(
'status' => $status,
'message' => $message
);
echo json_encode($data);
exit;
}
?>
and here is my html:
<form id="contact-form" action="?action=contact" method="post">
<legend>Contact us:</legend>
<label for="email">Your email: *</label>
<input type="email" name="contact-email" id="contact-email" placeholder="Your email here..." required></input>
<label for="name">Your Name: *</label>
<input type="name" name="contact-name" id="contact-name" placeholder="Your name here..." required></input>
<label for="message">Your Message: *</label>
<textarea id="contact-textarea" name="contact-textarea" placeholder="Type your message here..." rows = "8" cols = "35" required></textarea>
<label for="checkbox">Subscribe to Newsletter?</label>
<input type="checkbox" name="contact-checkbox" id="contact-checkbox" value="1"></input>
<p id="contact-response"></p>
<input type="submit" name="contact-button" id="contact-button"></input>
</form>
and here's the javascript:
$(document).ready(function(){
$('#contact-form').submit(function(){
//check the form is not currently submitting
if($(this).data('formstatus') !== 'submitting'){
//setup variables
var form = $(this),
formData = form.serialize(),
formUrl = form.attr('action'),
formMethod = form.attr('method'),
responseMsg = $('#contact-response');
//add status data to form
form.data('formstatus','submitting');
//show response message - waiting
responseMsg.hide()
.addClass('response-waiting')
.text('Please Wait...')
.fadeIn(200);
//send data to server
$.ajax({
url: formUrl,
type: formMethod,
data: formData,
success:function(data){
//setup variables
var responseData = jQuery.parseJSON(data),
klass = '';
//response conditional
switch(responseData.status){
case 'error':
klass = 'response-error';
break;
case 'success':
klass = 'response-success';
break;
}
//show reponse message
responseMsg.fadeOut(200,function(){
$(this).removeClass('response-waiting')
.addClass(klass)
.text(responseData.message)
.fadeIn(200,function(){
//set timeout to hide response message
setTimeout(function(){
responseMsg.fadeOut(200,function(){
$(this).removeClass(klass);
form.data('formsstatus','idle');
});
},3000)
});
});
}
});
}
//prevent form from submitting
return false;
});
})

Answer 1

My best guess is that it has to do with the fact that jQuery.serialize does not serialize the checkbox if it is unchecked.
Compare:
Checked: contact-email=test%40gmail.com&contact-name=test&contact-textarea=test&contact-checkbox=1
Unchecked: contact-email=test%40gmail.com&contact-name=test&contact-textarea=test
As a result, $_POST['contact-checkbox'] returns null which probably changes the data that's being returned to include a PHP warning, which breaks the JSON you're returning. To fix it, try this (I'm not fully sure it'll work):
if ( isset($_POST['contact-checkbox']) ) {
$checkbox = $_POST['contact-checkbox'];
}
else {
$checkbox = 0;
}
This checks if the contact checkbox is being posted. If so, if sets the checkbox value to the POST value. If not, the checkbox's set to 0.