javascript - jQuery: Check value of each visible textbox -
ok, finding title question harder question itself.
i have created error handler on page have when posting database. checks if input boxes empty , doesn't run ajax code post form, , instead says error. looks this.
$(document).ready(function () { $(".addbtn").click(function () { if ($("input[name=kg]").val() != "" && $("input[name=sett]").val() != "" && $("input[name=rep]").val() != "" && $("input[name=date]").val() != "") { mysubmit($(this)) // calls ajax function , posts. } else { $("#errorfieldreqmsg").fadein('slow'); settimeout(function () { $("#errorfieldreqmsg").fadeout('slow'); }, 2000); } }); }); so code checks 4 of input boxes, however, on specific radiobutton click, 1 more input box appear, , i'm wondering if there neat solution check fifth input when radio clicked.
check fiddle out better understanding on mean, i'm refering radiobutton secondary makes input box daily max appear.
and code specific radio following:
<div class="exercisetypediv"> <input type="radio" name="type" id="typ4" value="4" class="radioselectleft"> <label class="radiolabel" for="typ4">primary</label> <input type="radio" name="type" id="typ5" value="5" class="radioselect" /> <label class="radiolabel" for="typ5">secondary</label> <input type="radio" name="type" id="typ6" value="6" class="radioselect" /> <label class="radiolabel" for="typ6">assistance</label> </div> $(function() { $("input[type='radio']").change(function() { if ($(this).val() == 1 && this.checked) { $("#exervarinames").show(); $("#exervarinameb").hide(); $("#exervarinamed").hide(); $("#exervarinamea").hide(); } else if ($(this).val() == 2 && this.checked){ $("#exervarinames").hide(); $("#exervarinameb").show(); $("#exervarinamed").hide(); $("#exervarinamea").hide(); } else if ($(this).val() == 3 && this.checked) { $("#exervarinames").hide(); $("#exervarinameb").hide(); $("#exervarinamed").show(); $("#exervarinamea").hide(); } }); $("input[name='type']").click(function(){ var value=$(this).val(); switch(value){ case '4': $("input[name='exercise']").each(function(){ $(this).closest('div').show(); }); $('#dropdown').hide(); $('#exervarinamea').hide(); $("#dailypr").hide(); $(".movementtypediv").show(); break; case '5': $("input[name='exercise']").each(function(){ $(this).closest('div').show(); }); $('#dropdown').show(); $('#exervarinamea').hide(); $("#dailypr").show(); $(".movementtypediv").show(); break; case '6': $("input[name='exercise']").each(function(){ $(this).closest('div').hide(); }); $('#dropdown').hide(); $('#exervarinamea').show(); $("#dailypr").hide(); $(".movementtypediv").hide(); break; } }); //remember radiobutton last clicked , keeps way //after page refresh or form post. $('input[type=radio]').each(function() { var state = json.parse( localstorage.getitem('radio_' + this.id) ); if (state) this.checked = state.checked; $(this).trigger('change'); }); $("input[name='type']").each(function(){ var state=json.parse(localstorage.getitem('radio_val'+this.value)); if(state) this.checked=state.checked; $(this).trigger('change'); }); $(window).bind('unload', function() { $('input[type=radio]').each(function() { localstorage.setitem('radio_' + this.id, json.stringify({checked: this.checked})); }); $("input[name='type']").each(function(){ localstorage.setitem('radio_val'+this.value,json.stringify({checked:this.checked})); }); }); }); $(document).ready(function() { $('input[type=radio]').each(function() { radio_val = json.parse(localstorage.getitem('radio_'+this.id)); if (radio_val.checked) { $(this).trigger('click'); } }); });html { background-color: #e2e2e2; margin: 0; padding: 0; } body { background-color: white; color: #333; font-size: .85em; font-family: "segoe ui", verdana, helvetica, sans-serif; margin: 0; padding: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- crashes chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- apparently margin still there though it's hidden */ } { text-decoration: none; color: black; } .validation-summary-errors { font-weight:bold; color:red; font-size: 11pt; } header, footer, hgroup, nav, section { display: block; } mark { background-color: #a6dbed; padding-left: 5px; padding-right: 5px; } .bold { font-weight: bold; } .bolder { font-weight: bolder; } .float-left { float: left; } .float-right { float: right; } .clear-fix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; } /*viewworkout page*/ .squatcolor { color: #8c479a; font-weight: bold; } .benchcolor { color: #2482c5; font-weight: bold; } .deadliftcolor { color: #f96716; font-weight: bold; } .blackcolor { color: #000; font-weight: bold; } .whitecolor { color: #fff; font-weight: bold; } .showdate { text-transform: capitalize; font-weight: bold; font-size: 18px; } .capitalfirst { text-transform: capitalize; } .metricdatetextbox { width: 150px; padding: 11px; font-size: 16px; border: 1px solid white; color: transparent; text-shadow: 0 0 0 black; font-family: verdana; font-weight: 500; background: #fff center right 10px no-repeat url('images/pil.jpg'); background-size: 12px 8px; cursor: pointer; user-select: none; margin: 0; vertical-align: middle; box-sizing:border-box; } .viewworkoutdatebox { width: 150px; padding: 11px; font-size: 16px; border: 1px solid white; font-family: verdana; font-weight: 500; background: #fff center right 10px no-repeat url('images/pil.jpg'); background-size: 12px 8px; cursor: pointer; user-select: none; margin: 0; vertical-align: middle; box-sizing:border-box; } ::-webkit-input-placeholder { color: grey; font-weight: 500; font-family: verdana; } /*day, week, month dropdown selector.*/ .dwmviewselect, .baseliftselect, .exervarinameselect { height: 43px; font-weight: bold; border: 1px solid white; margin: auto; vertical-align: middle; cursor: pointer; background: #fff center right 10px no-repeat url('images/pil.jpg'); background-size: 12px 8px; -webkit-appearance:none; padding-left: 10px; padding-right: 28px; box-sizing: border-box; font-size: 14px; } /*submit button metrics show charts.*/ .showdatebtn { width: auto; padding: 10px; text-align: center; height: 43px; vertical-align: middle; margin: 0; cursor: pointer; border: 1px solid white; color: black; font-weight: 600; } .showdatebtn:focus { outline: none; border: 1px solid white; } .baseliftselect:focus, .dwmviewselect:focus { outline: none; border: 1px solid white; } /*reportion period title text*/ .rptxt { vertical-align: middle; margin-right: 5px; } .rptxtto { margin: 0px 5px 0px 5px; } .metricstitle { font-weight: 600; text-transform: uppercase; font-family: tahoma; } #chart_div { width: 100%; height: 500px; border-bottom: 5px solid #898989; } .reppiechart { width: 100%; height: 500px; border-bottom: 5px solid #898989; } .topmargin { margin-top: 15px; } /*div hold displayed charts coming ajax calls*/ #here { margin-top: 3px; } .testthis { border: none; width: 100px; height: 33px; vertical-align: middle; text-align:center; color: transparent; text-shadow: 0 0 0 black; cursor:pointer; user-select: none; } input:hover::-webkit-input-placeholder { color: red; } input:focus::-webkit-input-placeholder { color: red; } .holdmetriclinks { display: inline-block; width: 33%; height: 180px; line-height: 180px; /* needs same height. */ background-color: white; text-align:center; font-size: 20px; margin-bottom: 10px; border-bottom: 5px solid #898989; } .holdmetriclinkboxes { width: 100%; text-align:center; /* centers divs inside div. */ } .holdliftmenu { margin-top: 10px; background-color: white; padding: 10px; } .holdliftmenuul, .holdtimemenuul { margin:0; } .holdtimemenuul { float:right; position:relative; right: 5px; top: -24px; } .holdliftmenuli, .holdtimemenuli { display:inline-block; } .holdliftmenua, .holdtimemenua { background-color:white; padding: 10px; cursor:pointer; color: black; font-weight:700; font-size: 18px; text-align:center; white-space: nowrap; } .current { border-bottom: 3px solid red; } .holdliftmenua:hover { border-bottom: 3px solid red; } .holdtimemenua:hover { border-bottom: 3px solid red; } .hidethis { display: none; } /*insert workout click button (submit ajax), on .insertworkout.*/ .addbtn { padding: 17px 20px 17px 20px; cursor:pointer; width:100%; display: block; box-sizing:border-box; margin: 0px; text-align: center; font-size: 25px; font-weight: bolder; text-transform:uppercase; background-color: #6ebf4a; color: white; } .addbtn:hover { background-color: #404040; } /* div message shown on ajax call success. */ #successmsg { position:fixed; top: 25%; padding: 15px; width: 200px; text-align: center; left: 41.5%; border-radius: 40px; font-size: 25px; font-weight: bolder; background-color: #6ebf4a; color: white; text-transform:uppercase; display: none; } /* div message shown on ajax call failure/error. */ #errormsg { position:fixed; top: 25%; padding: 15px; width: 200px; text-align: center; left: 41.5%; border-radius: 40px; font-size: 25px; font-weight: bolder; background-color: #ff4343; color: white; text-transform:uppercase; display: none; } #errorfieldreqmsg { position:fixed; top: 25%; padding: 15px; width: 300px; text-align: center; left: 38%; border-radius: 40px; font-size: 25px; font-weight: bolder; background-color: #ff4343; color: white; text-transform:uppercase; display: none; } .centerthis { margin:auto; background-color: grey; } .aligncenterthis { text-align:center; } /*radios on insertworkout*/ .radioselect { width: 20px; vertical-align: middle; height: 20px; margin: 0px 3px 0px 15px; cursor:pointer; } .radioselectleft { width: 20px; vertical-align: middle; height: 20px; margin: 0px 3px 0px 0px; cursor:pointer; } /*labels in insertworkout*/ .radiolabel { font-weight: bold; vertical-align:sub; font-size: 18px; cursor: pointer; } /*univeral use*/ .inlineblock { display:inline-block; } /*holds content center on insertworkout page.*/ .insertworkoutformholder { width: 500px; margin:auto; } /*holds 3 radios , labels on insertworkout*/ .exercisetypediv, .movementtypediv { background-color: white; padding: 30px 15px 30px 10px; border-bottom: 3px solid #898989; } /*********************** view workout page. ****************************/ .vwform { /*margin-bottom: 10px;*/ } .vwholddatestuff { width:100%; background-color: #6fbf4a; padding:20px; box-sizing:border-box; margin-bottom: 10px; } .vwholdliftinfo { } .vwliftvaritdiv { padding: 20px; font-size: 20px; margin-bottom: 7px; cursor: pointer; background: #000 center left 20px no-repeat url('images/minusicon.png'); background-size: 30px 30px; } .plussign { background: #000 center left 20px no-repeat url('images/plusicon.png'); background-size: 30px 30px; } .minussign { } .liftvarititle { margin-left: 40px; } .vwsetrepholder { display: none; padding: 5px 20px 5px 20px; margin: -3px 0px 7px 10px; border: 1px solid #ebebeb; background-color: white; } .vwvolumetable { width: 100%; margin: 0px; box-sizing:border-box; } .vwvolumettd { padding: 15px 5px 15px 20px; width: 30px; margin: 0px; } .vwvolumettdfirst { padding: 15px 5px 15px 0px; width: 30px; margin: 0px; } .vwvolumettdspecial { margin: 0px; padding: 0px; width: 20px } .vwvolumettdveryspecial { width: 50px; padding-right: 10px; } .worksmaybe { border-top: 1px solid #ebebeb; width: 100%; } .vwspacething { height: 10px; background-color: red; width: 100%; } .vwcategoryholder { border: 1px solid #e4e5e6; border-bottom: 4px solid #e4e5e6; background-color: white; padding: 10px; width: 300px; display: table-cell; margin-bottom: 15px; } .vwcategoryholderheader { border-bottom: 1px solid #e4e5e6; background-color: white; padding-bottom: 0px; } .vwcatergorytitle { margin: 15px 0 25px 0; padding: 0; } .vwverticalspace { display: table-cell; width: 5px; background-color: #f5f5f5; } .vwbigcathold { display: table-row; } .huge { display: table; width: 100%; } .vwpeaktable { width: 100%; } .vwfirsttd { cursor: context-menu; } .vwlasttd { width: 50px; border-top: 10px solid white; border-bottom: 10px solid white; border-left: 10px solid white; text-align:center; color: white; cursor: context-menu; padding: 10px 20px 10px 20px; font-weight: bold; font-size: 18px; } .tableline { padding: 0; height: 1px; background-color: #e4e5e6; } .tablespace { padding: 0; height: 5px; } .bgsquatcolor { background-color: #8c479a; } .bgbenchcolor { background-color: #2482c5; } .bgdeadliftcolor { background-color: #f96716; } .bgblackcolor { background-color: black; } .bgassistancecolor { background-color: #9b9b9b; } #piechartt { margin-top: 5px; width: 300px; } /****************************************************/ /*************** personal record page ***************/ /****************************************************/ .prtablecell { padding: 10px; border:1px solid red; width: 80px; text-align:center; } .prexervarinametd { width: 130px; } /*********************************************/ .workoutvariselect { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; font-family: verdana; font-weight: 500; background: #fff center right 10px no-repeat url('images/pil.jpg'); background-size: 12px 8px; cursor: pointer; user-select: none; margin: 0; } .insertworkoutboxes, .loginboxes { border: 1px solid white; width: 100%; padding: 20px 11px 20px 11px; font-size: 18px; box-sizing:border-box; margin: 0px 0px 3px 0px; } .loginboxes { border: 1px solid #efefef; } .squat { color: #8c479a; } .benchpress { color: #2482c5; } .deadlift { color: #f96716; } .fsize18 { font-size: 18px; } .fsize16 { font-size: 16px; } .fsize14 { font-size: 14px; } .fsize12 { font-size: 12px; } /* main layout ----------------------------------------------------------*/ .content-wrapper { margin: 0 auto; max-width: 960px; background-color: #f5f5f5; } #body { background-color: #f5f5f5; clear: both; padding-bottom: 35px; /*width: 1000px;*/ width: 80%; margin: auto; padding: 20px; } .main-content { background: url("../images/accent.png") no-repeat; padding-left: 10px; padding-top: 30px; } .featured + .main-content { background: url("../images/heroaccent.png") no-repeat; } /*header .content-wrapper { padding-top: 20px; }*/ footer { clear: both; background-color: #e2e2e2; font-size: .8em; height: 100px; } /* site title ----------------------------------------------------------*/ .site-title { color: #c8c8c8; font-family: rockwell, consolas, "courier new", courier, monospace; font-size: 2.3em; margin: 0; } .site-title a, .site-title a:hover, .site-title a:active { background: none; color: #c8c8c8; outline: none; text-decoration: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="centerthis"> <form method="post" action="~/ajaxcalls/inswrkoajax.cshtml"> <div class="insertworkoutformholder"> <div class="exercisetypediv"> <input type="radio" name="type" id="typ4" value="4" class="radioselectleft"> <label class="radiolabel" for="typ4">primary</label> <input type="radio" name="type" id="typ5" value="5" class="radioselect" /> <label class="radiolabel" for="typ5">secondary</label> <input type="radio" name="type" id="typ6" value="6" class="radioselect" /> <label class="radiolabel" for="typ6">assistance</label> </div> <div class="movementtypediv hidethis"> <div class="hidethis inlineblock"> <input class="radioselectleft" type="radio" name="exercise" id="hej1" value="1" /> <label class="radiolabel squat" for="hej1">squat</label> </div> <div class="hidethis inlineblock"> <input class="radioselect" type="radio" name="exercise" id="hej2" value="2" /> <label class="radiolabel benchpress" for="hej2">benchpress</label> </div> <div class="hidethis inlineblock"> <input class="radioselect" type="radio" name="exercise" id="hej3" value="3" /> <label class="radiolabel deadlift" for="hej3">deadlift</label> </div> </div> <div id="dropdown"> <select id="exervarinames" name="exervarinames" class="hidethis workoutvariselect insertworkoutboxes"> <option value="">squat</option> } </select> <select id="exervarinameb" name="exervarinameb" class="hidethis workoutvariselect insertworkoutboxes"> <option selected=@(request.form["exervarinameb"] == get.exervariname) value="">benchpress</option> } </select> <select id="exervarinamed" name="exervarinamed" class="hidethis workoutvariselect insertworkoutboxes"> <option value="">deadlift</option> } </select> </div> <select id="exervarinamea" name="exervarinamea" class="hidethis workoutvariselect insertworkoutboxes"> <option value="">assistance</option> } </select> <!-- textbox changing daily max on secondary exercises. --> <input id="dailypr" placeholder="daily max" name="dailypr" type="text" size="50" value="" class=" hidethis insertworkoutboxes" /> <!-- textbox amount of weight. --> <input placeholder="weight" name="kg" type="text" size="50" value="" class="insertworkoutboxes" /> <!-- textbox number of sets. --> <input placeholder="sets" name="sett" type="number" size="50" value="" class="insertworkoutboxes" /> <!-- textbox number of reps. --> <input placeholder="reps" name="rep" type="number" size="50" value="" class="insertworkoutboxes" /> <!-- textbox date of workout. --> <input placeholder="date" type="text" spellcheck="false" autocomplete="off" class="datepicker workoutvariselect capitalfirst insertworkoutboxes" name="date" value="" readonly="readonly" /> <!-- form submit button. --> <a class="addbtn">save</a> </div> </form> </div>
instead of hard-coding input names, use more general selector , loop on them. specify :visible check ones showing.
$(".addbtn").click(function() { var valid = true; $(".insertworkoutboxes:visible").each(function() { if (this.value == '') { valid = false; return false; } }); if (valid) { mysubmit($(this)); } else { $("#errorfieldreqmsg").fadein('slow'); settimeout(function () { $("#errorfieldreqmsg").fadeout('slow'); }, 2000); } });
Comments
Post a Comment