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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Checkboxes calculating total - NEED HELP

    Hello, I'm really new to HTML and need some help. What I need is a table that allows users to check off items which add and subtract value and then give a total cost based on what is checked/unchecked.

    I found a thread which helped me create a table and the code even worked! The problem is I need to input a very thorough description in the "value" field. How can I make my blurbs fit in the "value" section? Also, is there a better code to implement?

    Here is the code I have been using from the previous thread. Please help/advise:

    <html>
    <head>
    <script type="text/javascript">
    function calculate(f)
    {
    var nums = f.num;
    var ntext = f.numtext;
    var nitem = f.numitem;
    var result = 0;
    var items = '';
    for(var i=0;i<nums.length;i++)
    {
    if(nums[i].checked)
    {
    result+=parseFloat(ntext[i].value);
    items+=nitem[i].value+'\n';
    }
    }
    f.answer.value=result;

    //if you want to fix to 2 decimal places
    //f.answer.value=Number(result).toFixed(2);

    f.allitems.value=items;
    }
    </script>
    </head>
    <body>
    <form name="myform">
    Which numbers do you want to add?<br>
    <input type="checkbox" name="num" onclick="calculate(this.form)"><input type="text" name="numtext" value="1.50" onchange="calculate(this.form)"><input type="text" name="numitem" value="pencil" onchange="calculate(this.form)"><br>
    <input type="checkbox" name="num" onclick="calculate(this.form)"><input type="text" name="numtext" value="2.00" onchange="calculate(this.form)"><input type="text" name="numitem" value="pen" onchange="calculate(this.form)"><br>
    <input type="checkbox" name="num" onclick="calculate(this.form)"><input type="text" name="numtext" value="3.20" onchange="calculate(this.form)"><input type="text" name="numitem" value="paper" onchange="calculate(this.form)"><br>
    Total <input type="text" name="answer" size="5"><textarea name="allitems" rows="5"></textarea>
    </form>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jun 2007
    Posts
    49
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I'm not sure what you mean by "value" section. Do you mean the cost of the items or the name of the items?

    I'm also unsure why you are putting the item name and value in textboxs. Doing so allows the user to change those values, so they can instead of putting a pencil for $1.50, they get a pen for that price. Or they can change the price from $1.50 to $.001

    I would think that you want to have your check boxes, and then have hidden input elements that carry the price as well as having the price just in text on the page.

  • #3
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For value I mean the description box where the term like "pencil/pen" is listed. I need to have a bigger box to type a bigger description blurb.

    Also, you bring up a great point. How can I change the code to stop people from physically changing the text?

    Again, I am a newbie to HTML. Thanks!

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    49
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Maybe something like this:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function calculate(f)
    {
    var nums = f.num;
    var ntext = f.numtext;
    var nitem = f.numitem;
    var result = 0;
    var items = '';
    for(var i=0;i<nums.length;i++)
    {
    if(nums[i].checked)
    {
    result+=parseFloat(ntext[i].value);
    items+=nitem[i].value+'\n';
    }
    }
    f.answer.value=result;
    
    //if you want to fix to 2 decimal places
    //f.answer.value=Number(result).toFixed(2);
    
    f.allitems.value=items;
    }
    </script>
    <style type="text/css">
    .box1 { float:left; 
    		width:500px;
    		clear:left;
    		}
    .box2 { float:left;
    padding-left:50px;
    
    }
    
    </style>
    </head>
    <body>
    <form name="myform">
    Which numbers do you want to add?<br>
    <div class="box1">
    <input type="checkbox" name="num" onclick="calculate(this.form)">
    <input type="hidden" name="numtext" value="1.50" onchange="calculate(this.form)">
    <input type="hidden" name="numitem" value="pencil" onchange="calculate(this.form)">
    <div class="box2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    </div>
    <br>
    <div class="box1">
    <input type="checkbox" name="num" onclick="calculate(this.form)">
    <input type="hidden" name="numtext" value="2.00" onchange="calculate(this.form)">
    <input type="hidden" name="numitem" value="pen" onchange="calculate(this.form)">
    <div class="box2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    </div><br>
    <div class="box1">
    <input type="checkbox" name="num" onclick="calculate(this.form)">
    <input type="hidden" name="numtext" value="3.20" onchange="calculate(this.form)">
    <input type="hidden" name="numitem" value="paper" onchange="calculate(this.form)">
    <div class="box2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    </div><br>
    <div class="box1">
    Total <input type="text" name="answer" size="5"><textarea name="allitems" rows="5"></textarea>
    </div>
    </form>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I'm getting even more confused...

    my bad


  •  

    Tags for this Thread

    Posting Permissions

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