Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

client side calculating a form 1

Status
Not open for further replies.
Dashley

Dashley

Programmer
Dec 5, 2002
925
US
Hi,

I have a html page (full code is below). It basically asks six questions and scores and keeps a running total in the second to last Textbox. (a sample I found)

I'm trying to figure out how to add pass or fail text in the last textbox (named passfail) if the total score is below 4 or if question 2 or 4 are marked "F".

Any help would be greatly appreciated.

Thanks
Dan




Code: 
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function zxcSubTotal(obj,id,tid){
zxct=document.getElementById(tid);
if (!zxct.ary){ zxct.ary=new Array(); }
zxccbs=obj.getElementsByTagName('INPUT');
for (zxc0=0;zxc0<zxccbs.length;zxc0++){
if (zxccbs[zxc0].type=='checkbox'&&zxccbs[zxc0].checked){
document.getElementById(id).value=zxccbs[zxc0].value;
if (!zxccbs[zxc0].set){
zxccbs[zxc0].set=true;
zxct.ary[zxct.ary.length]=zxccbs[zxc0];
}
}
}
zxcv=0
for (zxc1=0;zxc1<zxct.ary.length;zxc1++){
if (zxct.ary[zxc1].checked){
zxcv+=parseFloat(zxct.ary[zxc1].value);
}
}
zxct.value=zxcv;
}

</script>
</head>
<body onload="f6_OneCheckBox()">
<table border="1">
<TR><TD colspan="3"><table width="100%">
<TR><TD align='center'>&nbsp;<TD align='center'>P<TD align='center'>F</TD></TR>
</Table>
<tr onclick="zxcSubTotal(this,'Group1','Total');">
<td>1.
<td><input title="f6_Group1" type="checkbox" value="1"></td>
<td><input title="f6_Group1" type="checkbox" value="0"></td>
<input id="Group1"type="hidden" name=""></td>
</tr>
<tr onclick="zxcSubTotal(this,'Group2','Total');">
<td>2.
<td><input title="f6_Group2" type="checkbox" value="1" name=""></td>
<td><input title="f6_Group2" type="checkbox" value="0" name=""></td>
<input id="Group2"type="hidden" name=""></td>
</tr>
<tr onclick="zxcSubTotal(this,'Group3','Total');">
<td>3.
<td><input title="f6_Group3" type="checkbox" value="1" name=""></td>
<td><input title="f6_Group3" type="checkbox" value="0" name=""></td>
<input id="Group3"type="hidden" name=""></td>
</tr>
<tr onclick="zxcSubTotal(this,'Group4','Total');">
<td>4.
<td><input title="f6_Group4" type="checkbox" value="1" name=""></td>
<td><input title="f6_Group4" type="checkbox" value="0" name=""></td>
<input id="Group4"type="hidden" name=""></td>
</tr>

<tr onclick="zxcSubTotal(this,'Group5','Total');">
<td>5.
<td><input title="f6_Group5" type="checkbox" value="1" name=""></td>
<td><input title="f6_Group5" type="checkbox" value="0" name=""></td>
<input id="Group5"type="hidden" name=""></td>
</tr>

<tr onclick="zxcSubTotal(this,'Group6','Total');">
<td>6.
<td><input title="f6_Group6" type="checkbox" value="1" name=""></td>
<td><input title="f6_Group6" type="checkbox" value="0" name=""></td>
<input id="Group6"type="hidden" name=""></td>
</tr>

<tr >
<td colspan=3 ><input id="Total"type="text" name="total" size=5 ></td>
</tr>
<TR><TD colspan="3"><INPUT type="text" size="5" name="passfail">
</table>

<script language="JavaScript" type="text/javascript">
<!--
function f6_OneCheckBox(){
f6_cbs=document.getElementsByTagName('INPUT');
for (f6_0=0;f6_0<f6_cbs.length;f6_0++){
if (f6_cbs[f6_0].title.substring(0,3)=='f6_'){
f6_cbs[f6_0].onclick=function(){ f6_CheckOnlyOne(this); }
}
}
}
function f6_CheckOnlyOne(f6_){
for (f6_0=0;f6_0<f6_cbs.length;f6_0++){
if (f6_cbs[f6_0].title==f6_.title&&f6_cbs[f6_0]!=f6_){
f6_cbs[f6_0].checked=false;
}
}
}
</script>
</body>
</html>
 
Sort by date Sort by votes
This does what you want. I commented the changes, you can leave them in or take them out. It works either way. Assign id's that you want, just remember to change them in the if/else statement.


<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function zxcSubTotal(obj,id,tid){
zxct=document.getElementById(tid);
if (!zxct.ary){ zxct.ary=new Array(); }
zxccbs=obj.getElementsByTagName('INPUT');
for (zxc0=0;zxc0<zxccbs.length;zxc0++){
if (zxccbs[zxc0].type=='checkbox'&&zxccbs[zxc0].checked){
document.getElementById(id).value=zxccbs[zxc0].value;
if (!zxccbs[zxc0].set){
zxccbs[zxc0].set=true;
zxct.ary[zxct.ary.length]=zxccbs[zxc0];
}
}
}
zxcv=0
for (zxc1=0;zxc1<zxct.ary.length;zxc1++){
if (zxct.ary[zxc1].checked){
zxcv+=parseFloat(zxct.ary[zxc1].value);
}
}
zxct.value=zxcv;
<!--Start new code-->
if ((zxcv < 4) || (document.getElementById("2f").checked) || (document.getElementById("4f").checked)){
document.getElementById("passfail").value = "Fail"
}
else {
document.getElementById("passfail").value = "Pass"
}
<!--End new code-->
}

</script>
</head>
<body onload="f6_OneCheckBox()">
<table border="1">
<TR><TD colspan="3"><table width="100%">
<TR><TD align='center'>&nbsp;<TD align='center'>P<TD align='center'>F</TD></TR>
</Table>
<tr onclick="zxcSubTotal(this,'Group1','Total');">
<td>1.
<td><input title="f6_Group1" type="checkbox" value="1"></td>
<td><input title="f6_Group1" type="checkbox" value="0"></td>
<input id="Group1"type="hidden" name=""></td>
</tr>
<tr onclick="zxcSubTotal(this,'Group2','Total');">
<td>2.
<td><input title="f6_Group2" type="checkbox" value="1" name=""></td>
<!--Assign id to this td-->
<td><input title="f6_Group2" type="checkbox" value="0" name="" id="2f"></td>
<input id="Group2"type="hidden" name=""></td>
</tr>
<tr onclick="zxcSubTotal(this,'Group3','Total');">
<td>3.
<td><input title="f6_Group3" type="checkbox" value="1" name=""></td>
<td><input title="f6_Group3" type="checkbox" value="0" name=""></td>
<input id="Group3"type="hidden" name=""></td>
</tr>
<tr onclick="zxcSubTotal(this,'Group4','Total');">
<td>4.
<td><input title="f6_Group4" type="checkbox" value="1" name=""></td>
<!--Assign id to this td-->
<td><input title="f6_Group4" type="checkbox" value="0" name="" id="4f"></td>
<input id="Group4"type="hidden" name=""></td>
</tr>

<tr onclick="zxcSubTotal(this,'Group5','Total');">
<td>5.
<td><input title="f6_Group5" type="checkbox" value="1" name=""></td>
<td><input title="f6_Group5" type="checkbox" value="0" name=""></td>
<input id="Group5"type="hidden" name=""></td>
</tr>

<tr onclick="zxcSubTotal(this,'Group6','Total');">
<td>6.
<td><input title="f6_Group6" type="checkbox" value="1" name=""></td>
<td><input title="f6_Group6" type="checkbox" value="0" name=""></td>
<input id="Group6"type="hidden" name=""></td>
</tr>

<tr >
<td colspan=3 ><input id="Total"type="text" name="total" size=5 onChange="result()"></td>
</tr>
<TR><!--Closed td and tr assigned id to this td and set initial value to start--><TD colspan="3"><INPUT type="text" size="5" name="passfail" id="passfail" value="Start"></td>
</tr>
</table>

<script language="JavaScript" type="text/javascript">
<!--
function f6_OneCheckBox(){
f6_cbs=document.getElementsByTagName('INPUT');
for (f6_0=0;f6_0<f6_cbs.length;f6_0++){
if (f6_cbs[f6_0].title.substring(0,3)=='f6_'){
f6_cbs[f6_0].onclick=function(){ f6_CheckOnlyOne(this); }
}
}
}
function f6_CheckOnlyOne(f6_){
for (f6_0=0;f6_0<f6_cbs.length;f6_0++){
if (f6_cbs[f6_0].title==f6_.title&&f6_cbs[f6_0]!=f6_){
f6_cbs[f6_0].checked=false;
}
}
}
</script>
</body>
</html>
 
Upvote 0 Downvote
hispeedtech


Wow Thanks.
I havent done much JS over the years but the more I see of it the more I like it. I'll really look over the code to see what its doing later so I can learn it.

Thanks Again

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
707
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
471
xwb
xwb
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
651
ggriffit
ggriffit
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
88
Dara2020
Dara2020

Part and Inventory Search

Sponsor

Back
Top