473,324 Members | 2,166 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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

rush it
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
5 2083
Dormilich
8,658 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.

JS:
- when do you execute that?
- are there any messages in the Error Console?
Jan 24 '12 #2
Rabbit
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
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
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
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

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

Similar topics

5
by: Raffi | last post by:
Hi folks, I'm new to JavaScript and need some help. I have a form with a select field. Depending on what is selected in this field, I want to display or not display another select field. For...
10
by: Mark McLellan | last post by:
Dear all Following the oft-repeated advice here and ciwas I have made my site nearly 4.01 strict (working on it). There are some items on which I would appreciate your advice: 1. Hidden...
4
by: Alexander Muylaert | last post by:
Hi How can I disable all user input? I would like to fully ignore all keyboard and mousevents. Is their a disabletaskwindows available or something likewise? kind regards Alexander
2
by: Matthew Louden | last post by:
In ASP, if I have asppage.asp for GUI and aspprocess.asp for process requests from database. In asppage.asp code will be like: <form action="aspprocess.asp" method="POST"> GUI CODE </form> ...
3
by: Tamer Ibrahim | last post by:
How can I get just a certain time from the user ? Any idea how to do this ...
1
by: bob1660 | last post by:
I am new to PHP and MYSQL. I have a Database table with 4 field. FirstName, LastName, DateofBirth and MemberNumber. I would like to have a form where a user can fill in the FirstName, LastName and...
4
by: bob1660 | last post by:
I am new to PHP and MYSQL. I have a Database table with 4 field. FirstName, LastName, DateofBirth and MemberNumber. I would like to have a form where a user can fill in the FirstName, LastName and...
1
by: updw123 | last post by:
Hi there, Does anyone know if spam trawls can pick up email addresses from hidden fields in submission forms. And/or does anyone know if there is an alternative to having your email address in...
2
by: jerald m | last post by:
Hi, how can i pass the user input value of ( in text box field) to the another Jsp in url? Form Code <td> <input type="text" name="dil_ProjectCode" id="dil_ProjectCode"> </td>
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.