We Keep Coding

Get individual value from radio button on array use JQuery

now im doing some PHP project combine with JQuery for radio button. Im new for JQuery code. now i making array for radio button. i want to get individual value when i click one of the radio button.
here is the code that i trying. before that. i make a sample on this link https://repl.it/#ferdinandgush/get-value-radio-button. just press RUN button on the top then you able to test it.
html
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>
JS
$(function() {
$('.radioDeal').on('input', function(){
console.log($(this).attr("name"));
var name = $(this).attr("name");
console.log($('input[name="+ name +"]:checked').val());
});
});
so what im focusing is, i able to get individual attribute name when i click on of the radio button. from that attribute name, i want to get the value. but not work.
do i able to do that?.
please help

You almost have it, you can get the value like this:
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
Working example:
$(function() {
$('.radioDeal').on('input', function(){
var name = $(this).attr("name");
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
console.log(name+' = '+checkedvalue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>

Since the change event triggers when state changes from not checked to checked it is therefore the ideal event to use as the this refers to the radio just checked:
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
DEMO
$(function() {
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>

Adding table cells to end of row using jquery based on radio button selections

I have a (rather large) form which I am constructing. Within the form there are several radio button groups (Yes/No selections). After reading through several related posts here on StackOverflow I have been able to wright a jQuery function which will validate the radio buttons as they are clicked, however I have only been able to make it give a generic alert(). What I would like to happen when the "No" radio is selected is for the jQuery to add a new cell to the same table row with a message "This must be completed". The question posted by SystemError "Add table cell to existing table row, jQuery" appears to give a good fix to my issue if I were to wright a jQuery function for each of the radio buttons. My question is, how would I accomplish this same goal using one function for all of the radio buttons? Here is my form as it stands right now with my attempt to add the cell, which adds the cell between the radio button and the label for 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 to be 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 your 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 and temp only needsto be done once a week -->
<tr>
<th class="noborder" colspan="2">Oven Temperatures and 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>
<!-- This is the Yes/No section of the 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 is 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 is 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 is at 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 at 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) are 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 is not Present and All 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 help is greatly appreciated.

You have to do a couple of things for that like below. Check demo - Fiddle
remove onChange="yesNo(this)" handler from you html markup, because you are attaching a general handler.
Change if ($(this).prop("value") === "False") { to if ($(this).prop("value") === "No") { because there is no False values in you radios.
Prepend a new td not to the input checkbox like you do, but to the td that holds that checkbox: $(this).closest('td').prepend("<td>This needs to be completed</td>");
So your general handler would look like:
$('input[type=radio]').on("change", function() {
if ($(this).prop("value") === "No") {
$(this).closest('td').prepend("<td>This needs to be completed</td>");
}
});

How to chang multiple table rows using jQuery based upon a selection menu choice

If this question has already been asked please let me know where to find the answer
I am trying to create a form which, based on the selection made within a drop down menu, will display different table rows. I have been successful in accomplishing this when using JavaScript but I am now trying to migrate from JavaScript to jQuery and I am having difficulty figuring out the correct function to use.
Here is a JSFiddle file with the JavaScript coding in it
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 salad() {
var storenumber = document.getElementById("storenumber");
switch (storenumber.value) {
case "011169":
case "008181":
document.getElementById("frig1").classList.remove("hide");
document.getElementById("frig2").classList.remove("hide");
document.getElementById("frig3").classList.remove("hide");
document.getElementById("saladbar").classList.remove("hide");
document.getElementById("barcheese").classList.remove("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":
document.getElementById("frig1").classList.add("hide");
document.getElementById("frig2").classList.add("hide");
document.getElementById("frig3").classList.add("hide");
document.getElementById("saladbar").classList.add("hide");
document.getElementById("barcheese").classList.add("hide");
break;
}
}
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: 500px;
}
.noborder {
border: none;
background-color: #061BFF;
color: #FFFFFF;
}
body {
background-color: #061BFF;
}
.nobordererror {
border: none;
background-color: #061BFF;
color: #FFFFFF;
}
.hide {
display: none;
}
<body>
<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 your store ID number" onChange="salad()">
<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="7" 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="9" 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 and temp only needsto be done once a week -->
<tr>
<th class="noborder" colspan="2">Oven Temperatures and 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>
<!-- This is the Yes/No section of the 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 id="approve_0" value="Yes">Yes</label>
<label>
<input name="approve" type="radio" required id="approve_1" value="No">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 id="expired_0" value="Yes">Yes</label>
<label>
<input name="expired" type="radio" required id="expired_1" value="No">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 id="raw_0" value="Yes">Yes</label>
<label>
<input name="raw" type="radio" required id="raw_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Foodis Correcctly Date/Labeled & FIFO is followed:</td>
<td>
<label>
<input name="fifo" type="radio" required id="fifo_0" value="Yes">Yes</label>
<label>
<input name="fifo" type="radio" required id="fifo_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Whole Produce is Washed:</td>
<td>
<label>
<input name="produce" type="radio" required id="produce_0" value="Yes">Yes</label>
<label>
<input name="produce" type="radio" required id="produce_1" value="No">No</label>
</td>
</tr>
<!-- Sanitation Section -->
<tr>
<td class="left"><span class="required">*</span>Sanitizer is at Correct PPM:</td>
<td>
<label>
<input name="ppm" type="radio" required id="ppm_0" value="Yes">Yes</label>
<label>
<input name="ppm" type="radio" required id="ppm_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hot Water ≥ 120°F at 3-Comp. Sink:</td>
<td>
<label>
<input name="hotwater" type="radio" required id="hotwater_0" value="Yes">Yes</label>
<label>
<input name="hotwater" type="radio" required id="hotwater_1" value="No">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 id="soap_0" value="Yes">Yes</label>
<label>
<input name="soap" type="radio" required id="soap_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Chemicals stored Correctly:</td>
<td>
<label>
<input name="chem" type="radio" required id="chem_0" value="Yes">Yes</label>
<label>
<input name="chem" type="radio" required id="chem_1" value="No">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 id="illteam_0" value="Yes">Yes</label>
<label>
<input name="illteam" type="radio" required id="illteam_1" value="No">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 id="wash_0" value="Yes">Yes</label>
<label>
<input name="wash" type="radio" required id="wash_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hand Sinks (Including Restrooms) are Stocked, Accessible & Used Properly:</td>
<td>
<label>
<input name="sinks" type="radio" required id="sinks_0" value="Yes">Yes</label>
<label>
<input name="sink" type="radio" required id="sinks_1" value="No">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 id="hair_0" value="Yes">Yes</label>
<label>
<input name="hair" type="radio" required id="hair_1" value="No">No</label>
</td>
</tr>
<!-- Pest Management Section -->
<tr>
<td class="left"><span class="required">*</span>Pest Infestation or Activity is not Present and All Traps Placed Correctly:</td>
<td>
<label>
<input name="pest" type="radio" required id="pest_0" value="Yes">Yes</label>
<label>
<input name="pest" type="radio" required id="pest_1" value="No">No</label>
</td>
</tr>
</table>
</section>
</body>
Again, the goal of the jquery function should be to hide/show several of the table rows based upon the selected "store id".
Thank you in advance for any and all help

The jQuery version of this:
document.getElementById("frig1").classList.add("hide");
is
$("#frig1").hide();
To display the element, you would use
$("#frig1").show();
If you would like to hide multiple elements, you could use:
$("#frig1, #frig2").hide();

Can't Add Up Radio Button Values with jQuery

I'm trying to add up all the values of the radio buttons selected on Submit button press. It sometimes changes the 0 to a 200, but it isn't adding correctly. I'm not quite sure what is going on with this one, since the total amount sometimes changes, but isn't accurate.
See https://jsfiddle.net/amgodv58/
<form name="form1" method="POST" onsubmit="calculateTotal()">
<table>
<thead>
<tr class="headings">
<td class="blank"> </td>
<th class="heading" scope="col">A little of the time</th>
<th class="heading" scope="col">Some of the time</th>
<th class="heading" scope="col">Good part of the time</th>
<th class="heading" scope="col">Most of the time</th>
</tr><!-- /.headings -->
</thead> <tbody>
<tr class="question">
<td class="prompt"><span class="num">1. </span>I feel more nervous and anxious than usual.</td>
<td class="response"><input type="radio" class="amount" name="q1" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q1" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q1" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q1" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">2. </span>I feel afraid for no reason at all.</td>
<td class="response"><input type="radio" class="amount" name="q2" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q2" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q2" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q2" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">3. </span>I get upset easily or feel panicky.</td>
<td class="response"><input type="radio" class="amount" name="q3" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q3" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q3" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q3" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">4. </span>I feel like I’m falling apart and going to pieces.</td>
<td class="response"><input type="radio" class="amount" name="q4" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q4" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q4" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q4" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">5. </span>I feel that everything is all right and nothing bad will happen.</td>
<td class="response"><input type="radio" class="amount" name="q5" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q5" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q5" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q5" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">6. </span>My arms and legs shake and tremble.</td>
<td class="response"><input type="radio" class="amount" name="q6" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q6" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q6" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q6" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">7. </span>I am bothered by headaches neck and back pain.</td>
<td class="response"><input type="radio" class="amount" name="q7" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q7" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q7" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q7" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">8. </span>I feel weak and get tired easily.</td>
<td class="response"><input type="radio" class="amount" name="q8" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q8" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q8" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q8" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">9. </span>I feel calm and can sit still easily.</td>
<td class="response"><input type="radio" class="amount" name="q9" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q9" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q9" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q9" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">10. </span>I can feel my heart beating fast.</td>
<td class="response"><input type="radio" class="amount" name="q10" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q10" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q10" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q10" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">11. </span>I am bothered by dizzy spells.</td>
<td class="response"><input type="radio" class="amount" name="q11" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q11" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q11" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q11" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">12. </span>I have fainting spells or feel like it.</td>
<td class="response"><input type="radio" class="amount" name="q12" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q12" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q12" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q12" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">13. </span>I can breathe in and out easily.</td>
<td class="response"><input type="radio" class="amount" name="q13" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q13" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q13" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q13" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">14. </span>I get numbness and tingling in my fingers and toes.</td>
<td class="response"><input type="radio" class="amount" name="q14" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q14" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q14" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q14" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">15. </span>I am bothered by stomach aches or indigestion.</td>
<td class="response"><input type="radio" class="amount" name="q15" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q15" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q15" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q15" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">16. </span>I have to empty my bladder often.</td>
<td class="response"><input type="radio" class="amount" name="q16" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q16" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q16" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q16" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">17. </span>My hands are usually dry and warm.</td>
<td class="response"><input type="radio" class="amount" name="q17" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q17" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q17" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q17" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">18. </span>My face gets hot and blushes.</td>
<td class="response"><input type="radio" class="amount" name="q18" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q18" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q18" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q18" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">19. </span>I fall asleep easily and get a good night’s rest.</td>
<td class="response"><input type="radio" class="amount" name="q19" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q19" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q19" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q19" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">20. </span>I have nightmares.</td>
<td class="response"><input type="radio" class="amount" name="q20" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q20" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q20" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q20" value="4" /></td>
</tr><!-- /.question -->
</tbody> <tfoot>
<tr>
<td class="submit" colspan="5">
<div class="submit">
<button class="submit-button" name="submit">Submit</button>
<div class="clear"></div>
</div>
</td>
<td><span class="total">0</span></td>
</tr>
</tfoot>
</table>
</form>
<input class="total" name="total" type="text"/>
JavaScript
$( ".submit-button" ).click(function() {
calculateTotal($(this).closest('table'));
});
function calculateTotal($tab) {
var sum = 0;
$tab.find('input').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$tab.find(".total").html(sum.toFixed(2));
}

Here's some simplified code. You should be checking to see if the radio buttons have been checked off.
http://jsbin.com/ribupakiwa/2/edit?js,output
Only going to show the JS here.
$( ".submit-button" ).click(function() {
event.preventDefault();
calculateTotal($(this).closest('table'));
});
function calculateTotal($tab) {
var sum = 0;
$tab.find('input:checked').each(function() {
sum += parseInt($(this).val()) || 0;
});
$(".total").html(sum.toFixed(2));
}
parseInt($(this).val()) || 0 is a fancy way of saving against NaN. NaN || 0 is 0 since NaN is a falsy value.

how can i pass js data to php? [duplicate]

This question already has answers here:
How do I pass variables and data from PHP to JavaScript?
(19 answers)
Closed 8 years ago.
<html>
<head>
<script type="text/javascript">
function tally()
{
var scrt_var = 10;
var Dpoint, Ipoint, Hpoint, Apoint;
var party_Score = ['Dpoint', 'Ipoint', 'Hpoint', 'Apoint'];
var D, I, H, A;
var value_Point;
var type_Choice;
var tag_Choice;
var inputs = document.getElementsByTagName("input"),
iLength = inputs.length,
D = I = H = A = 0;
for (i = 0; i < iLength; i++) if (inputs[i].checked)
{
value_Point = parseInt(inputs[i].value);
if (inputs[i].name.search('D') > -1){ D += value_Point; }
if (inputs[i].name.search('I') > -1){ I += value_Point; }
if (inputs[i].name.search('H') > -1){ H += value_Point; }
if (inputs[i].name.search('A') > -1){ A += value_Point; }
} //check here !!!~
Dpoint = D; // converting this to php data so i can send it by email
Ipoint = I; // converting this to php data so i can send it by email
Hpoint = H; // converting this to php data so i can send it by email
Apoint = A; // converting this to php data so i can send it by email
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('D').style.width = D + 'px';
document.getElementById('I').style.width = I + 'px';
document.getElementById('H').style.width = H + 'px';
document.getElementById('A').style.width = A + 'px';
});
location.href = "test3.html?D="+ Dpoint + "&I=" + Ipoint + "&H=" + Hpoint + "&A=" + Apoint;
}
// ]]>
</script>
</head>
<form method="post" action="data.php">
<table>
<tr>
<td>question1</td>
<td><input type="radio" name="D1" value="1"> 1 </td>
<td><input type="radio" name="D1" value="2"> 2 </td>
<td><input type="radio" name="D1" value="3"> 3 </td>
<td><input type="radio" name="D1" value="4"> 4 </td>
<td><input type="radio" name="D1" value="5"> 5 </td>
<td><input type="radio" name="D1" value="6"> 6 </td>
<td><input type="radio" name="D1" value="7"> 7 </td>
<td><input type="radio" name="D1" value="8"> 8 </td>
<td><input type="radio" name="D1" value="9"> 9 </td>
<td><input type="radio" name="D1" value="10"> 10 </td>
</tr>
<tr>
<td>question2</td>
<td><input type="radio" name="I1" value="1"> 1 </td>
<td><input type="radio" name="I1" value="2"> 2 </td>
<td><input type="radio" name="I1" value="3"> 3 </td>
<td><input type="radio" name="I1" value="4"> 4 </td>
<td><input type="radio" name="I1" value="5"> 5 </td>
<td><input type="radio" name="I1" value="6"> 6 </td>
<td><input type="radio" name="I1" value="7"> 7 </td>
<td><input type="radio" name="I1" value="8"> 8 </td>
<td><input type="radio" name="I1" value="9"> 9 </td>
<td><input type="radio" name="I1" value="10"> 10 </td>
</tr>
<tr>
<td>question3</td>
<td><input type="radio" name="H1" value="1"> 1 </td>
<td><input type="radio" name="H1" value="2"> 2 </td>
<td><input type="radio" name="H1" value="3"> 3 </td>
<td><input type="radio" name="H1" value="4"> 4 </td>
<td><input type="radio" name="H1" value="5"> 5 </td>
<td><input type="radio" name="H1" value="6"> 6 </td>
<td><input type="radio" name="H1" value="7"> 7 </td>
<td><input type="radio" name="H1" value="8"> 8 </td>
<td><input type="radio" name="H1" value="9"> 9 </td>
<td><input type="radio" name="H1" value="10"> 10 </td>
</tr>
<tr>
<td><label> question4 </label></td>
<td><input type="radio" name="A1" value="1"> 1 </td>
<td><input type="radio" name="A1" value="2"> 2 </td>
<td><input type="radio" name="A1" value="3"> 3 </td>
<td><input type="radio" name="A1" value="4"> 4 </td>
<td><input type="radio" name="A1" value="5"> 5 </td>
<td><input type="radio" name="A1" value="6"> 6 </td>
<td><input type="radio" name="A1" value="7"> 7 </td>
<td><input type="radio" name="A1" value="8"> 8 </td>
<td><input type="radio" name="A1" value="9"> 9 </td>
<td><input type="radio" name="A1" value="10"> 10 </td>
</tr><!-- 14 -->
<tr>
<td><label> question5 </label></td>
<td><input type="radio" name="D2" value="1"> 1 </td>
<td><input type="radio" name="D2" value="2"> 2 </td>
<td><input type="radio" name="D2" value="3"> 3 </td>
<td><input type="radio" name="D2" value="4"> 4 </td>
<td><input type="radio" name="D2" value="5"> 5 </td>
<td><input type="radio" name="D2" value="6"> 6 </td>
<td><input type="radio" name="D2" value="7"> 7 </td>
<td><input type="radio" name="D2" value="8"> 8 </td>
<td><input type="radio" name="D2" value="9"> 9 </td>
<td><input type="radio" name="D2" value="10"> 10 </td>
</tr><!-- 15 -->
<tr>
<tr>
<td colspan=2>
<div align="center"><input type="button" value="Score my test" onclick="javascript:tally()"></div>
</td>
</tr>
</table>
</form>
</html>
how do i pass js data to php ? i need those js data converting to php and send it by email how can i do that ? i have being finding solution all over the net , still i cant get it can any one teach me how ? or if cant is there a way to loop all radio value on html using php ? i am new to both code.

You can pass in multiple ways.
in a way how you tried, so by document.location (redirection) - will be in $_GET in php
by AJAX (for example using jQuery) - will be in $_POST (or $_GET) in php
by html form - will be in $_POST (may be in $_GET, but shouldn't)
To answer to your question I would have to direct you to various answers:
learn about data collecting from HTML and using AJAX (for example use jQuery here)
learn about request access in PHP $_GET, $_POST, $_REQUEST
learn about mail sending in php (google for "mail php"), there are basic (not perfect) snippets for that