Проблема с флажками с использованием get и javascript / jquery - PullRequest
Новая
       0

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

1 голос
/ 28 июня 2010

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

У меня проблемы с флажками в разделе доступности.

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

У меня все работает хорошо, примите флажки.

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

<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>

и она - мой код 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;  
});

});

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

В настоящий момент, если флажки установлены, показывается время, доступное, но если флажки не установлены, я получаю текст «undefined», отправляемый по электронной почте. Я бы предпочел, чтобы это было либо «недоступно», либо, может быть, даже лучше, просто оставьте поле пустым, чтобы оно показывало только те моменты, когда люди проверяли наличие данных. Он прекрасно работает, когда javascript отключен, а метод post используется только с php, но когда метод get используется вместе с javascript, я получаю эту «неопределенную» проблему.

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

Ответы [ 2 ]

2 голосов
/ 28 июня 2010

Ваша проблема 

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).

0 голосов
/ 28 июня 2010

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...