Я работаю над следующей формой для локальной благотворительности.
Я испытываю затруднения из-за флажков в разделе доступности.
То, что я действительно хочу, - чтобы люди смогли просто проверить времена, которые они доступны, чтобы выручить и затем иметь эти проверенные времена, отправленные с остальной частью данных формы на благотворительность в электронном письме.
У меня есть все работающее, приятно принимают для флажков.
Вот мой код формы xhtml:
и ее мой код 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, я получаю эту 'неопределенную' проблему.
Любая справка с этим очень очень ценилась бы :)
Ваша проблема в том, что
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
).
Согласно sje397. Присвоением mon_morn будет селектор jQuery, так что ... возможно, вы сможете сделать что-то вроде:
val mon_morn_text = mon_morn.length > 0 ? mon_morn.val() : null;
Функция длины для jquerySelector позволит вам определить, был ли он проверен или нет.