walyzfan1 walyzfan1 - 3 months ago 8
jQuery Question

How to validate if a checkbox has been checked on an AJAX/PHP form submit?

I am stuck trying to validate if a checkbox has been selected using an AJAX form submit. Essentially I want to make sure that either the standard rate or the emergency rate checkbox is checked (because only one of them will show up from earlier code). I have tried .val() like the others but it doesn't work either. Also, the select doesn't work. But my guess is that the checkbox and select are from the same problem.

HTML Code:

<li class="standard-rate rate">
<input type="checkbox" name="acknowledge-standard-rate" value="Standard Rate" id="acknowledge-standard-rate"><div class="standard-rate-desc">(*)I acknowledge time spent on my request will be deducted from my current contract or, in the absence of an hourly pack, billed at the end of the month.</div>
</li>

<li class="emergency-rate rate">
<input type="checkbox" name="acknowledge-emergency-rate" value="Emergency Rate" id="acknowledge-emergency-rate"><div class="emergency-rate-desc">(*)I acknowledge time spent on my request will be billed at our $200/hour emergency rate.</div>
</li>


AJAX/jQuery Code:

var formData = {
'first_name' : $('input[name=first_name]').val(),
'last_name' : $('input[name=last_name]').val(),
'email' : $('input[name=email]').val(),
'phone' : $('input[name=phone]').val(),
'message' : $('textarea[name=message]').val(),
'severity' : $('select[name=severity]').val(),
'acknowledge-standard-rate' : $('input[name=acknowledge-standard-rate]').is(':checked'),
'acknowledge-emergency-rate' : $('input[name=acknowledge-emergency-rate]').is(':checked')
};

// process the form
var request = $.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})


PHP code from process.php

if (!isset($_POST['acknowledge-standard-rate']) && !isset($_POST['acknowledge-emergency-rate'])) {// if
//doing null check for checkbox and returning one
$errors['checkbox'] = 'Please check the check box aknowledging payment.';
} // if

Answer

The problem here I think is that you are always setting a value true or false into both of those checkbox fields in you javascript.

Default browser form processing would not actually send the variable at all if it was not checked and your PHP code would work.

So instead of always creating these 2 variables

'acknowledge-standard-rate'     : $('input[name=acknowledge-standard-rate]').is(':checked'),
'acknowledge-emergency-rate'    : $('input[name=acknowledge-emergency-rate]').is(':checked')
};

In you javascript, you need to only create them if the relevant checkbox is checked.

Maybe something like this

var formData = {
    'first_name'        : $('input[name=first_name]').val(),
    'last_name'         : $('input[name=last_name]').val(),
    'email'             : $('input[name=email]').val(),
    'phone'             : $('input[name=phone]').val(),
    'message'           : $('textarea[name=message]').val(),
    'severity'          : $('select[name=severity]').val()
};
if ( $('input[name=acknowledge-standard-rate]').is(':checked') ) {
    formData.acknowledge-standard-rate = $('input[name=acknowledge-standard-rate]').val();
}
if ( $('input[name=acknowledge-emergency-rate]').is(':checked') ) {
    formData.acknowledge-emergency-rate = $('input[name=acknowledge-emergency-rate'].val();
}

process the form
var request = $.ajax({
        type     : 'POST', 
        url      : 'process.php',
        data     : formData, 
        dataType : 'json', 
        encode   : true
});

You might also want to validate that one of these is actually checked in the javascript before even starting this AJAX process, giving a simple error dialog telling the user to pick one.