Solved

How to calculate checkbox and form fields using javascript?

Posted on 2004-04-09
4
413 Views
Last Modified: 2013-12-16
I need a javascript function to do the following:

1.      when checkbox clicked, enable the text field associated with the checkbox
2.      sum values of checked items
3.      return that value to “total”
4.      if value is changed, recalculate

I can’t seem to figure it out.  And I’m not a javascript programmer.

Here's a sample of the form fields:

<input type=”checkbox” name=”chkbox” value=”1” onClick=”calc(this.form)”>
<input type=”text” name=”price1” value=”20” disabled>
<br>
<input type=”checkbox” name=”chkbox” value=”2” onClick=”calc(this.form)”>
<input type=”text” name=”price2” value=”30” disabled >
<br>
<input type=”checkbox” name=”chkbox” value=”n” onClick=”calc(this.form)”>
<input type=”text” name=”pricen” value=”50” disabled>
…etc

<input type=”text” name=”total” value=””>

Thanks
0
Comment
Question by:PhantaC
  • 2
4 Comments
 
LVL 2

Expert Comment

by:taherzm
ID: 10793395
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 10793511
Here you are.  Plus ditch whatever you used to write the code you posted and use an editor that puts in valid quote characters; like note pad.

<html>
<head>
<title> Calculate</title>
<script type="text/javascript">
<!--
function calc(frm)
{
   var thesum=0;
   for (i=0;i<frm.chkbox.length;i++)
   {
      str='price'+frm.chkbox[i].value;
      if (frm.chkbox[i].checked)
      {
         frm.elements[str].disabled=false;
         thesum+=parseInt(frm.elements[str].value);
      }
      else
      {
         frm.elements[str].disabled=true;
      }
   }
   frm.total.value=thesum;
}
//-->
</script>
</head>
<body>
<form>        
<input type="checkbox" name="chkbox" value="1" onClick="calc(this.form)">
<input type="text" name="price1" value="20" disabled>
<br>
<input type="checkbox" name="chkbox" value="2" onClick="calc(this.form)">
<input type="text" name="price2" value="30" disabled >
<br>
<input type="checkbox" name="chkbox" value="n" onClick="calc(this.form)">
<input type="text" name="pricen" value="50" disabled>
<input type="text" name="total" value="">
</form>
</body>
</html>
0
 

Author Comment

by:PhantaC
ID: 10794099
awesome.  this place rocks!

about the HTML editor, I actually use HomeSite but I had the code written in an email to a friend and I just copied the email which made the quotes all funky.  

thanks though.  
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10794502
Ah yes the email was probably using weird encoding.  When I first tried to test the page it threw a bunch of errors for illegal characters.  Homesite is fine.  Glad I could help. Thanks for the A. :^)

Cd&
0

Featured Post

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is about my first experience with programming Arduino.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question