javascript - JQuery not setting variable when checkbox is checked -
howdie do,
it's simple, can't see mistake. when user clicks checkbox, variable isemployee needs set true. pass variable json array, reason, no matter do, 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 hit submit button, header still showing employ_status false when checkbox clicked.
i can't life of me see wrong this
update: reason data array set after checkbox being set due data array being submitted after other fields have been validated:
if(submit == true) { //if data present, prepare email , user values submitted .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 json array //post data via ajax success.php , 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 , remove submit button results = '<h1 class="success">'+returneddata.message+'</h1>'; } $('#dataholder').html(results); }, 'json'); }); update #2. ok see i'm doing beginning 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 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 form submitted to:
<?php if (isset($_server['http_x_requested_with']) && ($_server['http_x_requested_with'] != 'xmlhttprequest')) { //make sure it's not direct request. must ajax $returneddata = json_encode(array("type" => "error", "message" => "naughty, naughty. must ajax request!!!")); die($returneddata); } if(isset($_post)) { //ensure post set //santiaze post variables double sure no 1 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 submitting information. employee number ".$saninum . " . phone number ".$saniphone. " . live @ " .$saniaddress. " in " .$sanicity. " " .$sanistate. "in " .$sanizip. ". you're not employee!!!")); die($returneddata); } else { $returneddata = json_encode(array("type" => "success", "message" => "hello " .$saniuser. " . thank submitting information. employee number ".$saninum . " . phone number ".$saniphone. " . live @ " .$saniaddress. " in " .$sanicity. " " .$sanistate. "in " .$sanizip. ". you're employee!!!")); die($returneddata); } } else { $returneddata = json_encode(array("type" => "error", "message" => "naughty naughty. no data submitted!!!")); die($returneddata); } ?> this full jquery doing of 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 , check if field empty alert('employee name can not blank'); submit = false; } var num = /^[\d]+$/; //regex ensure it's number being submitted if($.trim($('#employnumber').val()) == '' || !num.test($.trim($('#employnumber').val()))) { //remove whitespaces , check if field number alert('employee number can not blank , must number'); submit = false; } var phoneregex = /^1?[\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}$/; //regex test phone number against if(!phoneregex.test($.trim($('#phone').val()))) { //if supplied email without whitespaces doesn't match pattern, alert user alert('please provide valid phone number. must include dashes'); submit = false; } if($.trim($('#address').val()) == '') { //remove whitespaces , check if field empty alert('address can not blank'); submit = false; } if($.trim($('#city').val()) == '') { //remove whitespaces , check if field empty alert('city can not blank'); submit = false; } if($('#state').val() == '') { //remove whitespaces , check if field empty alert('please select state dropdown menu'); submit = false; } if($.trim($('#zip').val()) == '' || !num.test($.trim($('#zip').val()))) { //remove whitespaces , check if field number alert('zip can not blank , must number'); submit = false; } $('#employstats').change(function() { if(this.checked) { isemployee = true; data['employ_status'] = isemployee; } }); if(submit == true) { //if data present, prepare email , user values submitted .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 json array $.post("success.php", data, function(returneddata) { //post data via ajx success.php , 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 , remove submit button results = '<h1 class="success">'+returneddata.message+'</h1>'; } $('#dataholder').html(results); }, 'json'); } }); }); update #3
the final working code below. due me not declaring isemployee global variable. thankk youuu sooo muchh!!!:
$(document).ready(function() { var data; //declare data object hold values var isemployee = false; //declare isemployee 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 , check if field empty alert('employee name can not blank'); submit = false; } var num = /^[\d]+$/; //regex ensure it's number being submitted if($.trim($('#employnumber').val()) == '' || !num.test($.trim($('#employnumber').val()))) { //remove whitespaces , check if field number alert('employee number can not blank , must number'); submit = false; } var phoneregex = /^1?[\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}$/; //regex test phone number against if(!phoneregex.test($.trim($('#phone').val()))) { //if supplied email without whitespaces doesn't match pattern, alert user alert('please provide valid phone number. must include dashes'); submit = false; } if($.trim($('#address').val()) == '') { //remove whitespaces , check if field empty alert('address can not blank'); submit = false; } if($.trim($('#city').val()) == '') { //remove whitespaces , check if field empty alert('city can not blank'); submit = false; } if($('#state').val() == '') { //remove whitespaces , check if field empty alert('please select state dropdown menu'); submit = false; } if($.trim($('#zip').val()) == '' || !num.test($.trim($('#zip').val()))) { //remove whitespaces , check if field number alert('zip can not blank , must number'); submit = false; } if(submit == true) { //if data present, prepare email , user values submitted .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 json array $.post("success.php", data, function(returneddata) { //post data via ajx success.php , 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 , remove submit button results = '<h1 class="success">'+returneddata.message+'</h1>'; } $('#dataholder').html(results); }, 'json'); } }); });
try 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']); // pass 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 submit 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 , check if field empty { alert('employee name can not blank'); submit = false; } var num = /^[\d]+$/; //regex ensure it's number being submitted if($.trim($('#employnumber').val()) == '' || !num.test($.trim($('#employnumber').val()))) //remove whitespaces , check if field number { alert('employee number can not blank , must number'); submit = false; } var phoneregex = /^1?[\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}$/; //regex test phone number against if(!phoneregex.test($.trim($('#phone').val()))) //if supplied email without whitespaces doesn't match pattern, alert user { alert('please provide valid phone number. must include dashes'); submit = false; } if($.trim($('#address').val()) == '') //remove whitespaces , check if field empty { alert('address can not blank'); submit = false; } if($.trim($('#city').val()) == '') //remove whitespaces , check if field empty { alert('city can not blank'); submit = false; } if($('#state').val() == '') //remove whitespaces , check if field empty { alert('please select state dropdown menu'); submit = false; } if($.trim($('#zip').val()) == '' || !num.test($.trim($('#zip').val()))) //remove whitespaces , check if field number { alert('zip can not blank , must number'); submit = false; } if(submit == true) //if data present, prepare email , user values submitted .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 json array $.post("success.php", data, function(returneddata) //post data via ajx success.php , 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 , remove submit button { results = '<h1 class="success">'+returneddata.message+'</h1>'; } $('#dataholder').html(results); }, 'json'); } });
Comments
Post a Comment