javascript - jQuery column addition sequencing -
i trying apply visual cues user insert data in form field. red indicates input not valid, whilst green indicates content valid. code functioning, albeit in glitched manner.
» issue one: "red state" flickers on event.
» issue two: if manually insert correct (number) input in fields, 1 one, , then, in last field, press backspace, current input field empty string, sum total return nan.
i suspect due parseint() javascript method, need computation can performed on pushed arrays.
the specific reason why setup way, because on initial load, fields may populated , if so, want display green boxes , check mark visual queue that, section done. reason why entire block of code wrapped in setinterval() page scanning state should displayed , apply proper classes accordingly.
html:
staff information (for office locations)
</center> </div><span class="mrquestiontext" style=""><br> <br> 17. a. indicate total number of full time staff firm has in following positions. not count staff member in more 1 position. (numeric values only, no need thousands separator)</span> <table summary="<hr/><div style='border:1px solid #888; background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;'><center><b>staff information (for office locations)</b></center></div><br/><br/>17. a. indicate total number of full time staff firm has in following positions. not count staff member in more 1 position. (numeric values only, no need thousands separator)<span class='sumcol'></span>" class="mrquestiontable" style="display: inline-block;"> <tbody> <tr> <td id="cell.0.0"></td> <td id="cell.1.0" class="mrgridquestiontext" style=""><span class="mrquestiontext" style=""><span style="clear:none; font-weight:bold; margin:0 auto; display:block; text-align:center; width:280px;"> </span></span> </td> </tr> <tr> <td id="cell.0.1" class="mrgridcategorytext" style=" text-align: left; vertical-align: middle; background-color: #d8d8d8; width: 430px; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"><span class="mrquestiontext" style=" font-size: 10pt;">1. principals/partners</span> </td> <td id="cell.1.1" style=" text-align: center; vertical-align: middle; background-color: #d8d8d8; width: auto; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"> <input type="text" name="_qp1_qgrq17a_qprincipals__partners_qq17a" id="_q33_q0_q0" class="mredit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value=""> </td> </tr> <tr> <td id="cell.0.2" class="mrgridcategorytext" style=" text-align: left; vertical-align: middle; background-color: #f8f8f8; width: 430px; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"><span class="mrquestiontext" style=" font-size: 10pt;">2. project managers/directors</span> </td> <td id="cell.1.2" style=" text-align: center; vertical-align: middle; background-color: #f8f8f8; width: auto; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"> <input type="text" name="_qp1_qgrq17a_qproject__managers_qq17a" id="_q33_q1_q0" class="mredit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value=""> </td> </tr> <tr> <td id="cell.0.3" class="mrgridcategorytext" style=" text-align: left; vertical-align: middle; background-color: #d8d8d8; width: 430px; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"><span class="mrquestiontext" style=" font-size: 10pt;">3. designers</span> </td> <td id="cell.1.3" style=" text-align: center; vertical-align: middle; background-color: #d8d8d8; width: auto; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"> <input type="text" name="_qp1_qgrq17a_qdesigners_qq17a" id="_q33_q2_q0" class="mredit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value=""> </td> </tr> <tr> <td id="cell.0.4" class="mrgridcategorytext" style=" text-align: left; vertical-align: middle; background-color: #f8f8f8; width: 430px; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"><span class="mrquestiontext" style=" font-size: 10pt;">4. other interior design staff</span> </td> <td id="cell.1.4" style=" text-align: center; vertical-align: middle; background-color: #f8f8f8; width: auto; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"> <input type="text" name="_qp1_qgrq17a_qother__design__staff_qq17a" id="_q33_q3_q0" class="mredit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value=""> </td> </tr> <tr> <td id="cell.0.6a" class="mrgridcategorytext" style="text-align: left; vertical-align: middle; background-color: #d8d8d8; width: 430px; border: 1px solid black;"><span class="rrsumcoltotal mrquestiontextbold" style="float:right;">a. total # of interior design staff:</span> </td> <td id="cell.1.6a" style="text-align: center; vertical-align: middle; background-color: #d8d8d8; width: auto; border: 1px solid black;"> <span id="customsum" style="color: green; background-color: rgb(229, 242, 251);">0</span> <div style="display:inline-block; clear:none; width:15px;" id="topfour"> </div> </td> </tr> <tr> <td id="cell.0.5" class="mrgridcategorytext" style="text-align: left; vertical-align: middle; width: 430px; border: 1px solid black; background-color: rgb(248, 248, 248);"><span class="mrquestiontext" style=" font-size: 10pt;"><b style="float:right;">b. total # of non-interior design staff:</b></span> </td> <td id="cell.1.5" style="text-align: center; vertical-align: middle; width: auto; border: 1px solid black; background-color: rgb(248, 248, 248);"> <input type="text" name="_qp1_qgrq17a_qnon__interior_qq17a" id="_q33_q4_q0" class="mredit" autocomplete="on" style=" width: 215px;" maxlength="10" value=""> </td> </tr> <tr> <td id="cell.0.5" class="mrgridcategorytext" style=" text-align: left; vertical-align: middle; background-color: #d8d8d8; width: 430px; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"><span class="rrsumcoltotal mrquestiontextbold" style="float: right;">c. total # of employees in firm:</span> </td> <td id="cell.1.5" style=" text-align: center; vertical-align: middle; background-color: #d8d8d8; width: auto; border-color: black; border-width: 1px; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid;"><span id="sprunningtotal_12_1" class="rrrunningtotal" data-tableordinal="12" data-columnordinal="1">0</span> </td> </tr> </tbody> </table> </div> javascript + jquery:
$('#customsum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last').addclass('rowa').css("border", "solid 1px black"); var checkvalid = setinterval( function() { $("input.rowa").each(function(i){ var totals = [0,0,0,0]; var total = 0; if($('input.complete').length == $('input.rowa').length) { $('#topfour').html('<img src="http://www.alexldixon.com/images/checkmark.png">'); $("input.rowa").each(function(i){ $(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addclass("complete"); items = $('input.rowa:eq(' + + ')').val(); if(!items.match(/^\d+$/)) { items = 0; $('.rowa').on("keypress change", function(evt) { $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeclass("complete"); }); } items = parseint($('input.rowa:eq(' + + ')').val(), 10); totals.push(items); }); total = 0; //add sum logic here: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (tyler carter) $.each(totals,function() { total += this; }); $('#customsum').text(total); } else { $('#topfour').html(''); totals = [0,0,0,0]; $("input.rowa").each(function(i){ var items = $('input.rowa:eq(' + + ')').val(); if(!items.match(/^\d+$/)) //regular expressions source: http://www.regexlib.com/retester.aspx?regexp_id=669 { items = 0; $('.rowa').on("keypress change", function(evt) { $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeclass("complete"); }); } else { items = parseint($('input.rowa:eq(' + + ')').val(), 10); $(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addclass("complete"); } totals.push(items); }); total = 0; //add sum logic here: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (tyler carter) $.each(totals,function() { total += this; }); $('#customsum').text(total); } }); }, 120); $('#customsum').closest('table').find("td:contains('c.'), tr td:contains('b.')").closest('tr').toggle(); css:
.complete { border: solid 1px green; } .rowa { background-color: #ccf3ff !important; height: 30px; text-align: center; font-size: 17px; color: green; } lastly, in addition issue stemming parseint() utilization, jsfiddle says needed move totals, , total variables point can both accessed safely , of problems started. say, if re-declare variables inside respective $.each() statements , if() conditionals, works fine bad practice, supposedly.
the main problem way setinterval being used. not checks input every 120 ms, rebinds keypress/change events on false input each time , on top of uses same loop within looping, implementing every action multiple times. performance thing within interval jquery objects have searched each time in dom. example, each time $("input.rowa") used dom searched inputs of class rowa, whereas if put in variable beforehand, buffered values can reused.
instead of interval it's best have single change/keyup event checks , reuse same code on page load check preloaded values. if despite all, still need interval (although triggers known when check has called), cleaned code should prove more resource friendly (but improved further if setinterval really necessary)
var $inputboxes = $('#customsum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last'); $inputboxes.addclass('rowa'); //or in case former code test scenario, use var $inputboxes = $('input.rowa'); var $custsum = $('#customsum'), $chk = $('#topfour').html('<img src="http://www.alexldixon.com/images/checkmark.png">').hide(); //add check once, hidden (can done in hard coded in html instead) $inputboxes.on("keyup change propertychange input paste", function(e) { setinput(this); checkinputs(); }); function setinput(inputbox){ var $input = $(inputbox), val = $input.val(), isvalid = val.length > 0 && isfinite(val) && val > 0; $input.data('valid', isvalid).data('number', isvalid ? parseint(val) : null); //instead of array, reuse jquery elements $input.toggleclass('complete', isvalid).toggleclass('error', val.length > 0 && !isvalid); } function setallinputs(){ $inputboxes.each(function(){setinput(this);}); checkinputs(); } function checkinputs(){ var total = 0, validcount = 0; $inputboxes.each(function(){ if($(this).data('valid')){ validcount++; total+= $(this).data('number'); } }); $custsum.text(total); $chk.toggle(validcount === $inputboxes.length); //show 'check' image if input valid } setallinputs(); //call on page load, in case of pre entered values. 
Comments
Post a Comment