Проблема с использованием флажков добирается и javascript/jquery

Я работаю над следующей формой для локальной благотворительности.

Я испытываю затруднения из-за флажков в разделе доступности.

То, что я действительно хочу, - чтобы люди смогли просто проверить времена, которые они доступны, чтобы выручить и затем иметь эти проверенные времена, отправленные с остальной частью данных формы на благотворительность в электронном письме.

У меня есть все работающее, приятно принимают для флажков.

Вот мой код формы xhtml:

Contact Details
Can You Drive?
  1. No
Age Range
Availability
Mon Tue Wed Thur Fri Sat Sun
Morning
Afternoon
Evening

и ее мой код JavaScript:

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

});

Я настроил структуру таблицы то же как на форме для отображения времен доступности в электронном письме, которое получено.

В данный момент, если флажки проверяются доступные шоу времени, но если флажки не проверяются, я получаю текст, 'неопределенный' отправляемый в электронном письме. Я предпочтительно хотел бы, чтобы это или сказало 'не доступный' или возможно еще лучше просто, чтобы было пробелом, таким образом, он только показывает времена, что люди проверили как являющийся доступным. Это хорошо работает, когда JavaScript отключен, и метод сообщения используется только с php, но когда получить метод используется наряду с JavaScript, я получаю эту 'неопределенную' проблему.

Любая справка с этим очень очень ценилась бы :)

1
задан RivieraKid 18 August 2011 в 12:12
поделиться

2 ответа

Ваша проблема в том, что

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

вернет undefined для функции val (), если нет установленного флажка с таким именем.

Вы можете написать что-то вроде

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

, а затем использовать

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

при создании данных (без необходимости в строке var mon_morn ).

2
ответ дан 2 September 2019 в 23:26
поделиться

Согласно sje397. Присвоением mon_morn будет селектор jQuery, так что ... возможно, вы сможете сделать что-то вроде:

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

Функция длины для jquerySelector позволит вам определить, был ли он проверен или нет.

0
ответ дан 2 September 2019 в 23:26
поделиться
Другие вопросы по тегам:

Похожие вопросы: