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

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

Related

check / uncheck group based on aother group

there is 4 groups of imputs
blacklist (option yes or no)
3 groups A B C (with range from 0 to 10)
What i want to do:
if blacklist is checked yes than group A B C is checked 0
if blacklist is checked no than A B C is unchecked (clear) and user can check each option from 0-10 in each group ABC
if blacklist is checked yes and A B C is checked 0 and than you check anything else than 0 from group A B C, blacklist will change from Yes to No
It is working, but i tried to put in in the table second code and have no idea how to do it to work. naybe somebody can tell me hot to to it in easier way
<html>
<body>
<link rel='stylesheet' href='css/style.css'>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
padding: 10px;
}
th:empty {
border: 0;
}
</style>
<form action="">
TAK <input type="radio" name="sz" id="ok" value="1" />
NIE <input type="radio" name="sz" id="fb" value="2" />
<div id="ResultCatego">
<input type="radio" name="ResultCategories" id="tak" value="0" /> 0
<input type="radio" name="ResultCategories" value="1" /> 1
<input type="radio" name="ResultCategories" value="2" /> 2
<input type="radio" name="ResultCategories" value="3" /> 3
<input type="radio" name="ResultCategories" value="4" /> 4
<input type="radio" name="ResultCategories" value="5" /> 5
<input type="radio" name="ResultCategories" value="6" /> 6
<input type="radio" name="ResultCategories" value="7" /> 7
<input type="radio" name="ResultCategories" value="8" /> 8
<input type="radio" name="ResultCategories" value="9" /> 9
<input type="radio" name="ResultCategories" value="10" /> 10
</div>
<BR>
<div id="ResultCatego1">
<input type="radio" name="ResultCategorie" id="tak" value="0" /> 0
<input type="radio" name="ResultCategorie" value="1" /> 1
<input type="radio" name="ResultCategorie" value="2" /> 2
<input type="radio" name="ResultCategorie" value="3" /> 3
<input type="radio" name="ResultCategorie" value="4" /> 4
<input type="radio" name="ResultCategorie" value="5" /> 5
<input type="radio" name="ResultCategorie" value="6" /> 6
<input type="radio" name="ResultCategorie" value="7" /> 7
<input type="radio" name="ResultCategorie" value="8" /> 8
<input type="radio" name="ResultCategorie" value="9" /> 9
<input type="radio" name="ResultCategorie" value="10" /> 10
</div>
<BR>
<div id="ResultCatego2">
<input type="radio" name="ResultCategor" id="tak" value="0" /> 0
<input type="radio" name="ResultCategor" value="1" /> 1
<input type="radio" name="ResultCategor" value="2" /> 2
<input type="radio" name="ResultCategor" value="3" /> 3
<input type="radio" name="ResultCategor" value="4" /> 4
<input type="radio" name="ResultCategor" value="5" /> 5
<input type="radio" name="ResultCategor" value="6" /> 6
<input type="radio" name="ResultCategor" value="7" /> 7
<input type="radio" name="ResultCategor" value="8" /> 8
<input type="radio" name="ResultCategor" value="9" /> 9
<input type="radio" name="ResultCategor" value="10" /> 10
</div>
<script>
const ok = document.querySelector('#ok');
const categoriesWrapper = document.querySelector('#ResultCatego');
const categoriesWrapper1 = document.querySelector('#ResultCatego1');
const categoriesWrapper2 = document.querySelector('#ResultCatego2');
const fb = document.querySelector('#fb');
fb.addEventListener('click', (event) => {
const checked = categoriesWrapper.querySelector('input:checked');
if (checked) {
categoriesWrapper.querySelector('input:checked').checked = false;
}
});
fb.addEventListener('click', (event) => {
const checked = categoriesWrapper1.querySelector('input:checked');
if (checked) {
categoriesWrapper1.querySelector('input:checked').checked = false;
}
});
fb.addEventListener('click', (event) => {
const checked = categoriesWrapper2.querySelector('input:checked');
if (checked) {
categoriesWrapper2.querySelector('input:checked').checked = false;
}
});
ok.addEventListener('click', (event) => {
categoriesWrapper.querySelector('#tak').checked = true;
});
ok.addEventListener('click', (event) => {
categoriesWrapper1.querySelector('#tak').checked = true;
});
ok.addEventListener('click', (event) => {
categoriesWrapper2.querySelector('#tak').checked = true;
});
categoriesWrapper.addEventListener('click', (event) => {
if (event.target.id !== 'tak') {
fb.checked = true;
}
});
categoriesWrapper1.addEventListener('click', (event) => {
if (event.target.id !== 'tak') {
fb.checked = true;
}
});
categoriesWrapper2.addEventListener('click', (event) => {
if (event.target.id !== 'tak') {
fb.checked = true;
}
});
</script>
</body>
</html>
table where i want to put it:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<meta charset='UTF-8'>
<title>Formularz ocen</title>
<link rel='stylesheet' href='css/style.css'>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
padding: 10px;
}
th:empty {
border: 0;
}
</style>
<form name="form1">
<table>
<tr>
<td>NIP</td>
<td colspan="11"><input type="text"></td>
</tr>
<tr>
<td>Black list</td>
<td><input type="radio" name="sz" id="ok" value="1" ></td>
<td colspan="4">Yes</td>
<td><input type="radio" name="sz" id="fb" value="2" ></td>
<td colspan="4">NO</td>
</tr>
<tr>
<th></th>
<th>10</th>
<th>9</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
<th>0</th>
</tr>
<div id="ResultCatego">
<tr>
<td>A</td>
<td><input type="radio" name="komunikacja" value="10"></td>
<td><input type="radio" name="komunikacja" value="9"></td>
<td><input type="radio" name="komunikacja" value="8"></td>
<td><input type="radio" name="komunikacja" value="7"></td>
<td><input type="radio" name="komunikacja" value="6"></td>
<td><input type="radio" name="komunikacja" value="5"></td>
<td><input type="radio" name="komunikacja" value="4"></td>
<td><input type="radio" name="komunikacja" value="3"></td>
<td><input type="radio" name="komunikacja" value="2"></td>
<td><input type="radio" name="komunikacja" value="1"></td>
<td><input type="radio" name="komunikacja" id="tak" value="0"></td>
</tr>
<tr>
<td>B</td>
<td><input type="radio" name="problematycznosc" value="10"></td>
<td><input type="radio" name="problematycznosc" value="9"></td>
<td><input type="radio" name="problematycznosc" value="8"></td>
<td><input type="radio" name="problematycznosc" value="7"></td>
<td><input type="radio" name="problematycznosc" value="6"></td>
<td><input type="radio" name="problematycznosc" value="5"></td>
<td><input type="radio" name="problematycznosc" value="4"></td>
<td><input type="radio" name="problematycznosc" value="3"></td>
<td><input type="radio" name="problematycznosc" value="2"></td>
<td><input type="radio" name="problematycznosc" value="1"></td>
<td><input type="radio" name="problematycznosc" id="tak" value="0"></td>
</tr>
<tr>
<td>C</td>
<td><input type="radio" name="terminowosc" value="10"></td>
<td><input type="radio" name="terminowosc" value="9"></td>
<td><input type="radio" name="terminowosc" value="8"></td>
<td><input type="radio" name="terminowosc" value="7"></td>
<td><input type="radio" name="terminowosc" value="6"></td>
<td><input type="radio" name="terminowosc" value="5"></td>
<td><input type="radio" name="terminowosc" value="4"></td>
<td><input type="radio" name="terminowosc" value="3"></td>
<td><input type="radio" name="terminowosc" value="2"></td>
<td><input type="radio" name="terminowosc" value="1"></td>
<td><input type="radio" name="terminowosc" id="tak" value="0"></td>
</tr>
</div>
</table>
</form>
</body>
</html>

How to enable a button when radio button from all the sets are selected?

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;

JS .checked not working in for ... in loop - in IE11

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) {
// ...
}
});

JavaScript comparison in if not working?

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 + "&nbsp" + cars[l];
}
}
document.getElementById("output").innerHTML = text + "&nbsp&nbsp&nbsp" + 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 + "&nbsp" + cars[l];
}
}
document.getElementById("output").innerHTML = text + "&nbsp&nbsp&nbsp" + 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>

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.

Categories