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

Sum the value

ddtpmyra
100+
P: 333
There's two text box that has to enter the the numbers from the user and below I want to display the total value the user inputed. How can I sum it up and have it displayed every they enter a number?

Expand|Select|Wrap|Line Numbers
  1. <td><b> Total</b></td><td>
  2. Quantity #1 <Input type = 'text' Value ='0' Name ='qty1' >
  3. Quantity #2 <Input type = 'text' Value ='0' Name ='qty2'>
  4. Grand Total <input type = 'text' value ='<?php qty1 + qty2 ?>' name ='Total' >
  5.  
Or should I use a java script?
Can somebody show me how its done on JAVA technically no knowlege at all. A newbie learning to walk.
May 20 '09 #1
Share this Question
Share on Google+
21 Replies


hsriat
Expert 100+
P: 1,654
@ddtpmyra
It will need JavaScript (not Java) dear.
Expand|Select|Wrap|Line Numbers
  1. Quantity #1 <Input type = 'text' Value ='0' Name ='qty1' onkeyup='if ((this.value.match(/^[0-9]+$/) && this.form.qty2.value.match(/^[0-9]+$/)))  this.form.Total.value = this.value + this.form.dty2.value; else this.form.Total.value = "";'>
  2. Quantity #2 <Input type = 'text' Value ='0' Name ='qty2' onkeyup='if ((this.value.match(/^[0-9]+$/) && this.form.qty1.value.match(/^[0-9]+$/)))  this.form.Total.value = this.value + this.form.dty1.value; else this.form.Total.value = "";'>
  3. Grand Total <input type = 'text' value ='' name ='Total' >
  4.  
May 20 '09 #2

dlite922
Expert 100+
P: 1,584
Hey ddtpmyra,

First you need to understand what PHP, Java, and JavaScript are. Besides languages, they have nothing else in common.

PHP is non-compiled script that is executed and run on the server. The output is plain text (or HTML).

Java is a compiled programming language that stands alone and runs on the computer it is executed on.

JavaScript is a scripting language in a web page that is executed within the user's web browser.

My recommendation for you is to read tutorials. One site that helps you with all of this and much more (and is a site we all basically started with) is www.w3schools.com Start there.

As to your problem, I would do this in JavaScript because it's trivial, quicker (no refresh), and pretty easy.

To get you interested, here's some code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3. <head><title>Calculator</title></head>
  4. <script language="JavaScript" type="text/JavaScript">
  5. function calSum()
  6. {
  7.     var num1 = parseInt(document.getElementById('firstNum').value); 
  8.     var num2 = parseInt(document.getElementById('secNum').value); 
  9.     document.getElementById('result').innerHTML = (num1 + num2);
  10.     return;
  11. }
  12. </script>
  13. <body>
  14. First Number: <input type="text" value="" name="firstNum" id="firstNum" /><br/>
  15. Second Number: <input type="text" value="" name="secNum" id="secNum" /><br/>
  16. <input type="button" value="Calculate Sum" onclick="calSum();" /><br/>
  17. Answer: <span id="result"></span>
  18. </body>
  19. <html>
  20.  
  21.  
put that in a file, name it calculator.html and open it with your web browser.

to change and mess around with it, open it in notepad, change then save it. Refresh your browser to see your changes.

Good Luck!



Dan
May 20 '09 #3

dlite922
Expert 100+
P: 1,584
If you had trouble getting hsriat's code to work because it concatenated the values instead of summing this, he made the same mistake I did, and you will make by not calling the "parseInt()" function first:

here's the updated, working code:

Expand|Select|Wrap|Line Numbers
  1. <form name="myForm" >
  2. Quantity #1 <Input type = 'text' Value ='0' Name ='qty1' onkeyup='if ((this.value.match(/^[0-9]+$/) && this.form.qty2.value.match(/^[0-9]+$/)))  this.form.Total.value = parseInt(this.value) + parseInt(this.form.qty2.value); else this.form.Total.value = "";'> 
  3. Quantity #2 <Input type = 'text' Value ='0' Name ='qty2' onkeyup='if ((this.value.match(/^[0-9]+$/) && this.form.qty1.value.match(/^[0-9]+$/)))  this.form.Total.value = parseInt(this.value) + parseInt(this.form.qty1.value); else this.form.Total.value = "";'> 
  4. Grand Total <input type = 'text' value ='' name ='Total' > 
  5. </form>
  6.  
  7.  
May 20 '09 #4

hsriat
Expert 100+
P: 1,654
@dlite922
That usually happens when you think only "." (dot) can be used for concatenation.
Thanks for the rectification. :)

Cheers

[EDIT: And I have the right for making this excuse as we are in PHP forum ;)]
May 20 '09 #5

ddtpmyra
100+
P: 333
dlite922,
First thanks for the code it works perfecty fine but I have <form> already on top it all and my button didn't work after adding it? Is this true you cannot have sub <form> inside PHP please correct me if I'm wrong. Or is there a another way to do the automatic computation without using <form>?

thanks!

@dlite922
May 22 '09 #6

dlite922
Expert 100+
P: 1,584
@ddtpmyra
you don't have to use form. Instead of using "this.form" make sure the element has an "id" attribute and refer to it with "document.getElementById("theIDhere").value"

make sure you spell "getElementById" <-- exactly like that. JavaScript is case sensitive.

Then you're not dependent on <form>

Cheers,






Dan
May 25 '09 #7

ddtpmyra
100+
P: 333
Dan,

Thanks for all the help. It works!

DM
May 26 '09 #8

ddtpmyra
100+
P: 333
please disregard this post
Sep 24 '09 #9

Dormilich
Expert Mod 5K+
P: 8,639
@ddtpmyra
this is not a matter of PHP. the HTML standard does not allow <form> inside another <form>.
Sep 25 '09 #10

ddtpmyra
100+
P: 333
Okay now its getting complicated when I put it inside my PHP. Please tell me what did i wrong and why its not computing?
Expand|Select|Wrap|Line Numbers
  1.     <?PHP                    
  2.                                     $result = mysql_query("select Total from tblEvent_Entity where Cal_ID='{$id}' and Entity ='Organizations' ");
  3.                                     $row = mysql_fetch_assoc($result);
  4.                                     $TotalOrganizations =  $row['Total'];
  5.                                     echo "<tr><td width='50%'>Organizations</td><td width='67%'><Input type = 'text' Name ='totalOrganizations'  id ='totalOrganizations' value='$row[Total]'
  6.                                     onkeyup='if ((document.getElementById('totalOrganizations').match(/^[0-9]+$/) && document.getElementById('totalAgencies').value.match(/^[0-9]+$/)))  
  7.                                     document.getElementById('Total').value =  parseInt(document.getElementById('totalOrganizations').value)) + parseInt(document.getElementById('TotalAgencies').value); 
  8.                                     else document.getElementById('Total').value = '';>  
  9.                                     </td></tr>";
  10.  
  11.  
  12.                                     $result = mysql_query("select Total from tblEvent_Entity where Cal_ID='{$id}' and Entity ='Agencies' ");
  13.                                     $row = mysql_fetch_assoc($result);
  14.                                     $TotalAgencies=  $row['Total'];
  15.                                     echo "<tr><td>Agencies</td><td width='67%'><Input type = 'text' Name ='totalAgencies' id='totalAgencies' value='$row[Total]'
  16.                                     onkeyup='if ((document.getElementById('totalAgencies').match(/^[0-9]+$/) && document.getElementById('totalOrganizations').value.match(/^[0-9]+$/)))  
  17.                                     document.getElementById('Total').value =(document.getElementById('totalOrganizations').value) + parseInt(document.getElementById('totalAgencies').value); 
  18.                                     else document.getElementById('Total').value = '';>  
  19.                                     </td></tr>";    
  20.  
  21.                                      echo "Grand Total <input type = 'text' value ='' name ='Total' id='Total' >  ";?>
Nov 5 '09 #11

Markus
Expert 5K+
P: 6,050
@hsriat
What's your excuse now? ;)
Nov 6 '09 #12

ddtpmyra
100+
P: 333
I have two input box that I wanted to calculate the Total while the user inputing thier numbers on the text box. On my HTML format its works perfectly but when I applied it inside my PHP code it doesn't work anymore. I appreciate your time looking at this.

Expand|Select|Wrap|Line Numbers
  1.     <?PHP                     
  2.                                     $result = mysql_query("select Total from tblEvent_Entity where Cal_ID='{$id}' and Entity ='Organizations' "); 
  3.                                     $row = mysql_fetch_assoc($result); 
  4.                                     $TotalOrganizations =  $row['Total']; 
  5.                                     echo "<tr><td width='50%'>Organizations</td><td width='67%'><Input type = 'text' Name ='totalOrganizations'  id ='totalOrganizations' value='$row[Total]' 
  6.                                     onkeyup='if ((document.getElementById('totalOrganizations').match(/^[0-9]+$/) && document.getElementById('totalAgencies').value.match(/^[0-9]+$/)))   
  7.                                     document.getElementById('Total').value =  parseInt(document.getElementById('totalOrganizations').value)) + parseInt(document.getElementById('TotalAgencies').value);  
  8.                                     else document.getElementById('Total').value = '';>   
  9.                                     </td></tr>"; 
  10.  
  11.  
  12.                                     $result = mysql_query("select Total from tblEvent_Entity where Cal_ID='{$id}' and Entity ='Agencies' "); 
  13.                                     $row = mysql_fetch_assoc($result); 
  14.                                     $TotalAgencies=  $row['Total']; 
  15.                                     echo "<tr><td>Agencies</td><td width='67%'><Input type = 'text' Name ='totalAgencies' id='totalAgencies' value='$row[Total]' 
  16.                                     onkeyup='if ((document.getElementById('totalAgencies').match(/^[0-9]+$/) && document.getElementById('totalOrganizations').value.match(/^[0-9]+$/)))   
  17.                                     document.getElementById('Total').value =(document.getElementById('totalOrganizations').value) + parseInt(document.getElementById('totalAgencies').value);  
  18.                                     else document.getElementById('Total').value = '';>   
  19.                                     </td></tr>";     
  20.  
  21.                                      echo "Grand Total <input type = 'text' value ='' name ='Total' id='Total' >  ";?> 
  22.  
Nov 6 '09 #13

acoder
Expert Mod 15k+
P: 16,027
Post the client-side generated (HTML) code. Also, remove the unnecessary indents to make the code easier to follow.

Do you get any JavaScript errors?
Nov 9 '09 #14

ddtpmyra
100+
P: 333
Can you show me from my sample code what do you mean? Thanks for your help @acoder
Nov 10 '09 #15

acoder
Expert Mod 15k+
P: 16,027
I mean the code that is generated from your PHP code when you view the source in the browser.
Nov 11 '09 #16

ddtpmyra
100+
P: 333
@acoder
Here it is...
Expand|Select|Wrap|Line Numbers
  1. <tr><td width='50%'>Organizations</td><td width='67%'><Input type = 'text' Name ='totalOrganizations'  id ='totalOrganizations' value=''  
  2.           onkeyup='if ((document.getElementById('totalOrganizations').match(/^[0-9]+$/) && document.getElementById('totalAgencies').value.match(/^[0-9]+$/)))    
  3.           document.getElementById('Total').value =  parseInt(document.getElementById('totalOrganizations').value)) + parseInt(document.getElementById('TotalAgencies').value);   
  4.           else document.getElementById('Total').value = '';>    
  5.           </td></tr><tr><td>Agencies</td><td width='67%'><Input type = 'text' Name ='totalAgencies' id='totalAgencies' value=''  
  6.                  onkeyup='if ((document.getElementById('totalAgencies').match(/^[0-9]+$/) && document.getElementById('totalOrganizations').value.match(/^[0-9]+$/)))    
  7.             document.getElementById('Total').value =(document.getElementById('totalOrganizations').value) + parseInt(document.getElementById('totalAgencies').value);   
  8.             else document.getElementById('Total').value = '';>    
  9.             </td></tr>Grand Total <input type = 'text' value ='' name ='Total' id='Total' >  
Nov 12 '09 #17

Dormilich
Expert Mod 5K+
P: 8,639
no wonder it doesn’t work, the onkeyup attribute is not closed, resp. it closes at the first JavaScript quotation mark, rendering the HTML invalid.

my recommendation: use a proper event handler.
Nov 12 '09 #18

ddtpmyra
100+
P: 333
Do you mean by doing this (see onkeyup)
<Input type = 'text' Name ='totalAgencies' id='totalAgencies' value='$row[Total]'
onkeyup=\"if ((document.getElementById('totalAgencies').match(/^[0-9]+$/) && document.getElementById('totalOrganizations').valu e.match(/^[0-9]+$/)))
document.getElementById('Total').value =(document.getElementById('totalOrganizations').va lue) + parseInt(document.getElementById('totalAgencies'). value);
else document.getElementById('Total').value = ''\";>
Nov 12 '09 #19

Dormilich
Expert Mod 5K+
P: 8,639
well, yes. although IMHO inline JavaScript is bad practice.
Nov 12 '09 #20

ddtpmyra
100+
P: 333
I wonder why it's still not working for me.
Nov 12 '09 #21

acoder
Expert Mod 15k+
P: 16,027
Try this:
Expand|Select|Wrap|Line Numbers
  1. <Input type = 'text' Name ='totalAgencies' id='totalAgencies' value='$row[Total]'
  2. onkeyup='setTotal()'/> 
Expand|Select|Wrap|Line Numbers
  1. function setTotal() {
  2.     if ((document.getElementById('totalAgencies').match(/^[0-9]+$/) &&
  3.       document.getElementById('totalOrganizations').value.match(/^[0-9]+$/))) {
  4.         document.getElementById('Total').value = 
  5.           parseInt(document.getElementById('totalOrganizations').value) + 
  6.           parseInt(document.getElementById('totalAgencies'). value);
  7.     } else {
  8.         document.getElementById('Total').value = '';
  9.     }
  10. }
Nov 13 '09 #22

Post your reply

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