Howdie do，
这很简单，但我看不出自己的错误。当用户单击该复选框时，变量isEmployee需要设置为true。然后我将该变量传递给JSON数组，但是有些原因，无论我做什么，isEmployee变量都没有被设置。
<label for="EmployStats">Current Employee: </label><input type="checkbox" id="EmployStats" checked />
var isEmployee = false;
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
}
});
data = {'Employ_Status':isEmployee};
但是，当我点击提交按钮时，即使单击该复选框，标题仍然显示为Employ_Status为假。
我不能为我的生活看到这个错误
更新：设置复选框后设置数据数组的原因是由于数据数组仅在其他字段经过验证后提交：
if(submit == true) { //If data is present, then prepare email and user values to be submitted to .php page
var results;
data = {
'Employ_name': $('#EmployName').val(),
'Employ_num': $('#EmployNumber').val(),
'Employ_phone': $('#Phone').val(),
'Employ_address': $('#Address').val(),
'Employ_city': $('#City').val(),
'Employ_state': $('#State').val(),
'Employ_zip': $('#Zip').val(),
'Employ_Status':isEmployee
}; //Add input to JSON array
//post data via ajax to success.php and retrieve response
$.post("success.php", data, function(ReturnedData) {
if(ReturnedData.Type == 'Error') { //If error returned, display error message
results = '<h1 class="error">'+ReturnedData.Message+'</h1>';
} else if (ReturnedData.Type == 'Success') { //If success returned, display message and remove submit button
results = '<h1 class="success">'+ReturnedData.Message+'</h1>';
}
$('#DataHolder').html(results);
}, 'json');
});
更新＃2。好的，所以每个人都可以看到我从头到尾做了什么：
<!DOCTYPE HTML>
<HEAD>
<TITLE>Jeremy's Form Submit Test </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/form_submit.css">
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script src="js/form_submit.js"></script>
</HEAD>
<BODY>
<div id="MainForm">
<label for="EmployName">*Employee Name: </label><input type="text" id="EmployName" />
<label for="EmployNumber">*Employee Number: </label><input type="text" id="EmployNumber" />
<label for="Phone">*Phone Number: </label><input type="text" id="Phone" />
<label for="Address">*Address: </label><input type="text" id="Address" />
<label for="City">*City: </label><input type="text" id="City" />
<label for="State">*State </label>
<select id="State">
<option value="" selected="selected">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="Zip">*Zip: </label><input type="text" id="Zip" />
<label for="EmployStats">Current Employee: </label><input type="checkbox" id="EmployStats" checked />
<input type="submit" id="FormSubmit" value="Submit">
</div>
<div id="DataHolder"></div>
</BODY>
</HTML>
表单提交的PHP脚本：
<?php
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest')) { //Make sure it's not a direct request. Must be ajax
$ReturnedData = json_encode(array("Type" => "Error", "Message" => "Naughty, Naughty. This must be an ajax request!!!"));
die($ReturnedData);
}
if(isset($_POST)) { //Ensure that POST is set
//Santiaze the post variables to be double sure no one is up to any funky business
$SaniUser = filter_var($_POST['Employ_name'],FILTER_SANITIZE_STRING);
$SaniNum = filter_var($_POST['Employ_num'],FILTER_SANITIZE_NUMBER_INT);
$SaniPhone = filter_var($_POST['Employ_phone'],FILTER_SANITIZE_NUMBER_INT);
$SaniAddress= filter_var($_POST['Employ_address'],FILTER_SANITIZE_STRING);
$SaniCity = filter_var($_POST['Employ_city'],FILTER_SANITIZE_STRING);
$SaniState = filter_var($_POST['Employ_state'],FILTER_SANITIZE_STRING);
$SaniZip = filter_var($_POST['Employ_zip'],FILTER_SANITIZE_NUMBER_INT);
//Get Employee Status
$SaniEmploy = $_POST['Employ_Status'];
if ($SaniEmploy != "true") {
$ReturnedData = json_encode(array("Type" => "Success", "Message" => "Hello " .$SaniUser. " . Thank you for submitting your information. Your employee number is ".$SaniNum . " . You Phone number is ".$SaniPhone. " . You live at " .$SaniAddress. " in " .$SaniCity. " from " .$SaniState. "in the " .$SaniZip. ". You're currently NOT an employee!!!"));
die($ReturnedData);
} else {
$ReturnedData = json_encode(array("Type" => "Success", "Message" => "Hello " .$SaniUser. " . Thank you for submitting your information. Your employee number is ".$SaniNum . " . You Phone number is ".$SaniPhone. " . You live at " .$SaniAddress. " in " .$SaniCity. " from " .$SaniState. "in the " .$SaniZip. ". You're currently an employee!!!"));
die($ReturnedData);
}
} else {
$ReturnedData = json_encode(array("Type" => "Error", "Message" => "Naughty naughty. No data was submitted!!!"));
die($ReturnedData);
}
?>
这是完成所有检查的完整jquery
$(document).ready(function() {
$("#FormSubmit").click(function() { //Set click action on formsubmit button
var submit = true; //Set default status on submit button
var isEmployee = false;
if($.trim($('#EmployName').val()) == '') { //Remove whitespaces and check if field is empty
alert('Employee Name can not be blank');
submit = false;
}
var Num = /^[\d]+$/; //RegEx to ensure it's a number being submitted
if($.trim($('#EmployNumber').val()) == '' || !Num.test($.trim($('#EmployNumber').val()))) { //Remove whitespaces and check if field is number
alert('Employee Number can not be blank and it must be a number');
submit = false;
}
var Phoneregex = /^1?[\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}$/; //RegEx to test phone number against
if(!Phoneregex.test($.trim($('#Phone').val()))) { //If supplied email without whitespaces doesn't match pattern, then alert user
alert('Please provide a valid phone number. You must include the dashes');
submit = false;
}
if($.trim($('#Address').val()) == '') { //Remove whitespaces and check if field is empty
alert('Address can not be blank');
submit = false;
}
if($.trim($('#City').val()) == '') { //Remove whitespaces and check if field is empty
alert('City can not be blank');
submit = false;
}
if($('#State').val() == '') { //Remove whitespaces and check if field is empty
alert('Please select a state from the dropdown menu');
submit = false;
}
if($.trim($('#Zip').val()) == '' || !Num.test($.trim($('#Zip').val()))) { //Remove whitespaces and check if field is number
alert('Zip can not be blank and it must be a number');
submit = false;
}
$('#EmployStats').change(function() {
if(this.checked) {
isEmployee = true;
data['Employ_Status'] = isEmployee;
}
});
if(submit == true) { //If data is present, then prepare email and user values to be submitted to .php page
var results;
data = {
'Employ_name': $('#EmployName').val(),
'Employ_num': $('#EmployNumber').val(),
'Employ_phone': $('#Phone').val(),
'Employ_address': $('#Address').val(),
'Employ_city': $('#City').val(),
'Employ_state': $('#State').val(),
'Employ_zip': $('#Zip').val(),
'Employ_Status':isEmployee
}; //Add input to JSON array
$.post("success.php", data, function(ReturnedData) { //post data via ajx to success.php and retrieve response
if(ReturnedData.Type == 'Error') { //If error returned, display error message
results = '<h1 class="error">'+ReturnedData.Message+'</h1>';
} else if (ReturnedData.Type == 'Success') { //If success returned, display message and remove submit button
results = '<h1 class="success">'+ReturnedData.Message+'</h1>';
}
$('#DataHolder').html(results);
}, 'json');
}
});
});
更新＃3
最终的工作代码如下。由于我没有将isEmployee声明为全局变量。非常感谢SOOO MUCHH !!!：
$(document).ready(function() {
var data; //Declare data object to hold values
var isEmployee = false; //Declare isEmployee which will store checkbox value
$('#EmployStats').change(function() {
if(this.checked) {
isEmployee = true;
} else {
isEmployee = false;
}
});
$("#FormSubmit").click(function() { //Set click action on formsubmit button
var submit = true; //Set default status on submit button
if($.trim($('#EmployName').val()) == '') { //Remove whitespaces and check if field is empty
alert('Employee Name can not be blank');
submit = false;
}
var Num = /^[\d]+$/; //RegEx to ensure it's a number being submitted
if($.trim($('#EmployNumber').val()) == '' || !Num.test($.trim($('#EmployNumber').val()))) { //Remove whitespaces and check if field is number
alert('Employee Number can not be blank and it must be a number');
submit = false;
}
var Phoneregex = /^1?[\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}$/; //RegEx to test phone number against
if(!Phoneregex.test($.trim($('#Phone').val()))) { //If supplied email without whitespaces doesn't match pattern, then alert user
alert('Please provide a valid phone number. You must include the dashes');
submit = false;
}
if($.trim($('#Address').val()) == '') { //Remove whitespaces and check if field is empty
alert('Address can not be blank');
submit = false;
}
if($.trim($('#City').val()) == '') { //Remove whitespaces and check if field is empty
alert('City can not be blank');
submit = false;
}
if($('#State').val() == '') { //Remove whitespaces and check if field is empty
alert('Please select a state from the dropdown menu');
submit = false;
}
if($.trim($('#Zip').val()) == '' || !Num.test($.trim($('#Zip').val()))) { //Remove whitespaces and check if field is number
alert('Zip can not be blank and it must be a number');
submit = false;
}
if(submit == true) { //If data is present, then prepare email and user values to be submitted to .php page
var results;
data = {
'Employ_name': $('#EmployName').val(),
'Employ_num': $('#EmployNumber').val(),
'Employ_phone': $('#Phone').val(),
'Employ_address': $('#Address').val(),
'Employ_city': $('#City').val(),
'Employ_state': $('#State').val(),
'Employ_zip': $('#Zip').val(),
'Employ_Status':isEmployee
}; //Add input to JSON array
$.post("success.php", data, function(ReturnedData) { //post data via ajx to success.php and retrieve response
if(ReturnedData.Type == 'Error') { //If error returned, display error message
results = '<h1 class="error">'+ReturnedData.Message+'</h1>';
} else if (ReturnedData.Type == 'Success') { //If success returned, display message and remove submit button
results = '<h1 class="success">'+ReturnedData.Message+'</h1>';
}
$('#DataHolder').html(results);
}, 'json');
}
});
});
答案 0 :(得分：2)
你需要将你的声明放在函数中：
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
}
// this has to be modified as well on every change
data = {'Employ_Status':isEmployee};
});
您也可以将代码修改为更清洁：
$('#EmployStats').change(function()
{
isEmployee = this.checked;
// this has to be modified as well on every change
data['Employ_Status'] = isEmployee;
});
编辑：将data = {'Employ_Status':isEmployee};更改为data['Employ_Status'] = isEmployee;，以便仅修改该对象的字段/属性
编辑：您可以通过多种方式解决问题，但要更改此内容：
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
data['Employ_Status'] = isEmployee;
}
});
用这个：
if($('#EmployStats').attr("checked"))
{
isEmployee = true;
data['Employ_Status'] = isEmployee;
}
会修复它。这是因为只要用户单击“提交”按钮，就会执行代码。因此，不要将复选框值分配给data['Employ_Status']到true或任何值，而是在复选框上设置更改的侦听器，忽略其当前值
答案 1 :(得分：2)
我已经测试了您的代码，似乎isEmployee DO正确切换了它的值。如果您的问题是您的数据对象没有相应更新，那只是因为您没有将它放在您的更改事件中。因此，它只会在第一时间定义。要解决此问题，您可以尝试以下示例：
<label for="EmployStats">Current Employee: </label><input type="checkbox" id="EmployStats" checked />
<div id="kanban"></div>
var isEmployee = false;
var data = {'Employ_Status':isEmployee};
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
} else {
isEmployee = false;
}
data.Employ_Status = isEmployee;
$('#kanban').html(data.Employ_Status.toString());
});
这是the example。
如果不是这种情况，我认为问题出在您的表单提交过程中。你能提供关于整个过程的更详细的代码吗？
现在很明显，这个问题的原因是由于isEmployee没有切换它的价值。
这是你的代码：
// ...
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
data['Employ_Status'] = isEmployee;
}
});
// ...
正如您所看到的，当您第一次检查#EmployStats时，它会将isEmployee设置为true，但是当用户第二次点击该复选框时，它无法切换回来。要在此处设置切换条件，您可以尝试：
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
}
else
{
isEmployee = false;
}
data['Employ_Status'] = isEmployee;
});
以下是您的代码的进一步重构版本：
$(document).ready(function() {
// Prepare your data object outside your event handler
var data = data || {};
// Move your checkbox event handler out from submit event
$('#EmployStats').change(function() {
isEmployee = (this.checked) ? true : false;
data['Employ_Status'] = isEmployee;
});
// Your original submit event handler
$("#FormSubmit").click(function() {
...
});
});
答案 2 :(得分：1)
在更改事件中尝试此设置数据。
var isEmployee = false;var data;
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
}else{
isEmployee = false;
}
data = {'Employ_Status':isEmployee};
alert(data['Employ_Status']);
// now pass it where you want
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="EmployStats">Current Employee: </label><input type="checkbox" id="EmployStats" />
//使用isEmployee点击提交如下：
var isEmployee = false;var data;
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
}else{
isEmployee = false;
}
alert(isEmployee);
});
$("#FormSubmit").click(function() //Set click action on formsubmit button
{
var submit = true; //Set default status on submit button
if($.trim($('#EmployName').val()) == '') //Remove whitespaces and check if field is empty
{
alert('Employee Name can not be blank');
submit = false;
}
var Num = /^[\d]+$/; //RegEx to ensure it's a number being submitted
if($.trim($('#EmployNumber').val()) == '' || !Num.test($.trim($('#EmployNumber').val()))) //Remove whitespaces and check if field is number
{
alert('Employee Number can not be blank and it must be a number');
submit = false;
}
var Phoneregex = /^1?[\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}$/; //RegEx to test phone number against
if(!Phoneregex.test($.trim($('#Phone').val()))) //If supplied email without whitespaces doesn't match pattern, then alert user
{
alert('Please provide a valid phone number. You must include the dashes');
submit = false;
}
if($.trim($('#Address').val()) == '') //Remove whitespaces and check if field is empty
{
alert('Address can not be blank');
submit = false;
}
if($.trim($('#City').val()) == '') //Remove whitespaces and check if field is empty
{
alert('City can not be blank');
submit = false;
}
if($('#State').val() == '') //Remove whitespaces and check if field is empty
{
alert('Please select a state from the dropdown menu');
submit = false;
}
if($.trim($('#Zip').val()) == '' || !Num.test($.trim($('#Zip').val()))) //Remove whitespaces and check if field is number
{
alert('Zip can not be blank and it must be a number');
submit = false;
}
if(submit == true) //If data is present, then prepare email and user values to be submitted to .php page
{
var results;
data = {'Employ_name': $('#EmployName').val(), 'Employ_num': $('#EmployNumber').val(), 'Employ_phone': $('#Phone').val(), 'Employ_address': $('#Address').val(), 'Employ_city': $('#City').val(), 'Employ_state': $('#State').val(),'Employ_zip': $('#Zip').val(), 'Employ_Status':isEmployee}; //Add input to JSON array
$.post("success.php", data, function(ReturnedData) //post data via ajx to success.php and retrieve response
{
if(ReturnedData.Type == 'Error') //If error returned, display error message
{
results = '<h1 class="error">'+ReturnedData.Message+'</h1>';
}
else if(ReturnedData.Type == 'Success') //If success returned, display message and remove submit button
{
results = '<h1 class="success">'+ReturnedData.Message+'</h1>';
}
$('#DataHolder').html(results);
}, 'json');
}
});