www.webdeveloper.com
Results 1 to 4 of 4

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

  1. #1
    Join Date
    May 2012
    Posts
    3

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

    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">&nbsp;</td>
    <td width="289">&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</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>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    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>
    Last edited by Padonak; 05-26-2012 at 12:24 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    May 2012
    Posts
    3
    That did the trick, thanks much.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    good to hear ))
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles