Trouble with check boxes using get and javascript/jquery

Question

Hi,

I am working on the following form for a local charity: http://bit.ly/dtcuv7

I am having trouble with the check boxes in the availability section.

What I really want is for people to be able to simply check the times they are available to help out and then have these checked times sent with the rest of the form data to the charity in an email.

I have everything working nicely accept for the checkboxes.

Here is my xhtml form code:

<form id="contact_form" method="post" action="php/process.php">
<fieldset>
    <legend>Contact Details</legend>
    <ol>
    <li>
    <label for="name">Name:</label>
    <input id="name" name="name" type="text" class="text" />
    </li>
    <li>
    <label for="address">Postal Address:</label>
    <textarea id="address" name="address" rows="4" cols="30"></textarea>
    </li>
    <li>
    <label for="email">Email Address:</label>
    <input id="email" name="email" type="text" class="text" />
    </li>
    <li>
    <label for="phone_number">Phone Number:</label>
    <input id="phone_number" name="phone_number" type="text" class="text" />
    </li>
    <li>
    <label for="mobile_number">Mobile Number:</label>
    <input id="mobile_number" name="mobile_number" type="text" class="text" />
    </li>
    </ol>
</fieldset>
<fieldset>
    <legend>Can You Drive?</legend>
    <ol>
    <li>
    <label for="yes_drives">Yes</label>
    <input id="yes_drives" name="drives" type="radio" class="radio" value="yes" />
    </li>
    <li
    <label for="no_drives">No</label>
    <input id="no_drives" name="drives" type="radio" class="radio" value="no" />
    </li>
    </ol>
</fieldset>
<fieldset>
    <legend>Age Range</legend>
    <ol>
    <li>
    <label for="18to21">18 - 21</label>
    <input id="18to21" name="age" type="radio" class="radio" value="18 - 21" />
    </li>
    <li>
    <label for="22to34">22 - 34</label>
    <input id="22to34" name="age" type="radio" class="radio" value="22 - 34" />
    </li>
    <li>
    <label for="35to49">35 - 49</label>
    <input id="35to49" name="age" type="radio" class="radio" value="35 - 49" />
    </li>
    <li>
    <label for="50to64">50 - 64</label>
    <input id="50to64" name="age" type="radio" class="radio" value="50 - 64" />
    </li>
    <li>
    <label for="65">65 +</label>
    <input id="65" name="age" type="radio" class="radio" value="65 +" />
    </li>
    </ol>
</fieldset>
<fieldset>
    <legend>Availability</legend>
    <table>
    <tr>
        <th></th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thur</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
    </tr>
    <tr>
        <th>Morning</th>
        <td><input type="checkbox" name="mon_morn" value="available" /></td>
        <td><input type="checkbox" name="tue_morn" value="available" /></td>
        <td><input type="checkbox" name="wed_morn" value="available" /></td>
        <td><input type="checkbox" name="thur_morn" value="available" /></td>
        <td><input type="checkbox" name="fri_morn" value="available" /></td>
        <td><input type="checkbox" name="sat_morn" value="available" /></td>
        <td><input type="checkbox" name="sun_morn" value="available" /></td>
    </tr>
    <tr>
        <th>Afternoon</th>
        <td><input type="checkbox" name="mon_afternoon" value="available" /></td>
        <td><input type="checkbox" name="tue_afternoon" value="available" /></td>
        <td><input type="checkbox" name="wed_afternoon" value="available" /></td>
        <td><input type="checkbox" name="thur_afternoon" value="available" /></td>
        <td><input type="checkbox" name="fri_afternoon" value="available" /></td>
        <td><input type="checkbox" name="sat_afternoon" value="available" /></td>
        <td><input type="checkbox" name="sun_afternoon" value="available" /></td>
    </tr>
    <tr>
        <th>Evening</th>
        <td><input type="checkbox" name="mon_evening" value="available" /></td>
        <td><input type="checkbox" name="tue_evening" value="available" /></td>
        <td><input type="checkbox" name="wed_evening" value="available" /></td>
        <td><input type="checkbox" name="thur_evening" value="available" /></td>
        <td><input type="checkbox" name="fri_evening" value="available" /></td>
        <td><input type="checkbox" name="sat_evening" value="available" /></td>
        <td><input type="checkbox" name="sun_evening" value="available" /></td>
    </tr>
    </table>
    <ol>
    <li>
    <label for="any_time">Evenings or Weekends</label>
    <input id="any_time" name="general_availability" type="radio" class="radio" value="Evening or Weekends" />
    </li>
    <li>
    <label for="evenings">Evenings Only</label>
    <input id="evenings" name="general_availability" type="radio" class="radio" value="Evenings Only" />
    </li>
    <li>
    <label for="weekends">Weekends Only</label>
    <input id="weekends" name="general_availability" type="radio" class="radio" value="Weekends Only" />
    </li>
    </ol>
</fieldset>
<fieldset class="submit">   
    <input id="submit" type="submit" value="Submit Form" />   
</fieldset>  
</form>

and her is my javascript code:

$(document).ready(function() {

//if submit button is clicked  
$('#submit').click(function () {

    //Get the data from all the fields  
    var name = $('input[name=name]');
    var address = $('textarea[name=address]');
    var email = $('input[name=email]');  
    var phone_number = $('input[name=phone_number]');
    var mobile_number = $('input[name=mobile_number]');
    var drives = $(':radio:checked[name=drives]');
    var age = $(':radio:checked[name=age]');
    var mon_morn = $(':checkbox:checked[name=mon_morn]');
    var tue_morn = $(':checkbox:checked[name=tue_morn]');
    var wed_morn = $(':checkbox:checked[name=wed_morn]');
    var thur_morn = $(':checkbox:checked[name=thur_morn]');
    var fri_morn = $(':checkbox:checked[name=fri_morn]');
    var sat_morn = $(':checkbox:checked[name=sat_morn]');
    var sun_morn = $(':checkbox:checked[name=sun_morn]');
    var mon_afternoon = $(':checkbox:checked[name=mon_afternoon]');
    var tue_afternoon = $(':checkbox:checked[name=tue_afternoon]');
    var wed_afternoon = $(':checkbox:checked[name=wed_afternoon]');
    var thur_afternoon = $(':checkbox:checked[name=thur_afternoon]');
    var fri_afternoon = $(':checkbox:checked[name=fri_afternoon]');
    var sat_afternoon = $(':checkbox:checked[name=sat_afternoon]');
    var sun_afternoon = $(':checkbox:checked[name=sun_afternoon]');
    var mon_evening = $(':checkbox:checked[name=mon_evening]');
    var tue_evening = $(':checkbox:checked[name=tue_evening]');
    var wed_evening = $(':checkbox:checked[name=wed_evening]');
    var thur_evening = $(':checkbox:checked[name=thur_evening]');
    var fri_evening = $(':checkbox:checked[name=fri_evening]');
    var sat_evening = $(':checkbox:checked[name=sat_evening]');
    var sun_evening = $(':checkbox:checked[name=sun_evening]');
    var general_availability = $(':radio:checked[name=general_availability]');

    //organize the data properly  
    var data =
    'name=' + name.val() +
    '&address=' + encodeURIComponent(address.val()) +
    '&email=' + email.val() +
    '&phone_number=' + phone_number.val() +
    '&mobile_number=' + mobile_number.val() +
    '&drives=' + drives.val() +
    '&age=' + age.val() +
    '&mon_morn=' + mon_morn.val() +
    '&tue_morn=' + tue_morn.val() +
    '&wed_morn=' + wed_morn.val() +
    '&thur_morn=' + thur_morn.val() +
    '&fri_morn=' + fri_morn.val() +
    '&sat_morn=' + sat_morn.val() +
    '&sun_morn=' + sun_morn.val() +
    '&mon_afternoon=' + mon_afternoon.val() +
    '&tue_afternoon=' + tue_afternoon.val() +
    '&wed_afternoon=' + wed_afternoon.val() +
    '&thur_afternoon=' + thur_afternoon.val() +
    '&fri_afternoon=' + fri_afternoon.val() +
    '&sat_afternoon=' + sat_afternoon.val() +
    '&sun_afternoon=' + sun_afternoon.val() +
    '&mon_evening=' + mon_evening.val() +
    '&tue_evening=' + tue_evening.val() +
    '&wed_evening=' + wed_evening.val() +
    '&thur_evening=' + thur_evening.val() +
    '&fri_evening=' + fri_evening.val() +
    '&sat_evening=' + sat_evening.val() +
    '&sun_evening=' + sun_evening.val() +
    '&general_availability=' + general_availability.val();

    //disabled all the text fields  
    $('.text').attr('disabled','true');

    //show the loading sign  
    $('#sending').show();

    //start the ajax  
    $.ajax({  
        //this is the php file that processes the data and sends mail  
        url: "php/process.php",

        //GET method is used  
        type: "GET",

        //pass the data           
        data: data,

        //Do not cache the page  
        cache: false,

        //success  
        success: function (html) {

            //if process.php returned 1/true (send mail success)  
            if (html==1) {

                //hide the sending icon  
                $('#sending').hide();

                //show the success message
                setTimeout(function(){$('#sent').fadeIn();});

                //if process.php returned 0/false (send mail failed)   
            } else alert('Sorry, an unexpected error occurred.');

            //hide the loading sign  
            $('#sending').hide();

            //enable all the text fields  
            $('.text').attr('disabled','');
        }         
    });  

    //cancel the submit button default behaviours  
    return false;  
});   

});

I have set up a table structure the same as on the form to display the availability times in the email that is received.

At the moment if the checkboxes are checked the time shows available, but if the checkboxes are not checked I am getting the text 'undefined' being sent in the email. I would preferably like this to either say 'not available' or perhaps even better just be blank, so it only shows the times that people have checked as being available. It works fine when javascript is disabled and the post method is used with just php, but when the get method is used along with javascript I'm getting this 'undefined' problem.

Any help with this would be very very appreciated :)

Answer 1

Your problem is

var mon_morn = $(':checkbox:checked[name=mon_morn]');

will return undefined for the val() function if there is no checked checkbox with that name.

You could so something like

function checkVal(name) {
  var val = $(':checkbox:checked[name=' + name + ']').val();
  if(!val) return "unavailable";
  return val;
}

then use

...
'&mon_morn=' + checkVal('mon_morn') +
....

when creating your data (with no need for the var mon_morn line).

Answer 2

As per sje397. The assignment to mon_morn will be the jQuery selector so... maybe you can do something like:

val mon_morn_text = mon_morn.length > 0 ? mon_morn.val() : null;

The length function for the jquerySelector will allow you to determine if it was checked or not.