复选框被选中时，JQuery不设置变量 [英] JQuery not setting variable when checkbox is checked
本文介绍了复选框被选中时，JQuery不设置变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Howdie做，
这很简单，但我看不到我的错误。当用户单击复选框时，变量isEmployee需要设置为true。然后我把这个变量传递给一个JSON数组，但有些原因，不管我做什么，isEmployee变量都没有设置。
< label for =EmployStats>当前员工：< / label>< input type =checkboxid =EmployStatschecked />
var isEmployee = false;
$（'＃EmployStats'）。change（function（）
{
if（this.checked）
{
isEmployee = true;
}
}）;
data = {'Employ_Status'：isEmployee};
但是，当我点击我的提交按钮，标题仍然显示Employ_Status为false，即使复选框
我不能为我的生活看到这里有什么问题
更新：在设置复选框后设置数据数组的原因是因为只有在其他字段验证后才提交数据数组：
if（submit == true）{//如果数据存在，那么准备要提交到.php页面的电子邮件和用户值
var results;
data = {
'Employ_name'：$（'＃EmployName'）。val（），
'Employ_num'：$（'＃EmployNumber'）。 b'Employ_phone'：$（'＃Phone'）。val（），
'Employ_address'：$（'＃Address'）。val（），
'Employ_city'：$ '）.val（），
'Employ_state'：$（'＃State'）。val（），
'Employ_zip'：$（'＃Zip'）。 b'Employ_Status'：isEmployee
}; //将输入添加到JSON数组
//通过ajax将数据发送到success.php并检索响应
$ .post（success.php，data，function（ReturnedData）{
if（ReturnedData.Type =='Error'）{//如果返回错误，显示错误消息
results ='< h1 class =error>'+ ReturnedData.Message +'& h1>';
} else if（ReturnedData.Type =='Success'）{//如果返回成功，显示消息并删除提交按钮
results ='< h1 class =success ;'+ ReturnedData.Message +'< / h1>';
}
$（'＃DataHolder'）。html（results）;
}，'json'）;
}）;
UPDATE＃2。好，所以大家看到我从头到尾做什么：
<！DOCTYPE HTML>
< HEAD>
< TITLE> Jeremy的表单提交测试< / TITLE>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< link rel =stylesheettype =text / csshref =css / form_submit.css>
< script type =text / javascriptsrc =js / jquery-1.11.2.min.js>< / script>
< script src =js / form_submit.js>< / script>
< / HEAD>
< BODY>
< div id =MainForm>
< label for =EmployName> *员工姓名：< / label>< input type =textid =EmployName/&
< label for =EmployNumber> *员工号：< / label>< input type =textid =EmployNumber/&
< label for =Phone> *电话号码：< / label>< input type =textid =Phone/&
< label for =Address> *地址：< / label>< input type =textid =Address/&
< label for =City> *城市：< / label>< input type =textid =City/>
< label for =State> *州< / label>
< select id =State>
< option value =selected =selected>选择州< / option>
< option value =AL>阿拉巴马州< / option>
< option value =AK>阿拉斯加< / option>
< option value =AZ>亚利桑那州< / option>
< option value =AR>阿肯色州< / option>
< option value =CA>加利福尼亚州< / option>
< option value =CO>科罗拉多州< / option>
< option value =CT> Connecticut< / option>
< option value =DE>特拉华< / option>
< option value =DC>哥伦比亚特区< / option>
< option value =FL>佛罗里达州< / option>
< option value =GA>乔治亚州< / option>
< option value =HI>夏威夷< / option>
< option value =ID>爱达荷< / option>
< option value =IL> Illinois< / option>
< option value =IN>印第安纳< / option>
< option value =IA> Iowa< / option>
< option value =KS>堪萨斯州< / option>
< option value =KY>肯塔基州< / option>
< option value =LA>路易斯安那州< / option>
< option value =ME>缅因州< / option>
< option value =MD>马里兰< / option>
< option value =MA>马萨诸塞州< / option>
< option value =MI>密西根州< / option>
< option value =MN>明尼苏达州< / option>
< option value =MS>密西西比州< / option>
< option value =MO>密苏里州< / option>
< option value =MT>蒙大拿< / option>
< option value =NE>内布拉斯加州< / option>
< option value =NV>内华达州< / option>
< option value =NH>新罕布什尔州< / option>
< option value =NJ>新泽西州< / option>
< option value =NM>新墨西哥< / option>
< option value =NY>纽约< / option>
< option value =NC>北卡罗莱纳州< / option>
< option value =ND>北达科他州< / option>
< option value =OH>俄亥俄州< / option>
< option value =OK>奥克拉荷马< / option>
< option value =OR> Oregon< / option>
< option value =PA>宾夕法尼亚< / option>
< option value =RI>罗德岛< / option>
< option value =SC>南卡罗来纳< / option>
< option value =SD>南达科他州< / option>
< option value =TN>田纳西< / option>
< option value =TX>德克萨斯州< / option>
< option value =UT> Utah< / option>
< option value =VT>佛蒙特< / option>
< option value =VA>弗吉尼亚州< / option>
< option value =WA>华盛顿< / option>
< option value =WV>西弗吉尼亚州< / option>
< option value =WI>威斯康星< / option>
< option value =WY>怀俄明< / option>
< / select>
< label for =Zip> * Zip：< / label>< input type =textid =Zip/&
< label for =EmployStats>当前员工：< / label>< input type =checkboxid =EmployStatschecked />
< input type =submitid =FormSubmitvalue =Submit>
< / div>
< div id =DataHolder>< / div>
< / BODY>
< / HTML>
表单提交到的PHP脚本：
<？php
if（isset（$ _ SERVER ['HTTP_X_REQUESTED_WITH']）&&（$ _SERVER ['HTTP_X_REQUESTED_WITH']！='XMLHttpRequest' ））{//确保它不是直接请求。必须是ajax
$ ReturnedData = json_encode（array（Type=>Error，Message=>Naughty，Naughty，this must be ajax request !!!
die（$ ReturnedData）;
}
if（isset（$ _ POST））{//确保POST被设置
// Santiaze的后变量是双重的，没有人能胜任任何时髦的业务
$ 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）;
//获取员工状态
$ SaniEmploy = $ _POST ['Employ_Status'];
if（$ SaniEmploy！=true）{
$ ReturnedData = json_encode（array（Type=>Success，Message=>Hello。谢谢你提交你的信息，你的员工号码是。$ SaniNum。你的电话号码是。$ SaniPhone。你住在$ SaniAddress。从。$ SaniState。在。$ SaniZip。你现在不是一个雇员!!!））;
die（$ ReturnedData）;
} else {
$ ReturnedData = json_encode（array（Type=>成功，消息=>你好$ SaniUser。谢谢你提交信息。你的员工号码是。$ SaniNum。你的电话号码是。$ SaniPhone。你住在。$ SaniAddress。在。$ SaniCity。 SaniZip。你现在是一个员工!!!））;
die（$ ReturnedData）;
}
} else {
$ ReturnedData = json_encode（array（Type=>Error，Message=>淘气的淘气， submit !!!））;
die（$ ReturnedData）;
}
？>
这是执行所有检查的完整jquery
$（document）.ready（function（）{
$（＃FormSubmit）。 forms提交按钮
var submit = true; //在提交按钮上设置默认状态
var isEmployee = false;
if（$（'＃EmployName'）。 val（））==''）{//删除空格并检查字段是否为空
alert（'Employee Name不能为空'）;
submit = false;
} b $ b var Num = / ^ [\d] + $ /; // RegEx以确保它是正在提交的数字
if（$。trim（$（'＃EmployNumber'）。val =''||！Num.test（$。trim（$（'＃EmployNumber'）。val（））））{//删除空格并检查字段是否为数字
alert（'Employee Number can not必须是一个数字'）;
submit = false;
}
var Phoneregex = / ^ 1？[\s - ]？ （\ d {3}）\）？[\s - ]？\d {3} [\s - ]？\d {4} $ / // RegEx测试电话号码对
if（！Phoneregex.test（$。trim（$（'＃Phone'）。val（））））{//如果提供的电子邮件没有空格不匹配模式，然后提醒用户
alert（请提供有效的电话号码，您必须包含破折号）;
submit = false;
}
if（$。trim（$（'＃Address'）。val（））==''）{//删除空格并检查字段是否为空
alert（'Address can not be blank'）;
submit = false;
}
if（$。trim（$（'＃City'）。val（））==''）{//删除空格并检查字段是否为空
alert（'City can not be blank'）;
submit = false;
}
if（$（'＃State'）。val（）==''）{//删除空格并检查字段是否为空
alert从下拉菜单中选择一个状态'）;
submit = false;
}
if（$。trim（$（'＃Zip'）。val（））==''||！Num.test（$。trim Zip'）。val（））））{//删除空格并检查字段是否为数字
alert（'Zip不能为空，它必须是数字'）;
submit = false;
}
$（'＃EmployStats'）。change（function（）{
if（this.checked）{
isEmployee = true;
data ['Employ_Status '] = isEmployee;
}
}）;
if（submit == true）{//如果数据存在，那么准备要提交到.php页面的电子邮件和用户值
var results;
data = {
'Employ_name'：$（'＃EmployName'）。val（），
'Employ_num'：$（'＃EmployNumber'）。 b'Employ_phone'：$（'＃Phone'）。val（），
'Employ_address'：$（'＃Address'）。val（），
'Employ_city'：$ '）.val（），
'Employ_state'：$（'＃State'）。val（），
'Employ_zip'：$（'＃Zip'）。 b'Employ_Status'：isEmployee
}; //将输入添加到JSON数组
$ .post（success.php，data，function（ReturnedData）{//通过ajx将数据发送到success.php并检索响应
if （ReturnedData.Type =='Error'）{//如果返回错误，显示错误消息
results ='< h1 class =error>'+ ReturnedData.Message +'< / h1&
} else if（ReturnedData.Type =='Success'）{//如果成功返回，显示消息并删除提交按钮
results ='< h1 class =success>'+ ReturnedData .Message +'< / h1>';
}
$（'＃DataHolder'）。html（results）;
}，'json'）;
}
}）;
}）;
UPDATE＃3
代码如下。由于我不将isEmployee声明为全局变量。 THANKK YOUUU SOOO MUCHH !!!：
$（document）.ready（function（）{
var data; //声明数据对象保存值
var isEmployee = false; //声明isEmployee，它将存储复选框值
$（'＃EmployStats'）change（function（）{
if this.checked）{
isEmployee = true;
} else {
isEmployee = false;
}
}）;
$ #FormSubmit）。click（function（）{//在formsubmit按钮上设置点击操作
var submit = true; //在提交按钮上设置默认状态
if（$。trim #EmployName'）。val（））==''）{//删除空格并检查字段是否为空
alert（'Employee Name不能为空'）;
submit = false;
}
var Num = / ^ [\d] + $ /; // RegEx确保它是一个正在提交的数字
if（$。trim（$（' EmployeeNumber'）。val（））==''||！Num.test（$。trim（$（'＃EmployNumber'）。val（））））{//删除空格并检查字段是否为数字
alert（'员工号不能为空，且必须为数字'）;
submit = false;
}
var Phoneregex = / ^ 1？[\s - ]？\（？（\d {3}）\）？[\s-]？ \d {3} [\s - ]？\d {4} $ /; // RegEx测试电话号码对
if（！Phoneregex.test（$。trim（$（'＃Phone'）。val（））））{//如果提供的电子邮件没有空格不匹配模式，然后提醒用户
alert（请提供有效的电话号码，您必须包含破折号）;
submit = false;
}
if（$。trim（$（'＃Address'）。val（））==''）{//删除空格并检查字段是否为空
alert（'Address can not be blank'）;
submit = false;
}
if（$。trim（$（'＃City'）。val（））==''）{//删除空格并检查字段是否为空
alert（'City can not be blank'）;
submit = false;
}
if（$（'＃State'）。val（）==''）{//删除空格并检查字段是否为空
alert从下拉菜单中选择一个状态'）;
submit = false;
}
if（$。trim（$（'＃Zip'）。val（））==''||！Num.test（$。trim Zip'）。val（））））{//删除空格并检查字段是否为数字
alert（'Zip不能为空，它必须是数字'）;
submit = false;
}
if（submit == true）{//如果数据存在，那么准备要提交到.php页面的电子邮件和用户值
var results;
data = {
'Employ_name'：$（'＃EmployName'）。val（），
'Employ_num'：$（'＃EmployNumber'）。 b'Employ_phone'：$（'＃Phone'）。val（），
'Employ_address'：$（'＃Address'）。val（），
'Employ_city'：$ '）.val（），
'Employ_state'：$（'＃State'）。val（），
'Employ_zip'：$（'＃Zip'）。 b'Employ_Status'：isEmployee
}; //将输入添加到JSON数组
$ .post（success.php，data，function（ReturnedData）{//通过ajx将数据发送到success.php并检索响应
if （ReturnedData.Type =='Error'）{//如果返回错误，显示错误消息
results ='< h1 class =error>'+ ReturnedData.Message +'< / h1&
} else if（ReturnedData.Type =='Success'）{//如果成功返回，显示消息并删除提交按钮
results ='< h1 class =success>'+ ReturnedData .Message +'< / h1>';
}
$（'＃DataHolder'）。html（results）;
}，'json'）;
}
}）;
}）;
解决方案
p>
pre>< script src =https://ajax.googleapis.com/ajax/libs/jquery /2.1.1/jquery.min.js\"></script><label for =EmployStats>当前员工：< / label>< input type =checkboxid =EmployStats/ >
//使用isEmployee
var isEmployee = false; var data;
$（'＃EmployStats'）。change（function（）
{
if（this.checked）
{
isEmployee = true;
} else {
isEmployee = false;
}
alert（isEmployee）;
}）;
$（＃FormSubmit）。click（function（）//在form提交按钮上设置点击动作
{
var submit = true; //在提交按钮上设置默认状态
if（$。trim（$（'＃EmployName'）。val（））==''）//删除空格并检查字段是否为空
{
alert Employee Name不能为空'）;
submit = false;
}
var Num = / ^ [\d] + $ /; // RegEx以确保它是提交的数字
if（$。trim（$＃'EmployNumber'）。val（））==''||！Num.test（$。trim（$（'＃EmployNumber'）。val ）//删除空格并检查字段是否为数字
{
alert（'Employee Number不能为空，它必须是数字'）;
submit = false;
}
var Phoneregex = / ^ 1？[\s - ]？\（？（\d {3}）\）？[\s-]？ \d {3} [\s - ]？\d {4} $ /; // RegEx来测试电话号码对
if（！Phoneregex.test（$。trim（$（'＃Phone'）。val（）））））//如果提供的电子邮件没有空格不匹配模式，然后提醒用户
{
alert（'请提供有效的电话号码，您必须包含破折号'）;
submit = false;
}
if（$。trim（$（'＃Address'）。val（））==''）//删除空格并检查字段是否为空
{
alert（'Address can not be blank'）;
submit = false;
}
if（$。trim（$（'＃City'）。val（））==''）//删除空格并检查字段是否为空
{
alert（'City不能为空'）;
submit = false;
}
if（$（'＃State'）。val（）==''）//删除空格并检查字段是否为空
{
alert（'请从下拉菜单中选择一个状态'）;
submit = false;
}
if（$。trim（$（'＃Zip'）。val（））==''||！Num.test（$。trim Zip'）。val（））））//删除空格并检查字段是否为数字
{
alert（'Zip不能为空，它必须是数字'）;
submit = false;
}
if（submit == true）//如果数据存在，那么准备要提交到.php页面的电子邮件和用户值
{
var results;
data = {'Employ_name'：$（'＃EmployName'）。val（），'Employ_num'：$（'＃EmployNumber'）。 .val（），'Employ_address'：$（'＃Address'）。val（），'Employ_city'：$（'＃City'）。val（），'Employ_state'：$（'＃State'）。val （），'Employ_zip'：$（'＃Zip'）。val（），'Employ_Status'：isEmployee}; //将输入添加到JSON数组
$ .post（success.php，data，function（ReturnedData）//通过ajx将数据发送到success.php并检索响应
{
if （ReturnedData.Type =='Error'）//如果返回错误，显示错误消息
{
results ='< h1 class =error>'+ ReturnedData.Message +'< h1>';
}
else if（ReturnedData.Type =='Success'）//如果返回成功，显示消息并删除提交按钮
{
results ='< h1 class =success>'+ ReturnedData.Message +'< / h1>';
}
$（'＃DataHolder'）。
}，'json'）;
}
}）;
Howdie do,
It's very simple, but I can't see my mistake. When the user clicks the checkbox, the variable isEmployee needs to be set to true. I then pass that variable to a JSON array, but some reason, no matter what I do, the isEmployee variable isn't being set.
<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};
However, when I hit my submit button, the header still is showing Employ_Status as false even when the checkbox is clicked.
I can't for the life of me see what is wrong with this
UPDATE: The reason the data array is set after the checkbox being set is due to the data array only being submitted after other fields have been validated:
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');
});
UPDATE #2. Ok so for everyone to see what I'm doing from beginning to end:
<!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>
The PHP script that the form is submitted to:
<?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);
}
?>
This is the full jquery that is doing all of the checking
$(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');
}
});
});
UPDATE #3
The final working code is below. Due to me not declaring isEmployee as a global variable. THANKK YOUUU 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');
}
});
});
解决方案
Try like this set data inside change event.
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" />
// use isEmployee on click to submit like this:
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');
}
});
这篇关于复选框被选中时，JQuery不设置变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
