469,270 Members | 1,172 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,270 developers. It's quick & easy.

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

rush it
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>
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;
  10. var msg = [];
  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>
Jan 24 '12 #1
5 1990
8,651 Expert Mod 8TB
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.

- when do you execute that?
- are there any messages in the Error Console?
Jan 24 '12 #2
12,516 Expert Mod 8TB
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
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
12,516 Expert Mod 8TB
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
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.

Similar topics

5 posts views Thread by Raffi | last post: by
4 posts views Thread by Alexander Muylaert | last post: by
3 posts views Thread by Tamer Ibrahim | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.