When checkbox is unchecked I need the value to reset to 0

**todd223** · 05-25-2012 10:34 AM

FYI, I also posted this on the HTML forum as I wasn't sure where to post this so I apologize for any overlap.

Hi and thank you in advance. I apologize if this sounds confusing. I have a form that when you update textboxA for example to a certain value, textboxB will then post a calculated new value depending on what was typed into textboxA. It will then add all the textbox's and put their total in its own box.
My problem is when I uncheck a box I need textboxA and textboxB to return to 0 and for the total to be updated accordingly. As of right now it just leaves the value the the totals don't change. Any help would be greatly appreciated. I've supplied the code below. Thanks again.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript" type="text/javascript">

function toilet(){
a=Number(document.plumbing.number1.value);
b=Number(document.plumbing.total2.value);
c=Number(document.plumbing.total3.value);
d=Number(document.plumbing.total4.value);

cost=70.00;
subtotal=a*cost;
f_total=subtotal+b+c+d;
document.plumbing.total.value=subtotal;
document.plumbing.total_final.value=f_total;
}

function sink(){
a=Number(document.plumbing.number2.value);
b=Number(document.plumbing.total.value);
c=Number(document.plumbing.total2.value);
d=Number(document.plumbing.total3.value);
e=Number(document.plumbing.total4.value);

cost=50.00;
subtotal=a*cost;
f_total=subtotal+b+d+e;
document.plumbing.total2.value=subtotal;
document.plumbing.total_final.value=f_total;
}

function shower(){
a=Number(document.plumbing.number3.value);
b=Number(document.plumbing.total.value);
c=Number(document.plumbing.total2.value);
d=Number(document.plumbing.total3.value);
e=Number(document.plumbing.total4.value);

cost=445.00;
subtotal=a*cost;
f_total=subtotal+b+c+e;
document.plumbing.total3.value=subtotal;
document.plumbing.total_final.value=f_total;
}

function copper(){
a=Number(document.plumbing.number4.value);
b=Number(document.plumbing.total.value);
c=Number(document.plumbing.total2.value);
d=Number(document.plumbing.total3.value);
e=Number(document.plumbing.total4.value);

cost=3.75;
subtotal=a*cost;
f_total=subtotal+b+c+d;
document.plumbing.total4.value=subtotal;
document.plumbing.total_final.value=f_total;
}

</script>
</head>

<body>

<form name="plumbing">

<center>
<table width="750" border="1" cellpadding="0">
<tr>
<td width="130">Equipment</td>
<td width="155">Value</td>
<td width="156"> </td>
<td width="289"> </td>
</tr>
<tr>
<td height="95">
<input type="checkbox" value="TOILETS" id="toilets" name="toilets" onclick="javascript:toilet();" />
Toilet<br />
<input type="checkbox" value="SINKS" id="sinks" name="sinks" onclick="javascript:sink();" />
Sink<br />
<input type="checkbox" value="SHOWERS" id="showers" name="showers" onclick="javascript:shower();" />
Shower<br />
<input type="checkbox" value="COPPERPIPES" id="copperpipes" name="copperpipes" onclick="javascript:copper();" />
Copper Piping</td>
<td><p>
<input name="number1" type="text" value="0">
<br />
<input name="number2" type="text" value="0" />
<br />
<input name="number3" type="text" value="0">
<br />
<input name="number4" type="text" value="0" />

<br />
</p></td>
<td><input name="total" type="text" value="0" />
<br />
<input name="total2" type="text" value="0" />
<br />
<input name="total3" type="text" value="0" />
<br />
<input name="total4" type="text" value="0" />
<br />
<td colspan="2"><br />
<br />
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right">Total:</td>
<td><input name="total_final" type="text" value="0" id="total_final" /></td>
</tr>
</table>
</center>

<center><input type="reset" id="Clear" name="Clear"></center>

</form>
</body>
</html>

**Padonak** · 05-26-2012 12:22 PM

1 use the # button in the Editor when posting code
2 try the code below

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
body{text-align:center;font-family:Georgia,Verdana,Arial;font-size:13px;background:#fff;color:#000;padding:150px 0px 0px 0px;margin:0px 0px 0px 0px;}
input[type="text"]{text-align:center;border:none;background-color:transparent;}
</style>
<script language="javascript" type="text/javascript">
var prices=[
['toilet',70.00],
['sink',50.00],
['shower',445.00],
['copper',3.75]
];

function field(objname){var obj=eval('document.plumbing.'+objname);return obj;}

function chk(obj){
var item=obj.id;
if(!obj.checked){field(item+'_st').value=field(item+'_t').value='0';calc();}
}

function calc(){
var digits=/^[\d]{1,}$/m,a=0,Total=0;
for(var i in prices){
var item=prices[i][0],val=field(item+'_st').value;
if(digits.test(val)){a=parseInt(val)*prices[i][1];}
else{field(item+'_st').value=0;}
field(item+'_t').value=a;
Total+=a;
}
field('total_final').value=Total;
}

function init(){
for(var i in prices){
var item=prices[i][0];
field(item).onclick=function(){chk(this);}
field(item+'_st').onfocus=function(){var k=this.name.substring(0,this.name.indexOf('_')),temp=this.value;this.value=(temp=='0')?'':temp;if(!field(k).checked){field(k).checked=true;}}
field(item+'_st').onblur=function(){var k=this.name.substring(0,this.name.indexOf('_')),temp=this.value;this.value=(temp=='')?'0':temp;field(k).checked=(this.value=='0')?false:true;}
field(item+'_st').onchange=function(){calc();}
}
}

window.onload=init;
</script> 
</head> 
<body> 
<center>
<form name="plumbing" action=""> 
<table width="750" border="1" cellpadding="3" cellspacing="2">
<tbody>
<tr>
<td width="130">Equipment</td>
<td width="155">Value</td>
<td width="156">Total per item</td>
<td width="289">&nbsp;</td>
</tr>
<tr>
<td height="95" style="text-align:left">
<input type="checkbox" value="TOILETS" id="toilet" name="toilet" />&nbsp;&nbsp;Toilet<br />
<input type="checkbox" value="SINKS" id="sink" name="sink" />&nbsp;&nbsp;Sink<br />
<input type="checkbox" value="SHOWERS" id="shower" name="shower" />&nbsp;&nbsp;Shower<br />
<input type="checkbox" value="COPPERPIPES" id="copper" name="copper" />&nbsp;&nbsp;Copper Piping
</td>
<td>
<input name="toilet_st" type="text" value="0" /><br />
<input name="sink_st" type="text" value="0" /><br />
<input name="shower_st" type="text" value="0" /><br />
<input name="copper_st" type="text" value="0" /><br />
</td>
<td>
<input name="toilet_t" type="text" value="0" readonly="readonly" /><br />
<input name="sink_t" type="text" value="0" readonly="readonly" /><br />
<input name="shower_t" type="text" value="0" readonly="readonly" /><br />
<input name="copper_t" type="text" value="0" readonly="readonly" /><br />
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3" align="right">Total:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><input name="total_final" type="text" value="0" id="total_final" readonly="readonly" /></td>
</tr>
</tbody>
</table>
<div style="margin-top:20px;"><input type="reset" id="Clear" name="Clear" value="Clear" /></div>
</form>
</center>
</body>
</html>

**todd223** · 05-27-2012 08:32 AM

That did the trick, thanks much.

**Padonak** · 05-27-2012 08:46 AM

good to hear ))

Thread: When checkbox is unchecked I need the value to reset to 0

Thread Tools

Display

When checkbox is unchecked I need the value to reset to 0

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions