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.
Related
I am working on a test and bumped into a problem.
How do I make a .js script that only enables button when all fields are checked.
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q1" value="1" id="q1"></td>
<td><input type="radio" name="q1" value="2" id="q1"></td>
<td><input type="radio" name="q1" value="3" id="q1"></td>
<td><input type="radio" name="q1" value="4" id="q1"></td>
<td><input type="radio" name="q1" value="5" id="q1"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q2" value="1" id="q2"></td>
<td><input type="radio" name="q2" value="2" id="q2"></td>
<td><input type="radio" name="q2" value="3" id="q2"></td>
<td><input type="radio" name="q2" value="4" id="q2"></td>
<td><input type="radio" name="q2" value="5" id="q2"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q3" value="1" id="q3"></td>
<td><input type="radio" name="q3" value="2" id="q3"></td>
<td><input type="radio" name="q3" value="3" id="q3"></td>
<td><input type="radio" name="q3" value="4" id="q3"></td>
<td><input type="radio" name="q3" value="5" id="q3"></td>
</td>
</tr>
<div class="register-button">
<input type="submit" name="submit1" class="inputButton" id="submit1" value="Következő" disabled id="enable-on-two" />
</div>
I have found this .js online, but I can't make it fit well as I have multiple pages of test questions with different input names.
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}
function onChange() {
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3;
}
document.getElementById('world').addEventListener('change', onChange, false);
There were some issues with your codebase.
document.getElementById('world').addEventListener('change', onChange, false);
Issue There is no node with that specified id.
Submit button has more than one id. That is not possible.
document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked')
Your input type is radio so the above one wont work. Also the name attribute is wrong.
I have added those fixes.
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=radio]:checked').length;
}
function onChange() {
console.log(numberOfCheckboxesSelected());
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3;
}
document.querySelectorAll('input[type=radio]').forEach(node => {
node.addEventListener('change', onChange, false);
});
<table>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q1" value="1" id="q1"></td>
<td><input type="radio" name="q1" value="2" id="q1"></td>
<td><input type="radio" name="q1" value="3" id="q1"></td>
<td><input type="radio" name="q1" value="4" id="q1"></td>
<td><input type="radio" name="q1" value="5" id="q1"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q2" value="1" id="q2"></td>
<td><input type="radio" name="q2" value="2" id="q2"></td>
<td><input type="radio" name="q2" value="3" id="q2"></td>
<td><input type="radio" name="q2" value="4" id="q2"></td>
<td><input type="radio" name="q2" value="5" id="q2"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q3" value="1" id="q3"></td>
<td><input type="radio" name="q3" value="2" id="q3"></td>
<td><input type="radio" name="q3" value="3" id="q3"></td>
<td><input type="radio" name="q3" value="4" id="q3"></td>
<td><input type="radio" name="q3" value="5" id="q3"></td>
</td>
</tr>
</table>
<div class="register-button">
<input type="submit" name="submit1" class="inputButton" value="Következő" disabled
id="enable-on-two" />
</div>
The above solution needs a little correction as it enables the submit button on two inputs selection instead of all three.
Replace following:
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
By this:
let totalInputs = document.querySelectorAll('input[type=radio]').length;
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < totalInputs;
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>
I have the following function which works great in chrome, but in IE 11 doesn't.
It is designed to:
Take a questionGroup value determining which group of questions we want an average score for
Get a collections of the inputs on the page
Loop through them
If they are 'checked' then get the class name which determines the group the question is in
Count the number of questions in the group we're looking for
Get the total score for all questions in the group
Divide the total score by the number of questions to get the average score for the group
function getGroupScore(questionGroup) {
var inputs = document.getElementsByTagName("input");
var countOfQs = 0;
var totalGroupScore = 0;
for (var element in inputs) {
if (inputs[element].checked) {
var theQuestionsGroup = inputs[element].className;
if (theQuestionsGroup == questionGroup) {
var answer = parseInt(inputs[element].value)
totalGroupScore += answer;
countOfQs++;
}
}
}
var groupScore = totalGroupScore / countOfQs;
return groupScore;
}
In debugging, the loop seems to never get passed the following stage:
if (inputs[element].checked)
Even though there are input fields that are checked
example of the form I'm looping through:
<form action="">
<table style="margin: 0 auto; border: none;" id="reschecklist">
<tbody>
<tr>
<td rowspan="3" valign="top" width="400"><h3>Questions</h3></td>
<td colspan="5" class="center"><h3>Score</h3></td>
</tr>
<tr>
<td colspan="2" class="left"><strong>(not at all)</strong></td>
<td colspan="3" align="right" class="right"><strong>(I am fully implementing this)</strong></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="heading" width="400"><strong>Minimise overhead costs</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="question"><p>Do you consider and identify ways to maintain machinery better and cheaper?</p></td>
<td><input type="radio" name="q1" value="1" class="grp1" /></td>
<td><input type="radio" name="q1" value="2" class="grp1" /></td>
<td><input type="radio" name="q1" value="3" class="grp1" /></td>
<td><input type="radio" name="q1" value="4" class="grp1" /></td>
<td><input type="radio" name="q1" value="5" class="grp1" /></td>
</tr>
<tr>
<td class="question"><p>Do you regularly review your overhead costs i.e. can you identify how much they cost you on a monthly, 6 monthly, annual basis?</p></td>
<td><input type="radio" name="q2" value="1" class="grp1" /></td>
<td><input type="radio" name="q2" value="2" class="grp1" /></td>
<td><input type="radio" name="q2" value="3" class="grp1" /></td>
<td><input type="radio" name="q2" value="4" class="grp1" /></td>
<td><input type="radio" name="q2" value="5" class="grp1" /></td>
</tr>
<tr>
<td class="heading" width="400"><strong>Set goals and budgets</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="question"><p>Do you have a clearly set out vision and objectives for the business?</p></td>
<td><input type="radio" name="q3" value="1" class="grp2" /></td>
<td><input type="radio" name="q3" value="2" class="grp2" /></td>
<td><input type="radio" name="q3" value="3" class="grp2" /></td>
<td><input type="radio" name="q3" value="4" class="grp2" /></td>
<td><input type="radio" name="q3" value="5" class="grp2" /></td>
</tr>
<tr>
<td class="question"><p>Do you routinely (every 3-6 months), with your partner/s or your team, take a hands off view of the business and discuss objectives, performance etc?</p></td>
<td><input type="radio" name="q4" value="1" class="grp2" /></td>
<td><input type="radio" name="q4" value="2" class="grp2" /></td>
<td><input type="radio" name="q4" value="3" class="grp2" /></td>
<td><input type="radio" name="q4" value="4" class="grp2" /></td>
<td><input type="radio" name="q4" value="5" class="grp2" /></td>
</tr>
for-in is not how you loop through an HTMLCollection. Use a simple for or one of the "array like" approaches in this answer (which also explains why for-in isn't the right choice here). I suspect the problem is that there are no enumerable properties in the HTMLCollection on the platform where you're seeing the problem.
So for instance:
for (var element = 0 ; element < inputs.length; ++elements) {
In modern environments, HTMLCollection (what you get back from getElementsByTagName) may have the non-standard extension making it iterable (ES2015+) and giving it a forEach. If not, you can easily add it:
if (typeof NodeList !== "undefined" &&
NodeList.prototype &&
!NodeList.prototype.forEach) {
// Yes, direct assignment is fine here, no need for `Object.defineProperty`
NodeList.prototype.forEach = Array.prototype.forEach;
}
if (typeof HTMLCollection !== "undefined" &&
HTMLCollection.prototype &&
!HTMLCollection.prototype.forEach) {
// Yes, direct assignment is fine here, no need for `Object.defineProperty`
HTMLCollection.prototype.forEach = Array.prototype.forEach;
}
That code does both HTMLCollection and NodeList (what you get from querySelectorAll). Then you can use:
inputs.forEach(function(input) {
if (input.checked) {
// ...
}
});
<tr id="subpage_title1">
<td class="order minus">1</td>
<td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="1" value="3000"></td>
<td></td>
</tr><tr id="subpage_title2">
<td class="order ">2</td>
<td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="2" value="3000"></td>
<td></td>
</tr>
<tr id="subpage_title3" style="display: table-row;">
<td class="order">3</td>
<td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="3" value="3000"></td>
<td><a class="btn-remove-tr btn btn-small">Delete Floor</a></td>
</tr>
<tr id="subpage_title4" style="display: table-row;">
<td class="order">4</td><td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="4" value="2000"></td>
<td><a class="btn-remove-tr btn btn-small">Delete Floor</a></td>
</tr>
I'm tired to get value input class="sum" from last tr only, please some one help me!!
if i delete one row i must get the last value and if i add another row i must get the last value
Try this:
$( "tr:last td input.sum" )
The html:
<table>
<tr id="subpage_title1">
<td class="order minus">1</td>
<td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="1" value="3000"></td>
<td></td>
</tr><tr id="subpage_title2">
<td class="order ">2</td>
<td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="2" value="3000"></td>
<td></td>
</tr>
<tr id="subpage_title3" style="display: table-row;">
<td class="order">3</td>
<td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="3" value="3000"></td>
<td><a class="btn-remove-tr btn btn-small">Delete Floor</a></td>
</tr>
<tr id="subpage_title4" style="display: table-row;">
<td class="order">4</td><td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="4" value="2000"></td>
<td><a class="btn-remove-tr btn btn-small">Delete Floor</a></td>
</tr>
</table>
script:
$(function(){
var value = $( "tr:last td input.sum" ).val()
console.log(value)
})
Fiddle here
console.log($('table tr:last td input.sum').val())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="subpage_title1">
<td class="order minus">1</td>
<td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="1" value="3000"></td>
<td></td>
</tr><tr id="subpage_title2">
<td class="order ">2</td>
<td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="2" value="3000"></td>
<td></td>
</tr>
<tr id="subpage_title3" style="display: table-row;">
<td class="order">3</td>
<td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="3" value="3000"></td>
<td><a class="btn-remove-tr btn btn-small">Delete Floor</a></td>
</tr>
<tr id="subpage_title4" style="display: table-row;">
<td class="order">4</td><td><input type="checkbox" name="checkF[]" checked="" value=""> Front (A)</td>
<td><input type="checkbox" name="checkB[]" value=""> Back (C)</td>
<td><input id="hfloor" class="sum" name="hfloor[]" type="number" min="100" max="5000" step="4" value="2000"></td>
<td><a class="btn-remove-tr btn btn-small">Delete Floor</a></td>
</tr>
<table>
try this.
I have following code to check maximum values of cars. But Whenever I select 10 in the table I didn't get the max value as 10 corresponding to the car.It is working good for other values except 10.
I debugged with alert and then I found the control is not at all entering in if condition even when the index[k] > max?
function findTop() {
var cars = ["Hyundai", "Maruti Suzuki", "Honda", "Chevrolet", "Tata"];
var index = [cars.length];
for (var i = 0; i < cars.length; i++) {
var list = document.getElementsByName(cars[i]);
for (var j = 0; j < 10; j++) {
if (list[j].checked == true) {
index[i] = list[j].value;
}
}
}
var max = 0;
var maxIndex = 0;
var text = "";
for (var k = 0; k < index.length; k++) {
alert(index[k] + " " + max);
if (index[k] >= max) {
alert(index[k] + " " + max);
max = index[k];
alert("max" + max);
maxIndex = k;
}
}
for (var l = 0; l < 5; l++) {
if (max == index[l]) {
text = text + " " + cars[l];
}
}
document.getElementById("output").innerHTML = text + "   " + max;
}
<form>
<table border="1px" width="100%">
<tr>
<td></td>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">10</td>
</tr>
<tr>
<td align="center">Hyundai</td>
<td align="center">
<input type="radio" name="Hyundai" value="1">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="2">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="3">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="4">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="5">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="6">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="7">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="8">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="9">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="10">
</td>
</tr>
<tr>
<td align="center">Maruti Suzuki</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="1">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="2">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="3">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="4">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="5">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="6">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="7">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="8">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="9">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="10">
</td>
</tr>
<tr>
<td align="center">Honda</td>
<td align="center">
<input type="radio" name="Honda" value="1">
</td>
<td align="center">
<input type="radio" name="Honda" value="2">
</td>
<td align="center">
<input type="radio" name="Honda" value="3">
</td>
<td align="center">
<input type="radio" name="Honda" value="4">
</td>
<td align="center">
<input type="radio" name="Honda" value="5">
</td>
<td align="center">
<input type="radio" name="Honda" value="6">
</td>
<td align="center">
<input type="radio" name="Honda" value="7">
</td>
<td align="center">
<input type="radio" name="Honda" value="8">
</td>
<td align="center">
<input type="radio" name="Honda" value="9">
</td>
<td align="center">
<input type="radio" name="Honda" value="10">
</td>
</tr>
<tr>
<td align="center">Chevrolet</td>
<td align="center">
<input type="radio" name="Chevrolet" value="1">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="2">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="3">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="4">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="5">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="6">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="7">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="8">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="9">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="10">
</td>
</tr>
<tr>
<td align="center">Tata</td>
<td align="center">
<input type="radio" name="Tata" value="1">
</td>
<td align="center">
<input type="radio" name="Tata" value="2">
</td>
<td align="center">
<input type="radio" name="Tata" value="3">
</td>
<td align="center">
<input type="radio" name="Tata" value="4">
</td>
<td align="center">
<input type="radio" name="Tata" value="5">
</td>
<td align="center">
<input type="radio" name="Tata" value="6">
</td>
<td align="center">
<input type="radio" name="Tata" value="7">
</td>
<td align="center">
<input type="radio" name="Tata" value="8">
</td>
<td align="center">
<input type="radio" name="Tata" value="9">
</td>
<td align="center">
<input type="radio" name="Tata" value="10">
</td>
</tr>
<tr>
<td colspan="11" align="center">
<input type="button" value="Top" onclick="findTop()">
</td>
</tr>
</table>
</form>
<p id="output"></p>
Sorry, I dont know how to add Jsfiddle link? Any suggestions what I am doing wrong?
Your values are all strings; "10" (the string) will never be greater than the string-compared values "9", etc.
You need to make sure your comparisons are numeric, which you can do like so:
if (+index[k] >= max) {
function findTop() {
var cars = ["Hyundai", "Maruti Suzuki", "Honda", "Chevrolet", "Tata"];
var index = [cars.length];
for (var i = 0; i < cars.length; i++) {
var list = document.getElementsByName(cars[i]);
for (var j = 0; j < 10; j++) {
if (list[j].checked == true) {
index[i] = list[j].value;
}
}
}
var max = 0;
var maxIndex = 0;
var text = "";
for (var k = 0; k < index.length; k++) {
console.log(index[k] + " " + max);
console.log(typeof index[k]);
if (+index[k] >= max) {
console.log(index[k] + " " + max);
max = index[k];
console.log("max " + max);
maxIndex = k;
}
}
for (var l = 0; l < 5; l++) {
if (max == index[l]) {
text = text + " " + cars[l];
}
}
document.getElementById("output").innerHTML = text + "   " + max;
}
<form>
<table border="1px" width="100%">
<tr>
<td></td>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">10</td>
</tr>
<tr>
<td align="center">Hyundai</td>
<td align="center">
<input type="radio" name="Hyundai" value="1">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="2">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="3">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="4">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="5">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="6">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="7">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="8">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="9">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="10">
</td>
</tr>
<tr>
<td align="center">Maruti Suzuki</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="1">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="2">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="3">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="4">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="5">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="6">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="7">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="8">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="9">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="10">
</td>
</tr>
<tr>
<td align="center">Honda</td>
<td align="center">
<input type="radio" name="Honda" value="1">
</td>
<td align="center">
<input type="radio" name="Honda" value="2">
</td>
<td align="center">
<input type="radio" name="Honda" value="3">
</td>
<td align="center">
<input type="radio" name="Honda" value="4">
</td>
<td align="center">
<input type="radio" name="Honda" value="5">
</td>
<td align="center">
<input type="radio" name="Honda" value="6">
</td>
<td align="center">
<input type="radio" name="Honda" value="7">
</td>
<td align="center">
<input type="radio" name="Honda" value="8">
</td>
<td align="center">
<input type="radio" name="Honda" value="9">
</td>
<td align="center">
<input type="radio" name="Honda" value="10">
</td>
</tr>
<tr>
<td align="center">Chevrolet</td>
<td align="center">
<input type="radio" name="Chevrolet" value="1">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="2">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="3">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="4">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="5">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="6">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="7">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="8">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="9">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="10">
</td>
</tr>
<tr>
<td align="center">Tata</td>
<td align="center">
<input type="radio" name="Tata" value="1">
</td>
<td align="center">
<input type="radio" name="Tata" value="2">
</td>
<td align="center">
<input type="radio" name="Tata" value="3">
</td>
<td align="center">
<input type="radio" name="Tata" value="4">
</td>
<td align="center">
<input type="radio" name="Tata" value="5">
</td>
<td align="center">
<input type="radio" name="Tata" value="6">
</td>
<td align="center">
<input type="radio" name="Tata" value="7">
</td>
<td align="center">
<input type="radio" name="Tata" value="8">
</td>
<td align="center">
<input type="radio" name="Tata" value="9">
</td>
<td align="center">
<input type="radio" name="Tata" value="10">
</td>
</tr>
<tr>
<td colspan="11" align="center">
<input type="button" value="Top" onclick="findTop()">
</td>
</tr>
</table>
</form>
<p id="output"></p>