dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

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

    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 2012
    Posts
    59
    Look at document.getElementById("ID here")
    And look at .checked
    To set a value just use .value

    Better still, use a JS Framework like jQuery or Prototype which will make this job easier.

    Kind regards,
    Scott

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