Ajax updatet score from input value - javascript

I am trying to create a form with three "Likert Scale" input.
For all three input field there is totaly 10 points that can be devided on the three "Likert scale" inputs. When this score is equal to 0, the submit button should be enabled and the form can be submitted. The number of points left should be updated without having the page reloade using ajax, so the user will know how many points that are left.
I have not really figured out how to do this but I have added some pseudo code, to explain this.
$(document).ready(function(e) {
// Initial score/points
var score = 10;
document.getElementById("score").innerHTML = score;
$('input:radio').click(function() {
e.preventDefault();
// update score, based on clicked alternative value
new_score = score - alternative_clicked;
if new_score < 0:
var error = "You do not have enoght points left, choose a smaler number";
document.getElementById("error").innerHTML = error;
else if new_score === 0:
// enable submit button
else :
// update score with new_score value
});
$('input:submit').click(function() {
e.preventDefault();
// send to google spreadsheet
});
});
table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
background: blue;
}
table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
background: #fafafa;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
table.border td,
table.border th {
border: 1px solid grey;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This should be updated -->
<p><b>TOTAL POINTS LEFT:</b> <span id="score"></span></p>
<form method="post" action="/echo/html/" ajax="true">
<table class="striped-columns border">
<thead>
<tr>
<th>TEST</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alternativ 1</td>
<td><input type="radio" value="1" name="alternativ1" /></td>
<td><input type="radio" value="2" name="alternativ1" /></td>
<td><input type="radio" value="3" name="alternativ1" /></td>
<td><input type="radio" value="4" name="alternativ1" /></td>
<td><input type="radio" value="5" name="alternativ1" /></td>
</tr>
<tr>
<td>Alternativ 2</td>
<td><input type="radio" value="1" name="alternativ2" /></td>
<td><input type="radio" value="2" name="alternativ2" /></td>
<td><input type="radio" value="3" name="alternativ2" /></td>
<td><input type="radio" value="4" name="alternativ2" /></td>
<td><input type="radio" value="5" name="alternativ2" /></td>
</tr>
<tr>
<td>Alternativ 3</td>
<td><input type="radio" value="1" name="alternativ3" /></td>
<td><input type="radio" value="2" name="alternativ3" /></td>
<td><input type="radio" value="3" name="alternativ3" /></td>
<td><input type="radio" value="4" name="alternativ3" /></td>
<td><input type="radio" value="5" name="alternativ3" /></td>
</tr>
</tbody>
</table>
<br>
<input type="submit" value="Submit" />
</form>


Here is a one way to do that:
(sorry for bad indentation in the snippet. Seems it is a bit buggy feature in SO)
I use eval() so I wouldn't need to write many if/else statements.
However - eval() isn’t evil, just misunderstood.
$(document).ready(function(e) {
// Initial score/points
var score = 10;
var a1 = 0, a2 = 0, a3 = 0;
var inputs = $('input');
inputs.each(function(i) {
$(this).on('click', function() {
var clicked = $(this).closest('tr').get(0).id;
score += eval(clicked)
score -= eval(clicked + " = " + $(this).val());
$("#score").html(score);
if (score == 0 && (a1 != 0 && a2 != 0 && a3 != 0)) {
$("#submit").prop("disabled", false);
} else {
$("#submit").prop("disabled", true);
}
})
})
});
table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
background: blue;
}
table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
background: #fafafa;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
table.border td,
table.border th {
border: 1px solid grey;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form method="post" action="/echo/html/" ajax="true">
<table class="striped-columns border">
<thead>
<tr>
<th>TEST</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr id="a1">
<td>Alternativ 1</td>
<td><input type="radio" value="1" name="alternativ1" /></td>
<td><input type="radio" value="2" name="alternativ1" /></td>
<td><input type="radio" value="3" name="alternativ1" /></td>
<td><input type="radio" value="4" name="alternativ1" /></td>
<td><input type="radio" value="5" name="alternativ1" /></td>
</tr>
<tr id="a2">
<td>Alternativ 2</td>
<td><input type="radio" value="1" name="alternativ2" /></td>
<td><input type="radio" value="2" name="alternativ2" /></td>
<td><input type="radio" value="3" name="alternativ2" /></td>
<td><input type="radio" value="4" name="alternativ2" /></td>
<td><input type="radio" value="5" name="alternativ2" /></td>
</tr>
<tr id="a3">
<td>Alternativ 3</td>
<td><input type="radio" value="1" name="alternativ3" /></td>
<td><input type="radio" value="2" name="alternativ3" /></td>
<td><input type="radio" value="3" name="alternativ3" /></td>
<td><input type="radio" value="4" name="alternativ3" /></td>
<td><input type="radio" value="5" name="alternativ3" /></td>
</tr>
</tbody>
</table>
<br>
<input id="submit" type="submit" value="Submit" disabled/>
<div id="score"> 10
</div>
</form>

Related

Form response calculation

I just create a form and table for a physical therapist. Need your help in calculating "sum based on response". The extreme difficulty value can be "0" and no difficulty can be "4"
I am familiar with reading and modifying js, html, css code. Here is what I wrote.
<FORM >
<TABLE BORDER>
<TR ALIGN=CENTER>
<TD WIDTH=350><B>ACTIVITIES<B> </TD>
<TD WIDTH=125><B>Extreme difficulty (0)</B></TD>
<TD WIDTH=125><B>Quite a bit of difficulty (1)</B></TD>
<TD WIDTH=125><B>Moderate Difficulty(2)</B></TD>
<TD WIDTH=125><B>Little Difficulty(3)</B></TD>
<TD WIDTH=125><B>No Difficulty(4)</B></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Any of usual work (household, work)</TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Your hobbies, recreational, sporting</TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Lifting bag of groceries to waist level</TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Grooming your hair</TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="5"></TD>
</TR>
</TABLE>
</FORM>
I do not know how to calculate the result value to this form

<h4 style="text-align:center;color:blue;"> Dr ABC<br> MYLocation</h4>
<form action="" method="get">
<b> Enter Patient's Name :</b> <input type="text" /><br>
</form>
<h4> We are interested in knowing wheather you are having any difficulty with the
activities listed below <u> because of your upper limb problem </u>
for which <br> you are seeking attention. Provide an answer for each activity</h4>
<h4> Today, <u>do you or would you </u> have any difficulty with: (check boxes below
on each line)</h4>
<style>table, td { border: 1px solid grey }
td {
text-align: center;
min-width: 125px;
max-width: 125px;
}
tr td:first-child {
text-align: left;
min-width: 350px;
max-width: 350px;
}
thead td { font-weight: bold }
#the-Sum {
display: block;
margin: 10px 0 0 20px;
font-weight: bold;
color:crimson;
}</style>
<form id="the-Form">
<table>
<thead>
<tr>
<td>ACTIVITIES </td>
<td>Extreme Difficulty or Unable to Perform Activity (0)</td>
<td>Quite a Bit of Difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>A Little bit of Difficulty (3)</td>
<td>No Difficulty (4)</td>
</tr>
</thead>
<tbody>
<tr>
<td> Any of usual work, household, or school activities</td>
<td><input type="radio" name="household" value="0"></td>
<td><input type="radio" name="household" value="1"></td>
<td><input type="radio" name="household" value="2"></td>
<td><input type="radio" name="household" value="3"></td>
<td><input type="radio" name="household" value="4"></td>
</tr>
<tr>
<td> Your usual hobbies, recreational, sporting activities</td>
<td><input type="radio" name="hobbies" value="0"></td>
<td><input type="radio" name="hobbies" value="1"></td>
<td><input type="radio" name="hobbies" value="2"></td>
<td><input type="radio" name="hobbies" value="3"></td>
<td><input type="radio" name="hobbies" value="4"></td>
</tr>
<tr>
<td> Lifting bag of groceries to waist level</td>
<td><input type="radio" name="groceryw" value="0"></td>
<td><input type="radio" name="groceryw" value="1"></td>
<td><input type="radio" name="groceryw" value="2"></td>
<td><input type="radio" name="groceryw" value="3"></td>
<td><input type="radio" name="groceryw" value="4"></td>
</tr>
<tr>
<td> Lifting a bag of groceries above your head </td>
<td><input type="radio" name="groceryd" value="0"></td>
<td><input type="radio" name="groceryd" value="1"></td>
<td><input type="radio" name="groceryd" value="2"></td>
<td><input type="radio" name="groceryd" value="3"></td>
<td><input type="radio" name="groceryd" value="4"></td>
</tr>
<tr>
<td> Grooming your hair </td>
<td><input type="radio" name="grooming" value="0"></td>
<td><input type="radio" name="grooming" value="1"></td>
<td><input type="radio" name="grooming" value="2"></td>
<td><input type="radio" name="grooming" value="3"></td>
<td><input type="radio" name="grooming" value="4"></td>
</tr>
<tr>
<td> Pushing up on your hands (e.g. from bathtub or chair) </td>
<td><input type="radio" name="pushing" value="0"></td>
<td><input type="radio" name="pushing" value="1"></td>
<td><input type="radio" name="pushing" value="2"></td>
<td><input type="radio" name="pushing" value="3"></td>
<td><input type="radio" name="pushing" value="4"></td>
</tr>
<tr>
<td> Preparing food (e.g. peeling, cutting </td>
<td><input type="radio" name="food" value="0"></td>
<td><input type="radio" name="food" value="1"></td>
<td><input type="radio" name="food" value="2"></td>
<td><input type="radio" name="food" value="3"></td>
<td><input type="radio" name="food" value="4"></td>
</tr>
<tr>
<td> Driving </td>
<td><input type="radio" name="driving" value="0"></td>
<td><input type="radio" name="driving" value="1"></td>
<td><input type="radio" name="driving" value="2"></td>
<td><input type="radio" name="driving" value="3"></td>
<td><input type="radio" name="driving" value="4"></td>
</tr>
<tr>
<td> Vaccuming, sweeping, or raking </td>
<td><input type="radio" name="cleaning" value="0"></td>
<td><input type="radio" name="cleaning" value="1"></td>
<td><input type="radio" name="cleaning" value="2"></td>
<td><input type="radio" name="cleaning" value="3"></td>
<td><input type="radio" name="cleaning" value="4"></td>
</tr>
<tr>
<td> Dressing </td>
<td><input type="radio" name="dressing" value="0"></td>
<td><input type="radio" name="dressing" value="1"></td>
<td><input type="radio" name="dressing" value="2"></td>
<td><input type="radio" name="dressing" value="3"></td>
<td><input type="radio" name="dressing" value="4"></td>
</tr>
<tr>
<td> Doing up buttons </td>
<td><input type="radio" name="dbuttons" value="0"></td>
<td><input type="radio" name="dbuttons" value="1"></td>
<td><input type="radio" name="dbuttons" value="2"></td>
<td><input type="radio" name="dbuttons" value="3"></td>
<td><input type="radio" name="dbuttons" value="4"></td>
</tr>
<tr>
<td> Using tools or appliances</td>
<td><input type="radio" name="appliance" value="0"></td>
<td><input type="radio" name="appliance" value="1"></td>
<td><input type="radio" name="appliance" value="2"></td>
<td><input type="radio" name="appliance" value="3"></td>
<td><input type="radio" name="appliance" value="4"></td>
</tr>
<tr>
<td> Opening doors </td>
<td><input type="radio" name="doors" value="0"></td>
<td><input type="radio" name="doors" value="1"></td>
<td><input type="radio" name="doors" value="2"></td>
<td><input type="radio" name="doors" value="3"></td>
<td><input type="radio" name="doors" value="4"></td>
</tr>
<tr>
<td> Cleaning </td>
<td><input type="radio" name="cleaning1" value="0"></td>
<td><input type="radio" name="cleaning1" value="1"></td>
<td><input type="radio" name="cleaning1" value="2"></td>
<td><input type="radio" name="cleaning1" value="3"></td>
<td><input type="radio" name="cleaning1" value="4"></td>
</tr>
<tr>
<td> Tying or lacing shoes</td>
<td><input type="radio" name="shoes" value="0"></td>
<td><input type="radio" name="shoes" value="1"></td>
<td><input type="radio" name="shoes" value="2"></td>
<td><input type="radio" name="shoes" value="3"></td>
<td><input type="radio" name="shoes" value="4"></td>
</tr>
<tr>
<td> Sleeping</td>
<td><input type="radio" name="sleep" value="0"></td>
<td><input type="radio" name="sleep" value="1"></td>
<td><input type="radio" name="sleep" value="2"></td>
<td><input type="radio" name="sleep" value="3"></td>
<td><input type="radio" name="sleep" value="4"></td>
</tr>
<tr>
<td> Laundering cloths (e.g. washing, ironing, folding)</td>
<td><input type="radio" name="laundry" value="0"></td>
<td><input type="radio" name="laundry" value="1"></td>
<td><input type="radio" name="laundry" value="2"></td>
<td><input type="radio" name="laundry" value="3"></td>
<td><input type="radio" name="laundry" value="4"></td>
</tr>
<tr>
<td>Opening a jar</td>
<td><input type="radio" name="jar" value="0"></td>
<td><input type="radio" name="jar" value="1"></td>
<td><input type="radio" name="jar" value="2"></td>
<td><input type="radio" name="jar" value="3"></td>
<td><input type="radio" name="jar" value="4"></td>
</tr>
<tr>
<td> Throwing a ball </td>
<td><input type="radio" name="ball" value="0"></td>
<td><input type="radio" name="ball" value="1"></td>
<td><input type="radio" name="ball" value="2"></td>
<td><input type="radio" name="ball" value="3"></td>
<td><input type="radio" name="ball" value="4"></td>
</tr>
<tr>
<td> Carrying a small suitcase with affected limb </td>
<td><input type="radio" name="carrying" value="0"></td>
<td><input type="radio" name="carrying" value="1"></td>
<td><input type="radio" name="carrying" value="2"></td>
<td><input type="radio" name="carrying" value="3"></td>
<td><input type="radio" name="carrying" value="4"></td>
</tr>
</tbody>
</table>
<output id="the-Sum"> total = 0 </output>
</form>
<script>
const
theForm = document.querySelector('#the-Form'),
theTotal = document.querySelector('#the-Sum'),
List_RadioGroup = [ 'household', 'hobbies', 'groceryw', 'groceryd', 'grooming', 'pushing', 'food', 'driving', 'cleaning', 'dressing', 'dbuttons', 'appliance', 'doors', 'cleaning1', 'shoes', 'sleep', 'laundry', 'jar', 'ball', 'carrying']
;
// load init.
theTotal.textContent = ' total = 0 ';
List_RadioGroup.forEach(xElm=>{ theForm[xElm][0].checked = true; })
theForm.onchange = function()
{
let total = 0;
List_RadioGroup.forEach(xElm=>{
total += parseInt( document.querySelector(`input[name="${xElm}"]:checked`).value );
})
theTotal.textContent = ` TOTAL OUT OF 80 = ${total} `;
}
</script>
<div><form>
<input type="button" value="Print or Save as pdf" onClick="window.print()">
</form></div>

New and complete solution
const
theForm = document.querySelector('#the-Form'),
theTabBody = document.querySelector('#Activities-Table tbody'),
theTotal = document.querySelector('#the-Sum'),
theReset = document.querySelector('#the-Reset'),
PrintButton = document.querySelector('#bt-Print'),
ActivitiesList = [
{ name: 'household', lib: 'Any of usual work, household, or school activities' }
, { name: 'hobbies', lib: 'Your usual hobbies, recreational, sporting activities' }
, { name: 'groceryw', lib: 'Lifting bag of groceries to waist level' }
, { name: 'groceryd', lib: 'Lifting a bag of groceries above your head' }
, { name: 'grooming', lib: 'Grooming your hair' }
, { name: 'pushing', lib: 'Pushing up on your hands (e.g. from bathtub or chair)' }
, { name: 'food', lib: 'Preparing food (e.g. peeling, cutting ..)' }
, { name: 'driving', lib: 'Driving' }
, { name: 'cleaning', lib: 'Vaccuming, sweeping, or raking ' }
, { name: 'dressing', lib: 'Dressing' }
, { name: 'dbuttons', lib: 'Doing up buttons' }
, { name: 'appliance', lib: 'Using tools or appliances' }
, { name: 'doors', lib: 'Opening doors' }
, { name: 'cleaning1', lib: 'Cleaning' }
, { name: 'shoes', lib: 'Tying or lacing shoes' }
, { name: 'sleep', lib: 'Sleeping' }
, { name: 'laundry', lib: 'Laundering cloths (e.g. washing, ironing, folding)' }
, { name: 'jar', lib: 'Opening a jar' }
, { name: 'ball', lib: 'Throwing a ball' }
, { name: 'carrying', lib: 'Carrying a small suitcase with affected limb' }
]
;
function CaculSum()
{
let total = 0;
ActivitiesList.forEach( line => {
total += parseInt(document.querySelector(`input[name="${line.name}"]:checked`).value);
})
theTotal.textContent = ` total = ${total} `;
}
function GlobalInit()
{
let Cheking = '';
ActivitiesList.forEach( (line,iLine) => {
let
newRow = theTabBody.insertRow(-1),
newCell = newRow.insertCell(0);
newCell.textContent = line.lib;
Cheking = 'checked';
for (let i=0; i<5; i++) {
newCell = newRow.insertCell(i+1); // id="R-${iLine}-${i}"
newCell.innerHTML = `<input type="radio" name="${line.name}" id="R-${iLine}-${i}" value="${i}" ${Cheking}>`
newCell.innerHTML += `<label for="R-${iLine}-${i}">☐</label>`; // not checked
newCell.innerHTML += `<label for="R-${iLine}-${i}">☑</label>`; // checked
newCell.innerHTML += `<label for="R-${iLine}-${i}">✔</label>`; // print checked
Cheking = '';
}
})
theTotal.textContent = ' total = 0 ';
}
GlobalInit();
theForm.onchange = CaculSum;
theForm.onreset = function() {
theTotal.textContent = ` total = 0 `;
};
PrintButton.onclick = function(){
window.print();
}
body {
font :16px Arial, Helvetica, sans-serif;
}
h3 {
text-align:center;
color:blue;
}
table {
border-collapse: collapse;
margin: 10px 20px;
}
td {
border: 1px solid grey;
padding: 2px 10px;
}
td {
text-align: center;
min-width: 100px;
max-width: 100px;
}
tr td:first-child {
text-align: left;
min-width: 350px;
max-width: 350px;
}
thead td {
font-weight: bold;
background: lavender
}
#the-Sum {
display: inline-block;
margin: 10px 20px;
padding: 10px;
font-weight: bold;
color: crimson;
border: 1px solid grey;
width: 350px;
}
tbody tr:nth-child(even) {
background: lavender
}
#the-Form > label,
#the-Form > input {
background-color:lavender;
color: black;
margin: 5px 10px;
padding: 5px;
font-weight: bold
}
#the-Form > input {
border: 1px solid grey;
width : 300px;
}
#the-Form tbody label { font-size: 22px; }
input[type=radio] { display:none }
input[type=radio] + label { display:inline; color: grey; }
input[type=radio] + label + label { display:none; color:black; }
input[type=radio]:checked + label { display:none }
input[type=radio]:checked + label + label { display:inline }
input[type=radio] + label + label + label { display:none }
<style media="print">
h3, output { color: black; }
h4, button { display: none; }
table { margin: 10px 0; }
tr td:first-child { min-width: 400px; max-width: 400px; }
tbody tr:nth-child(even) { background: none }
#the-Form tbody label { display:none }
input[type=radio]:checked + label + label + label { display:inline !important }
</style>
<h3> Dr ABC<br> MYLocation</h3>
<h4> We are interested in knowing wheather you are having any difficulty with the
activities listed below <u> because of your upper limb problem </u>
for which you are seeking attention. <br>Provide an answer for each activity
Today, <u>do you or would you </u> have any difficulty with: (check boxes below
on each line)
</h4>
<form id="the-Form">
<label for="patientName"> Enter Patient's Name :</label>
<input type="text" id="patientName" value="" />
<table id="Activities-Table">
<thead>
<tr>
<td>ACTIVITIES </td>
<td>Extreme difficulty (0)</td>
<td>Quite a bit of difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>Little Difficulty (3)</td>
<td>No Difficulty (4)</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<output id="the-Sum"></output>
<!-- <button type="submit">submit</button> -->
<button type="reset">reset</button>
<button id="bt-Print">Print or Save as pdf</button>
</form>

var total = 0;
var hi = getelementById("hi");
hi.onclick = function(){
total = 0;
}
Try adding id's to all of your check boxes and add an onclick function to them that adds up the total
https://jsfiddle.net/Lvejzuac/

Highlight a table row if radio button has not been checked

Problem:
I have one table per tab (5 tabs in total) where each consists of three rows (one table header and two table data).
I wish to execute a JS script that scans only table rows that has the attribute id and then checks the radio buttons inside this row. If none has been selected then the table row should change color by adding a class to it.
Minimal (Working) Example:
HTML
<table class="table table-striped table-borderless" id="survey">
<thead class="text-center">
<tr>
<th scope="col"></th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td scope="row">Question 1</td>
<td><input type="radio" name="1" id="1" value="1"></td>
<td><input type="radio" name="1" id="1" value="2"></td>
<td><input type="radio" name="1" id="1" value="3"></td>
<td><input type="radio" name="1" id="1" value="4"></td>
<td><input type="radio" name="1" id="1" value="5"></td>
</tr>
<tr id="2">
<td scope="row">Question 2</td>
<td><input type="radio" name="2" id="2" value="1"></td>
<td><input type="radio" name="2" id="2" value="2"></td>
<td><input type="radio" name="2" id="2" value="3"></td>
<td><input type="radio" name="2" id="2" value="4"></td>
<td><input type="radio" name="2" id="2" value="5"></td>
</tr>
</tbody>
</table>
JavaScript
The function is called upon by a button in HTML when a user attempts to switch a tab.
validateForm() {
var valid = true;
var rows = Nodes.tab[this.currentTab].querySelectorAll('tr[id]');
for (var i = 0; i < rows.length; i++) {
var inputs = rows[i].querySelectorAll("input");
for (var x = 0; x < inputs.length; x++) {
// Add class to table row?
}
}
// If valid then mark step with green color
if (valid) {
document.getElementsByClassName("step")[this.currentTab].classList.add("finish");
}
// Return the valid status
return valid;
}
Desired output:
If a user does not check at least one radio button of a button group then add the CSS class "error" to that table row.

Just elaborating on my comments about exploiting the browser's native form validation to write less code.
Pure CSS and HTML solution:
<style>
#form1:invalid ~ table #row1 {
background-color: red;
}
#form2:invalid ~ table #row2 {
background-color: red;
}
</style>
<form id="form1"></form>
<form id="form2"></form>
<table class="table table-striped table-borderless" id="survey">
<thead class="text-center">
<!--...-->
</thead>
<tbody>
<tr id="row1">
<td scope="row">Question 1</td>
<td><input type="radio" name="f1" value="1" required form="form1"></td>
<td><input type="radio" name="f1" value="2" form="form1"></td>
<td><input type="radio" name="f1" value="3" form="form1"></td>
<td><input type="radio" name="f1" value="4" form="form1"></td>
<td><input type="radio" name="f1" value="5" form="form1"></td>
</tr>
<tr id="row2">
<td scope="row">Question 2</td>
<td><input type="radio" name="f2" value="1" required form="form2"></td>
<td><input type="radio" name="f2" value="2" form="form2"></td>
<td><input type="radio" name="f2" value="3" form="form2"></td>
<td><input type="radio" name="f2" value="4" form="form2"></td>
<td><input type="radio" name="f2" value="5" form="form2"></td>
</tr>
</tbody>
</table>
And if you really need JavaScript to know what's going on, you can call this to determine if a radio group has a value:
document.getElementById('form1').checkValidity()
It will return false if no radio in the group is selected.

I want to display a textbox when I click on a particular option of a radio button in jsp

I have a radio button with 2 options. It goes like
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td>textbox here</td>
I want to display a textbox when i click "Different".
Its a JSP page. Thanks.

It would be nice to know which javascript framework you use.
With vanilla javascript this is a simple way by adding and removing hidden class on click event simply because that's most likely the only way to guaranty browser compatibility.
https://plnkr.co/edit/e9Jet9kd3f278uROO5R0?p=preview
// js
window.onload = () => {
var rad2 = document.getElementById('r2');
var rad1 = document.getElementById('r1');
var input = document.getElementById('myInput');
rad2.addEventListener("click", function(){
input.classList.remove('hidden');
});
rad1.addEventListener("click", function(){
input.classList.add('hidden');
});
}
// html
<h1>Hello Plunker!</h1>
<td>City : </td>
<td><input type="radio" name="r_city" id="r1" value="Same" checked="checked" /></td>
<td><input type="radio" name="r_city" id="r2" value="Different" /></td>
<td><input id="myInput" class="hidden"/></td>
// css
.hidden {
display: none;
}

Here you go, if you want to again hide it just use .hide() function
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked"/>Same</td>
<td><input type="radio" id="testChecked" name="r_city" value="Different" />Different</td>
<td class="show-this" style="display:none">textbox here</td>
</tr>
</table>
<script>
$('#testChecked').click(function(){
if ($(this).is(':checked'))
{
$('.show-this').show();
}
});
</script>
Make sure to add jQuery***

Here is what you need to do. If you are using a common class for the textbox inside <td> then you can use the class selector instead of input[type="text"].
$(document).ready(function(){
$("input[type='radio']").click(function(){
var textBox = $(this).closest('tr').find('td input[type="text"]');
if($(this).val() === 'Different'){
$(textBox).show();
} else {
$(textBox).hide();
}
});
});
td input[type='text'] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city1" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city1" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
</table>

jQuery: Loop print only one value

I have below code
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
<script>
jQuery('table#main_table').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
alert(txt);
}
});
I need to check within table if checkbox is checked then print it's qty value. But below code only prints 1 value. Instead of all
What I'm missing?

Your loop is for tr not for table.
jQuery('table#main_table tr').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>

You're using each on <table> which will iterate only once as there is only one table with that ID. Iterate over the <tr> elements in the table.
$('#main_table tr').each(function() {
...
jQuery('table#main_table tr').each(function() {
if (jQuery(this).find("input:checkbox").is(':checked')) {
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
There's better way to do this. Instead of iterating over tr and finding checked checkboxes, you can iterate over checked checkboxes and get the value of the associated textbox.
$(this) // Will refer to the checkbox
.closest('td') // Get parent <td>
.next() // Get next element i.e. next <td>
.find('[name="qty[]"]') // Find element with name attribute value as "qty[]"
.val() // Get it's value
$('#main_table tr :checkbox:checked').each(function() {
console.log($(this).closest('td').next().find('[name="qty[]"]').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>

How to validate that at least one checkbox is checked in each set of checkboxes

I have a large group of checkboxes that are separated by two tables. Out of the two sets of checkboxes, I want the user to be required to check at least one checkbox in both sets before submitting a form (so, based on my code, at least one checkbox under COST and one under BENEFIT). I hope this makes sense. My code is below:
<body>
<h2 align="center">Cost/Benefit Matrix</h2>
<script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>
<style type="text/css">
p
{
font-family: "Arial";
align: center;
}
h2
{
font-family: "Arial";
}
</style>
<p>
<table border="1" align="center">
<tbody>
<tr>
<th><b>COST</b></th>
<th colspan="3">Reduced Cost</th>
<th>Neutral</th>
<th colspan="3">Increased Cost</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Capital cost</td>
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
<td><input type="checkbox" id="matrix3" value="1"></td>
<td><input type="checkbox" id="matrix4" value="1"></td>
<td><input type="checkbox" id="matrix5" value="1"></td>
<td><input type="checkbox" id="matrix6" value="1"></td>
<td><input type="checkbox" id="matrix7" value="1"></td>
<td><input type="checkbox" id="matrix8" value="1"></td>
</tr>
<tr>
<td>Clinical operating cost</td>
<td><input type="checkbox" id="matrix9" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix10" value="1"></td>
<td><input type="checkbox" id="matrix11" value="1"></td>
<td><input type="checkbox" id="matrix12" value="1"></td>
<td><input type="checkbox" id="matrix13" value="1"></td>
<td><input type="checkbox" id="matrix14" value="1"></td>
<td><input type="checkbox" id="matrix15" value="1"></td>
<td><input type="checkbox" id="matrix16" value="1"></td>
</tr>
<tr>
<td>Facility operating cost</td>
<td><input type="checkbox" id="matrix17" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix18" value="1"></td>
<td><input type="checkbox" id="matrix19" value="1"></td>
<td><input type="checkbox" id="matrix20" value="1"></td>
<td><input type="checkbox" id="matrix21" value="1"></td>
<td><input type="checkbox" id="matrix22" value="1"></td>
<td><input type="checkbox" id="matrix23" value="1"></td>
<td><input type="checkbox" id="matrix24" value="1"></td>
</tr>
<tr>
<td>Energy cost</td>
<td><input type="checkbox" id="matrix25" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix26" value="1"></td>
<td><input type="checkbox" id="matrix27" value="1"></td>
<td><input type="checkbox" id="matrix28" value="1"></td>
<td><input type="checkbox" id="matrix29" value="1"></td>
<td><input type="checkbox" id="matrix30" value="1"></td>
<td><input type="checkbox" id="matrix31" value="1"></td>
<td><input type="checkbox" id="matrix32" value="1"></td>
</tr>
<br>
<br>
<table border="1" align="center">
<tbody>
<tr>
<th><b>BENEFIT</b></th>
<th colspan="3">Negative Impact</th>
<th>Neutral</th>
<th colspan="3">Positive Impact</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Patient/staff safety</td>
<td><input type="checkbox" id="matrix33" value="1"></td>
<td><input type="checkbox" id="matrix34" value="1"></td>
<td><input type="checkbox" id="matrix35" value="1"></td>
<td><input type="checkbox" id="matrix36" value="1"></td>
<td><input type="checkbox" id="matrix37" value="1"></td>
<td><input type="checkbox" id="matrix38" value="1"></td>
<td><input type="checkbox" id="matrix39" value="1"></td>
<td><input type="checkbox" id="matrix40" value="1"></td>
</tr>
<tr>
<td>Fire/life safety</td>
<td><input type="checkbox" id="matrix41" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix42" value="1"></td>
<td><input type="checkbox" id="matrix43" value="1"></td>
<td><input type="checkbox" id="matrix44" value="1"></td>
<td><input type="checkbox" id="matrix45" value="1"></td>
<td><input type="checkbox" id="matrix46" value="1"></td>
<td><input type="checkbox" id="matrix47" value="1"></td>
<td><input type="checkbox" id="matrix48" value="1"></td>
</tr>
<tr>
<td>Clinical quality of care</td>
<td><input type="checkbox" id="matrix49" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix50" value="1"></td>
<td><input type="checkbox" id="matrix51" value="1"></td>
<td><input type="checkbox" id="matrix52" value="1"></td>
<td><input type="checkbox" id="matrix53" value="1"></td>
<td><input type="checkbox" id="matrix54" value="1"></td>
<td><input type="checkbox" id="matrix55" value="1"></td>
<td><input type="checkbox" id="matrix56" value="1"></td>
</tr>
<tr>
<td>Patient/resident experience</td>
<td><input type="checkbox" id="matrix57" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix58" value="1"></td>
<td><input type="checkbox" id="matrix59" value="1"></td>
<td><input type="checkbox" id="matrix60" value="1"></td>
<td><input type="checkbox" id="matrix61" value="1"></td>
<td><input type="checkbox" id="matrix62" value="1"></td>
<td><input type="checkbox" id="matrix63" value="1"></td>
<td><input type="checkbox" id="matrix64" value="1"></td>
</tr>
<tr>
<td>Operational efficiency</td>
<td><input type="checkbox" id="matrix65" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix66" value="1"></td>
<td><input type="checkbox" id="matrix67" value="1"></td>
<td><input type="checkbox" id="matrix68" value="1"></td>
<td><input type="checkbox" id="matrix69" value="1"></td>
<td><input type="checkbox" id="matrix70" value="1"></td>
<td><input type="checkbox" id="matrix71" value="1"></td>
<td><input type="checkbox" id="matrix72" value="1"></td>
</tr>
<tr>
<td>Sustainability</td>
<td><input type="checkbox" id="matrix73" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix74" value="1"></td>
<td><input type="checkbox" id="matrix75" value="1"></td>
<td><input type="checkbox" id="matrix76" value="1"></td>
<td><input type="checkbox" id="matrix77" value="1"></td>
<td><input type="checkbox" id="matrix78" value="1"></td>
<td><input type="checkbox" id="matrix79" value="1"></td>
<td><input type="checkbox" id="matrix80" value="1"></td>
</tr>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input').not(this).prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
</script>
</tbody>
</tbody>
</p>

You could add a class (like .checkbox) to each of your checkboxes and then perform something like this before submit -
if ($(".checkbox:checked").length > 0) {
//perform submit
}
else{
alert("check at least one checkbox!");
}

You could also use ".is: for more readability.
if ( $( '.checkbox' ).is( ':checked' ) ) {
// atleast one checked
} else {
// none checked
}
Example: https://jsfiddle.net/rr3vfymy/

First of all, your HTML isn't well-formed. You should close one table element before starting a new one.
Then start by distinguishing your tables by id, or at least by class, for example:
<table id="cost-table" border="1" align="center">
and then check, if at least one is checked. If you are using jQuery, you can use something like:
$( document ).ready( function() {
// you should use id on form too, this will bug if you have more forms on your page
$( "form" ).submit( function( event ) {
if( $( "#cost-table input[type=checkbox]:checked" ).length === 0 ) {
event.preventDefault();
//alert user here
alert('You need to select at least one cost type');
}
});
});
and the same for other types.

Categories