javascript - Adding table cells to end of row using jquery based on radio button selections -
i have (rather large) form constructing. within form there several radio button groups (yes/no selections). after reading through several related posts here on stackoverflow have been able wright jquery function validate radio buttons clicked, have been able make give generic alert(). happen when "no" radio selected jquery add new cell same table row message "this must completed". question posted systemerror "add table cell existing table row, jquery" appears give fix issue if wright jquery function each of radio buttons. question is, how accomplish same goal using 1 function of radio buttons? here form stands right attempt add cell, adds cell between radio button , label it.
// javascript document "use strict"; var myvar = setinterval(mytimer, 1000); function mytimer() { var d = new date(); var dd = d.getday(); var day1; var day2; var d_d = d.getmonth(); switch (d_d) { case 0: day2 = "january"; break; case 1: day2 = "february"; break; case 2: day2 = "march"; break; case 3: day2 = "april"; break; case 4: day2 = "may"; break; case 5: day2 = "june"; break; case 6: day2 = "july"; break; case 7: day2 = "august"; break; case 8: day2 = "september"; break; case 9: day2 = "october"; break; case 10: day2 = "novmber"; break; case 11: day2 = "december"; break; } switch (dd) { case 0: day1 = "sunday"; break; case 1: day1 = "monday"; break; case 2: day1 = "tuesday"; break; case 3: day1 = "wednesday"; break; case 4: day1 = "thursday"; break; case 5: day1 = "friday"; break; case 6: day1 = "saterday"; break; } document.getelementbyid("day").value = day1; document.getelementbyid("time").value = d.tolocaletimestring(); document.getelementbyid("date").value = day2 + " " + d.getdate(); } function coldvalidate(elem) { var x, text; x = +elem.value; if (isnan(x) || x < 33 || x > 40) { text = "temp out of tolerance"; } else { text = " "; } elem.parentnode.nextelementsibling.innerhtml = text; } function freezvalidate(elem) { var x, text; x = +elem.value; if (isnan(x) || x < -10 || x > 10) { text = "temp out of tolerance"; } else { text = " "; } elem.parentnode.nextelementsibling.innerhtml = text; } function hotvalidate(elem) { var x, text; x = +elem.value; if (isnan(x) || x < 165) { text = "temp out of tolerance"; } else { text = " "; } elem.parentnode.nextelementsibling.innerhtml = text; } $(document).ready(function() { $("#storenumber").click(function salad() { var storenumber = $("#storenumber").val(); switch (storenumber) { case "011169": case "008181": $("#frig1, #frig2, #frig3, #saladbar, #barcheese").removeclass("hide"); break; case "010576": case "010324": case "008615": case "009150": case "014640": case "010684": case "011168": case "014215": case "008179": case "008339": case "008668": case "031574": $("#frig1, #frig2, #frig3, #saladbar, #barcheese").addclass("hide"); break; } }); $('input[type=radio]').on("change", function() { if ($(this).prop("value") === "false") { $(this).prepend("<td>this needs completed</td>"); } }); });/* css document */ header { text-align: center; } td { border: solid thin #000000; background-color: #ff0000; } th { border: solid thin #000000; width: 300px; background-color: #ff0000; } .required { color: #fff500; } .left { text-align: right; width: 480px; } .noborder { border: none; background-color: #061bff; color: #ffffff; } body { background-color: #061bff; } .nobordererror { border: none; background-color: #061bff; color: #ffffff; } .hide { display: none; }<body> <form> <section> <table cellspacing="0px"> <tr> <th colspan="2" class="noborder"> <h1>food safety checklist</h1> </th> </tr> <tr> <th colspan="2" class="noborder"><span class="required">*</span>=required feilds</th> </tr> <!-- identification information section --> <tr> <td class="left"><span class="required">*</span>store number:</td> <td> <select id="storenumber" name="storenumber" required title="please select store id number"> <option value="">select store number</option> <option value="010576">010576</option> <option value="011169">011169</option> <option value="008181">008181</option> <option value="010324">010324</option> <option value="008615">008615</option> <option value="009150">009150</option> <option value="014640">014640</option> <option value="010684">010684</option> <option value="011168">011168</option> <option value="014215">014215</option> <option value="008179">008179</option> <option value="008339">008339</option> <option value="008668">008668</option> <option value="031574">031574</option> </select> </td> </tr> <tr> <td class="left"><span class="required">*</span>day:</td> <td> <input type="text" size="10" name="day" id="day" title="enter current day" required> </td> </tr> <tr> <td class="left"><span class="required">*</span>date:</td> <td> <input type="text" size="9" name="date" id="date" required title="please enter current date"> </td> </tr> <tr> <td class="left"><span class="required">*</span>time:</td> <td> <input type="text" size="6" name="time" id="time" title="enter current time" required> </td> </tr> <tr> <td class="left"><span class="required">*</span>initials:</td> <td> <input name="initial" type="text" required id="initial" maxlength="2" size="3" title="enter user id"> </td> </tr> <tr> <td colspan="2" class="noborder"> </td> </tr> <!-- thermometer calibration --> <tr> <th colspan="2" class="noborder">thermometer</th> </tr> <tr> <td class="left"><span class="required">*</span>thermometers calibrated:</td> <td> <label> <input name="cal" type="radio" required id="cal_0" value="yes" onchange="yesno(this)">yes</label> <label> <input name="cal" type="radio" required id="cal_1" value="no" onchange="yesno(this)">no</label> </td> <td class="noborder"></td> </tr> <tr> <td colspan="2" class="noborder"> </td> </tr> <!-- cold temps --> <tr> <th colspan="2" class="noborder">cold temperature managment</th> </tr> <tr> <td class="left"><span class="required">*</span>maketable air temp (bottom):</td> <td> <input name="bottomair" type="text" required id="bottomair" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>maketable air temp (top):</td> <td> <input name="topair" type="text" required id="topair" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>maketable meat temp:</td> <td> <input name="meat" type="text" required id="meat" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>maketable cheese temp:</td> <td> <input name="cheese" type="text" required id="cheese" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>walk in cooler temp:</td> <td> <input name="walkin" type="text" required id="walkin" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr id="frig1" class="hide"> <td class="left"><span class="required">*</span>refrigeration unit #1:</td> <td> <input name="refrig1" type="text" required id="refrig1" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr id="frig2" class="hide"> <td class="left"><span class="required">*</span>refrigeration unit #2:</td> <td> <input name="refrig2" type="text" required id="refrig2" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr id="frig3" class="hide"> <td class="left"><span class="required">*</span>refrigeration unit #3:</td> <td> <input name="refrig3" type="text" required id="refrig3" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>freezer unit #1:</td> <td> <input name="freez1" type="text" required id="freez1" size="3" onchange="freezvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>freezer unit #2:</td> <td> <input name="freez2" type="text" required id="freez2" size="3" onchange="freezvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>freezer unit #3:</td> <td> <input name="freez3" type="text" required id="freez3" size="3" onchange="freezvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr id="saladbar" class="hide"> <td class="left"><span class="required">*</span>salad bar air temp:</td> <td> <input name="saladair" type="text" required id="saladair" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr id="barcheese" class="hide"> <td class="left"><span class="required">*</span>salad bar cheese temp:</td> <td> <input name="saladcheese" type="text" required id="saladcheese" size="3" onchange="coldvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="noborder" colspan="2"> </td> </tr> <!-- hot temp section --> <tr> <th class="noborder" colspan="2">hot temperature management</th> </tr> <tr> <td class="left"><span class="required">*</span>wing temp:</td> <td> <input name="wing" type="text" required id="wing" size="3" onchange="hotvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>meat sauce/soups temp:</td> <td> <input name="sauce" type="text" required id="sauce" size="3" onchange="hotvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>hot hold timing system:</td> <td> <label> <input name="hothold" type="radio" required id="hothold_0" value="yes">yes</label> <label> <input name="hothold" type="radio" required id="hothold_1" value="no">no</label> </td> </tr> <tr> <td class="noborder" colspan="2"> </td> </tr> <!-- oven managment --> <tr> <th class="noborder" colspan="2">oven management</th> </tr> <tr> <td class="left"><span class="required">*</span>pizza tepmp:</td> <td> <input name="pizza" type="text" required id="pizza" size="3" onchange="hotvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="left"><span class="required">*</span>pasta temp:</td> <td> <input name="pasta" type="text" required id="pasta" size="3" onchange="hotvalidate(this)"> </td> <td class="noborder"></td> </tr> <tr> <td class="noborder" colspan="2"> </td> </tr> <!-- oven speed , temp needsto done once week --> <tr> <th class="noborder" colspan="2">oven temperatures , speeds</th> </tr> <tr> <td class="left">top oven:</td> <td> temp: <input name="toptemp" type="text" id="toptemp" maxlength="3" size="4"> <br/>speed: <input name="topspeed" type="text" id="topspeed" maxlength="3" size="4"> </td> </tr> <tr> <td class="left">center oven:</td> <td> temp: <input name="centertemp" type="text" id="centertemp" maxlength="3" size="4"> <br/>speed: <input name="centerspeed" type="text" id="centerspeed" maxlength="3" size="4"> </td> </tr> <tr> <td class="left">bottom oven:</td> <td> temp: <input name="bottomtemp" type="text" id="bottomtemp" maxlength="3" size="4"> <br/>speed: <input name="bottomspeed" type="text" id="bottomspeed" maxlength="3" size="4"> </td> </tr> <tr> <td class="noborder" colspan="2"> </td> </tr> <!-- yes/no section of checklist food handling section --> <tr> <th class="noborder" colspan="2">food hangling</th> </tr> <tr> <td class="left"><span class="required">*</span>only approved ingredients used:</td> <td> <label> <input name="approve" type="radio" required value="true">yes</label> <label> <input name="approve" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>no spoiled/expired food present:</td> <td> <label> <input name="expired" type="radio" required value="true">yes</label> <label> <input name="expired" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>wing street raw zone process followed:</td> <td> <label> <input name="raw" type="radio" required value="true">yes</label> <label> <input name="raw" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>foodis correcctly date/labeled & fifo followed:</td> <td> <label> <input name="fifo" type="radio" required value="true">yes</label> <label> <input name="fifo" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>whole produce washed:</td> <td> <label> <input name="produce" type="radio" required value="true">yes</label> <label> <input name="produce" type="radio" required value="false">no</label> </td> </tr> <!-- sanitation section --> <tr> <td class="left"><span class="required">*</span>sanitizer @ correct ppm:</td> <td> <label> <input name="ppm" type="radio" required value="true">yes</label> <label> <input name="ppm" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>hot water ≥ 120°f @ 3-comp. sink:</td> <td> <label> <input name="hotwater" type="radio" required value="true">yes</label> <label> <input name="hotwater" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>dishwasher has soap & sanitizer or ≥ 180°f water:</td> <td> <label> <input name="soap" type="radio" required value="true">yes</label> <label> <input name="soap" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>chemicals stored correctly:</td> <td> <label> <input name="chem" type="radio" required value="true">yes</label> <label> <input name="chem" type="radio" required value="false">no</label> </td> </tr> <!-- health & hygiene section --> <tr> <th class="left"><span class="required">*</span>no ill team members working:</th> <td> <label> <input name="illteam" type="radio" required value="true">yes</label> <label> <input name="illteam" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>correct hand washing procedures followed:</td> <td> <label> <input name="wash" type="radio" required value="true">yes</label> <label> <input name="wash" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>hand sinks (including restrooms) stocked, accessible & used properly:</td> <td> <label> <input name="sinks" type="radio" required value="true">yes</label> <label> <input name="sinks" type="radio" required value="false">no</label> </td> </tr> <tr> <td class="left"><span class="required">*</span>hair restraints worn correctly:</td> <td> <label> <input name="hair" type="radio" required value="true">yes</label> <label> <input name="hair" type="radio" required value="false">no</label> </td> </tr> <!-- pest management section --> <tr> <td class="left"><span class="required">*</span>pest infestation or activity not present , traps placed correctly:</td> <td> <label> <input name="pest" type="radio" required value="true">yes</label> <label> <input name="pest" type="radio" required value="false">no</label> </td> </tr> </table> </section> <button type="submit">submit</button> </form> </body>any appreciated.
you have couple of things below. check demo - fiddle
remove
onchange="yesno(this)"handler html markup, because attaching general handler.change
if ($(this).prop("value") === "false") {if ($(this).prop("value") === "no") {because there nofalsevalues in radios.prepend new
tdnot input checkbox do,tdholds checkbox:$(this).closest('td').prepend("<td>this needs completed</td>");
so general handler like:
$('input[type=radio]').on("change", function() { if ($(this).prop("value") === "no") { $(this).closest('td').prepend("<td>this needs completed</td>"); } }); 
Comments
Post a Comment