By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,695 Members | 1,597 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,695 IT Pros & Developers. It's quick & easy.

Can't get script to multiply user input with hidden fields

rush it
P: 18
I'm working on a water usage calculator for a client site. The water department superintendent of a small town wants residents to be able to enter the number of gallons of their swimming pool to find out how much more their water bill will be for that month. The user inputs the gallons, and that number is multiplied by a $2.61 water fee per 1000 gallons, and a $3.05 sewer fee per 1000 gallons. These last two fields are hidden, which I've not worked with before. The form displays fine and the Clear button works, but Calculate does nothing.

I'm brand new to javascript and am trying to round out my web developer skills but after a week and a half of research on this, I'm now up against the wall for a solution.

The client will updating any water fee changes and will not have access to ftp. I should add this is a Joomla! site.

Any ideas would greatly appreciated. Also, if anyone knows of an extensive online javascript library so I can keep learning, that would great also. Cheers.

My code:
Expand|Select|Wrap|Line Numbers
  1. <form name="water_calc" form action="" method="POST"><label>Enter number of gallons of water: </label>
  2.  <input type="text" size="7" name="numGal" title="numGal" /> 
  3. <span id="calc1"></span>
  4. <input type="hidden" name="rate" title="Water Rate" value="2.61" /> 
  5. <input type="hidden" name="sewRate" title="Sewer Rate" value="3.05" /> 
  6. <label type="text" name="calc1" title="Total Fee"></label> 
  7. <input type="button" id="calculate" name="calculate" value="Calculate" />
  8.  <input type="reset" onclick="document.water_calc.reset()" value="Clear" name="Clear" title="Clear" /></form>
  9.  
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var btn = document.getElementById('calculate');
  3. btn.onclick = function() {
  4.     var numGal = parseInt(document.getElementById('numGal').value);
  5.     var rate = parseInt(document.getElementById('rate').value);
  6.     var sewRate = parseInt(document.getElementById('sewRate').value);
  7.     var calc1 = document.getElementById('calc1');
  8.   calc1.value = numGal * (rate + sewRate) / 1000;
  9.  
  10. var msg = [];
  11.  
  12.     if (isNaN(val1)) {
  13.         msg.push('This is not a number');
  14.     }
  15.     if (msg.length > 0) {
  16.         calc1.innerHTML = msg.join(', ');
  17.     } else {
  18.         calc1.innerHTML = 'X x (Y + Z)/ 1000 = ' numGal * (rate * sewRate) / 1000;
  19.     }
  20. };
  21. </script>
  22.  
Jan 24 '12 #1
Share this Question
Share on Google+
5 Replies


Dormilich
Expert Mod 5K+
P: 8,639
some notes
HTML line #6: <label>s don't have a name.
HTML line #8: the onclick is unnecessary, since type="reset" does exactly that.

JS:
- when do you execute that?
- are there any messages in the Error Console?
Jan 24 '12 #2

Rabbit
Expert Mod 10K+
P: 12,430
1) There is no variable called val1.
2) The length of msg will never be greater than 0.
3) You have not properly concatenated your string in the else statement.
4) You have attempted to access and bind the input control before the page has loaded.
Jan 24 '12 #3

rush it
P: 18
I'm working on another project for now, but I'll come back to this topic and try the suggestions that have been posted, when I'm back on this project. Thanks.
Jan 30 '12 #4

Rabbit
Expert Mod 10K+
P: 12,430
Those weren't suggestions, there are at least four errors in the code and all four must be fixed before it can work.
Jan 30 '12 #5

rush it
P: 18
Boy you guys on this board sure are touchy. Thanks for the "suggestions", but it's been rewritten in php and works fine. Just have an associated Joomla issue to work on now. Next time I work with Javascript, I'll come back and look at this thread.
Feb 27 '12 #6

Post your reply

Sign in to post your reply or Sign up for a free account.