javascript - 使用 get 和 javascript/jquery 的复选框出现问题

Question

我正在研究以下 form为本地的慈善机构。

我在使用可用性部分的复选框时遇到问题。

我真正想要的是让人们能够简单地检查他们可以提供帮助的时间，然后将这些检查的时间与其余表单数据一起通过电子邮件发送给慈善机构。

我的一切都很好地接受了复选框。

这是我的 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;  
});   

});

我已经设置了一个与表单相同的表结构，以在收到的电子邮件中显示可用时间。

目前，如果复选框被选中，时间显示可用，但如果复选框未被选中，我将在电子邮件中收到文本“未定义”。我希望它要么说“不可用”，要么最好是空白，这样它只显示人们检查过的可用时间。当 javascript 被禁用并且 post 方法只与 php 一起使用时，它工作正常，但是当 get 方法与 javascript 一起使用时，我遇到了这个“未定义”的问题。

如有任何帮助，我们将不胜感激 :)

Answer 1

你的问题是

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

如果没有选中该名称的复选框，val() 函数将返回 undefined。

你可以这样

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

然后使用

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

创建数据时(不需要 var mon_morn 行)。