Solved

How to calculate checkbox and form fields using javascript?

Posted on 2004-04-09
4
411 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

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

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

This article will show, step by step, how to integrate R code into a R Sweave document
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…

816 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now