Hello,
I am extrememely new to Javascript. I have been doing some research online and copy/pasting code to create the results I need. I am trying to create an online survey in which users select buttons to answer questions and then the total results appear at the bottom of the survey. So far this is what I have:
http://sicolaconsulting.com/SurveyTest4.php
The problem I have with this is that on each line, a user can select more than one box. I don't want this so I thought radio buttons would be better. I then came up with this:
http://sicolaconsulting.com/SurveyTest3.php
The problem with this is that with the function I am using, I can only get it to display the value of the first line. I need it to calculate the sum of all the lines.
Can you help me revise the script I have to get my desired result.
Here is my code for the first page, followed by the code for the second page. THANK YOU!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>Survey</title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, sans-serif;
}
</style>
<link href="stylesheets/SCG_Styles.css" rel="stylesheet" type="text/css" />
<title>Survey</title>
<script type="text/javascript">
function TotalPart1A() {
document.survey.Total1A.value = '';
var sum = 0;
for (i=0;i<document.survey.Part1A.length;i++) {
if (document.survey.Part1A[i].checked) {
sum = sum + parseInt(document.survey.Part1A[i].value);
}
}
document.survey.Total1A.value = sum;
}
</script>
<link href="stylesheets/SCG_Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"><br />
<div id="survey-header"><strong>Purpose:</strong><br />
The Learning Style Survey assesses your general approach to learning. <br />
It does not predict your behavior, but it is a clear indication of your overall style preferences.<br />
<br />
<strong>Instructions:</strong><br />
For each item circle the response that represents your approach. Complete all items. <br />
There are eleven major activities representing twelve different aspects of your learning style. <br />
When you read the statements, try to think about what you generally do when learning. <br />
<br />
<strong>Time:</strong><br />
It takes about 30 minutes to complete the survey. Do not spend too much time on any item. Indicate your immediate response (or feeling) and move on to the next item. <br />
<br />
<strong>For each item, enter your immediate response:<br />
0 = Never 1 = Rarely 2 = Sometimes 3 = Often 4 = Always</strong><br />
</div>
<div id="survey">
<form name="survey">
<div id="survey-section1">
<table class="survey-table" cellspacing="0" width="812">
<tr>
<td height="24" colspan="2" align="left" bgcolor="#CCCCCC"><strong>Part 1: How I Use My Physical Senses</strong></td>
<td height="24" align="center" bgcolor="#CCCCCC"><strong>1</strong></td>
<td height="24" align="center" bgcolor="#CCCCCC"><strong>2</strong></td>
<td height="24" align="center" bgcolor="#CCCCCC"><strong>3</strong></td>
<td height="24" align="center" bgcolor="#CCCCCC"><strong>4</strong></td>
</tr>
<tr>
<td width="31" height="27">1</td>
<td width="515" align="left">I remember something better if I write it down.</td>
<td width="60"><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td width="60"><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td width="60"><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td width="60"><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td width="31" bgcolor="#EAEAEA">2</td>
<td height="27" align="left" bgcolor="#EAEAEA"> I take detailed notes during lectures.</td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td>3</td>
<td height="27" align="left">When I listen, I visualize pictures, numbers, or words in my head.</td>
<td><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">4</td>
<td height="27" align="left" bgcolor="#EAEAEA"> I prefer to learn with TV or video rather than other media. </td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td>5</td>
<td height="27" align="left"> I use color coding to help me as I learn to work.</td>
<td><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">6</td>
<td height="27" align="left" bgcolor="#EAEAEA"> I need written directions for tasks.</td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td>7</td>
<td height="27" align="left"> I have to look at people to understand what they say.</td>
<td><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">8</td>
<td height="27" align="left" bgcolor="#EAEAEA">I understand lecturers better when they write on the board.</td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td>9</td>
<td height="27" align="left">Charts, diagrams, and maps help me understand what someone says. </td>
<td><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">10</td>
<td height="27" align="left" bgcolor="#EAEAEA">I remember people’s faces, but not their names. </td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="checkbox" name="Part1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td> </td>
<td height="27" align="right">A TOTAL: </td>
<td colspan="2"><input type="text" size="10" name="Total1A" value="0"/></td>
<td align="right"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td height="27" align="right"> </td>
<td> </td>
<td> </td>
<td align="right"> </td>
<td> </td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
______________________________________________________________________ _________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>Survey</title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, sans-serif;
}
</style>
<link href="stylesheets/SCG_Styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function TotalPart1A() {
document.survey.Total1A.value = '';
var sum = 0;
for (i=0;i<document.survey.radiogroup1A.length;i++) {
if (document.survey.radiogroup1A[i].checked) {
sum = sum + parseInt(document.survey.radiogroup1A[i].value);
}
}
document.survey.Total1A.value = sum;
}
</script>
<link href="stylesheets/SCG_Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"><br />
<div id="survey-header"><strong>Purpose:</strong><br />
The Learning Style Survey assesses your general approach to learning. <br />
It does not predict your behavior, but it is a clear indication of your overall style preferences.<br />
<br />
<strong>Instructions:</strong><br />
For each item circle the response that represents your approach. Complete all items. <br />
There are eleven major activities representing twelve different aspects of your learning style. <br />
When you read the statements, try to think about what you generally do when learning. <br />
<br />
<strong>Time:</strong><br />
It takes about 30 minutes to complete the survey. Do not spend too much time on any item. Indicate your immediate response (or feeling) and move on to the next item. <br />
<br />
<strong>For each item, enter your immediate response:<br />
0 = Never 1 = Rarely 2 = Sometimes 3 = Often 4 = Always</strong><br />
</div>
<div id="survey">
<form name="survey" id="survey">
<div id="survey-section1">
<table class="survey-table" cellspacing="0" width="812">
<tr>
<td height="24" colspan="2" align="left" bgcolor="#CCCCCC"><strong>Part 1: How I Use My Physical Senses</strong></td>
<td height="24" align="center" bgcolor="#CCCCCC"><strong>1</strong></td>
<td height="24" align="center" bgcolor="#CCCCCC"><strong>2</strong></td>
<td height="24" align="center" bgcolor="#CCCCCC"><strong>3</strong></td>
<td height="24" align="center" bgcolor="#CCCCCC"><strong>4</strong></td>
</tr>
<tr>
<td width="31" height="27">1</td>
<td width="515" align="left">I remember something better if I write it down.</td>
<td width="60"><input type="radio" name="radiogroup1A" value="1" onchange="TotalPart1A()"/></td>
<td width="60"><input type="radio" name="radiogroup1A" value="2" onchange="TotalPart1A()"/></td>
<td width="60"><input type="radio" name="radiogroup1A" value="3" onchange="TotalPart1A()"/></td>
<td width="60"><input type="radio" name="radiogroup1A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td width="31" bgcolor="#EAEAEA">2</td>
<td height="27" align="left" bgcolor="#EAEAEA"> I take detailed notes during lectures.</td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup2A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup2A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup2A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup2A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td>3</td>
<td height="27" align="left">When I listen, I visualize pictures, numbers, or words in my head.</td>
<td><input type="radio" name="radiogroup3A" value="1" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup3A" value="2" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup3A" value="3" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup3A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">4</td>
<td height="27" align="left" bgcolor="#EAEAEA"> I prefer to learn with TV or video rather than other media. </td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup4A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup4A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup4A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup4A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td>5</td>
<td height="27" align="left"> I use color coding to help me as I learn to work.</td>
<td><input type="radio" name="radiogroup5A" value="1" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup5A" value="2" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup5A" value="3" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup5A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">6</td>
<td height="27" align="left" bgcolor="#EAEAEA"> I need written directions for tasks.</td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup6A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup6A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup6A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup6A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td>7</td>
<td height="27" align="left"> I have to look at people to understand what they say.</td>
<td><input type="radio" name="radiogroup7A" value="1" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup7A" value="2" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup7A" value="3" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup7A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">8</td>
<td height="27" align="left" bgcolor="#EAEAEA">I understand lecturers better when they write on the board.</td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup8A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup8A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup8A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup8A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td>9</td>
<td height="27" align="left">Charts, diagrams, and maps help me understand what someone says. </td>
<td><input type="radio" name="radiogroup9A" value="1" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup9A" value="2" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup9A" value="3" onchange="TotalPart1A()"/></td>
<td><input type="radio" name="radiogroup9A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">10</td>
<td height="27" align="left" bgcolor="#EAEAEA">I remember people’s faces, but not their names. </td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup10A" value="1" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup10A" value="2" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup10A" value="3" onchange="TotalPart1A()"/></td>
<td bgcolor="#EAEAEA"><input type="radio" name="radiogroup10A" value="4" onchange="TotalPart1A()"/></td>
</tr>
<tr>
<td> </td>
<td height="27" align="right">A TOTAL: </td>
<td colspan="2"><input type="text" size="10" name="Total1A" value="0"/></td>
<td align="right"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td height="27" align="right"> </td>
<td> </td>
<td> </td>
<td align="right"> </td>
<td> </td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>