Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript Help - Checkboxes

    So I'm making a little website, with the idea of allowing the customer to choose clothes via check boxes.

    There is 8 clothes for selection each like this <td><input type="checkbox" name="0001" value="0001"></td>

    up to 0008.

    i have a vague idea of how to assign a price to the 0001 and so forth but im not to sure if I'm heading in the right direction.

    So i need to put an if statement saying if the box is ticked the price = 15. If not it = 0.

    Here's what I've started with,

    var 0001price = document.merch.0001.value;
    document.merch.0001.value= (15);
    }

    any help would be appreciated greatly!

  • #2
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Forgot to check the rest of the forum first. Sorry.

    Will this help me

    http://www.codingforums.com/showthre...ght=checkboxes

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    You should *NOT* use names that start with a digit.

    Also, *probably* you want the names of all the checkboxes to be the same.

    SO something like:
    Code:
    <body>
    <form ...>
    <input type=hidden name="price_1" value="3.95">
    <input type=checkbox name="clothes" value="1" onclick="buy(this);"> Socks, $3.95 a pair
    
    <input type=hidden name="price_2" value="22.95">
    <input type=checkbox name="clothes" value="2" onclick="buy(this);"> Shoes, $22.95 a pair
    ...
    <input name="total" READONLY value="0.0">
    ...
    </form>
    And then the JS code is simple:
    Code:
    <script>
    function buy(fld)
    {
        var form = fld.form;
        var clothes = form.clothes;
        var total = 0;
        for ( var c = 0; c < clothes.length; ++c )
        {
             var cb = clothes[c];
             if ( cb.checked ) 
             {
                 var price = parseFloat( form.elements["price_" + cb.value] );
                 total += price;  
             }
        }
        form.total.value = total.toFIxed(2);
    }
    </script>
    Untested, off the top of my head. Is it close?

    And that page you linked to works, but it's very clumsy. Should be written in about a quarter the code.

  • Users who have thanked Old Pedant for this post:

    micha3l26 (05-10-2009)

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks mate for the help.

    I was looking for something like that topic I linked, as it's the only way i really know.

    Ill try this, it's just I'm not that experienced in coding just yet, this way seems abit more complicated to me. haha. Yea but makes sense to condense it.

    So your saying the way i'm doing it won't work? Or its just not the most efficient way?

    But yea ill take what you said on board.

    JS CODE

    //var 0001 = 15;
    //var 0002 = 15;
    //var 0003 = 15;
    //var 0004 = 30;
    //var 0005 = 30;
    //var 0006 = 15;
    //var 0007 = 15;
    //var 0008 = 15;

    //if (merch.0001.checked){
    //var 0001 = document.merch.0001.value = 0001;
    //} else {
    //var 0001 = document.merch.0001.value = 0;
    //}

    //if (merch.0002.checked){
    //var 0002 = document.merch.0002.value = 0002;
    //} else {
    //var 0002 = document.merch.0002.value = 0;
    //}

    //if (merch.0003.checked){
    //var 0003 = document.merch.0003.value = 0003;
    //} else {
    //var 0003 = document.merch.0003.value = 0;
    //}

    //if (merch.0004.checked){
    //var 0004 = document.merch.0004.value = 0004;
    //} else {
    //var 0004 = document.merch.0004.value = 0;
    //}

    //if (merch.0005.checked){
    //var 0005 = document.merch.0005.value = 0005;
    //} else {
    //var 0005 = document.merch.0005.value = 0;
    //}


    //if (merch.0006.checked){
    //var 0006 = document.merch.0006.value = 0006;
    //} else {
    //var 0006 = document.merch.0006.value = 0;
    //}


    //if (merch.0007.checked){
    //var 0007 = document.merch.0007.value = 0007;
    //} else {
    //var 0007 = document.merch.0007.value = 0;
    //}


    //if (merch.0008.checked){
    //var 0008 = document.merch.0008.value = 0008;
    //} else {
    //var 0008 = document.merch.0008.value = 0;
    //}

    //document.merch.total.value = 0001 + 0002 + 0003 + 0004 + 0005 + 0006 + 0007 + 0008;
    //}


    CODE

    <tr>
    <td><input type="checkbox" name="0001" value="0001"></td>
    <td><input type="checkbox" name="0002" value="0002"></td>
    <td><input type="checkbox" name="0003" value="0003">&nbsp;</td>
    <td><input type="checkbox" name="0004" value="0004">&nbsp;</td>
    <td><input type="checkbox" name="0005" value="0005">&nbsp;</td>
    <td><input type="checkbox" name="0006" value="0006">&nbsp;</td>
    <td><input type="checkbox" name="0007" value="0007">&nbsp;</td>
    <td><input type="checkbox" name="0008" value="0008">&nbsp;</td>
    </tr>
    <tr>
    Last edited by micha3l26; 05-10-2009 at 08:01 AM.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Javascript variable names and HTML element names may not start with a number/digit.


    He thought he saw a Argument
    That proved he was the Pope:
    He looked again, and found it was
    A Bar of Mottled Soap.
    "A fact so dread," he faintly said,
    "Extinguishes all hope!"
    - Lewis Carroll
    Last edited by Philip M; 05-10-2009 at 08:40 AM.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Just another approach. Makes it unnecessary to jam data into your HTML, and lets your server see whatever it needs to see....

    Code:
    <html>
    <head>
    <style type="text/css">
    body {
    background: black;
    }
    #f1 {
    width: 200px;
    padding: 12px;
    margin: 100px;
    font: normal 12px helvetica;
    color: white;
    background: darkred;
    border: 2px white dashed;
    }
    input {
    padding: 1px;
    background: darkred;
    color: white;
    border: none;
    }
    </style>
    <script type="text/javascript">
    
    var prices = //object literal
    {
       slouch_hat: 155.50	,
       argyll_socks: 22.99	,
       jockstrap: 15.50
    }
    
    function update()
    {
       var f = document.getElementById('f1'); //form
       var inputs = f.getElementsByTagName('input'); //inputs
       var input, total = i = 0;
       for (var i = 0; i < inputs.length; i++) //loop
       {
          input = inputs[i];
          if (input.className == 'item' && input.checked) //examine
          {
             total += parseFloat(prices[input.value]); //add data from 'prices' object
          }
       }
       f.elements.total.value = total.toFixed(2); //print
    }
    
    function addListener(obj, evt, handler)
    {
       if (obj.addEventListener)
       {
          obj.addEventListener(evt, handler, false);
       }
       else if (obj.attachEvent)
       {
          obj.attachEvent('on' + evt, handler);
       }
    }
    
    function set_update()
    {
       var f = document.getElementById('f1'); //form
       var inputs = f.getElementsByTagName('input'); //inputs
       for (var i = 0; i < inputs.length; i++) //loop
       {
          if (inputs[i].className == 'item') //gets handler
          {
             addListener(inputs[i], 'click', update); //assign handler
          }
       }
    }
    
    addListener(window, 'load', set_update); //don't call till form complete
    
    </script>
    </head>
    <body>
    <form id="f1" name="f1">
    <strong>$</strong><input class="item" type="checkbox" name="buy" value="slouch_hat" />____Slouch Hat ($155.50)<br />
    <strong>$</strong><input class="item" type="checkbox" name="buy" value="argyll_socks" />____Argyll socks ($22.99)<br />
    <strong>$</strong><input class="item" type="checkbox" name="buy" value="jockstrap" />____Jockstrap ($15.50)<br /><br />
    <hr />
    <strong>$</strong><input type="text" name="total" value="0.00" size="3" readonly="readonly" />____total
    </form>
    </body>
    </html>
    Good explanation here of using object literals to associate bits of data with something else (like a price with a product).


  •  

    Posting Permissions

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