Connecting Tech Pros Worldwide Help | Site Map

Sum the value

ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#1: May 20 '09
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.
hsriat's Avatar
Expert
 
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#2: May 20 '09

re: Sum the value


Quote:

Originally Posted by ddtpmyra View Post

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?

Or should I use a java script?
Can somebody show me how its done on JAVA technically no knowlege at all.

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.  
dlite922's Avatar
Expert
 
Join Date: Dec 2007
Location: Moon, Dark Side
Posts: 1,094
#3: May 21 '09

re: Sum the value


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
dlite922's Avatar
Expert
 
Join Date: Dec 2007
Location: Moon, Dark Side
Posts: 1,094
#4: May 21 '09

re: Sum the value


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.  
hsriat's Avatar
Expert
 
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#5: May 21 '09

re: Sum the value


Quote:

Originally Posted by dlite922 View Post

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:

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 ;)]
ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#6: May 22 '09

re: Sum the value


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!

Quote:

Originally Posted by dlite922 View Post

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.  

dlite922's Avatar
Expert
 
Join Date: Dec 2007
Location: Moon, Dark Side
Posts: 1,094
#7: May 25 '09

re: Sum the value


Quote:

Originally Posted by ddtpmyra View Post

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!

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
ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#8: May 26 '09

re: Sum the value


Dan,

Thanks for all the help. It works!

DM
ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#9: Sep 25 '09

re: Sum the value


please disregard this post
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#10: Sep 25 '09

re: Sum the value


Quote:

Originally Posted by ddtpmyra View Post

Is this true you cannot have sub <form> inside PHP please correct me if I'm wrong.

this is not a matter of PHP. the HTML standard does not allow <form> inside another <form>.
ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#11: 2 Weeks Ago

re: Sum the value


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' >  ";?>
Markus's Avatar
Moderator
 
Join Date: Jun 2007
Location: York, England, with wolves.
Posts: 4,936
#12: 2 Weeks Ago

re: Sum the value


Quote:

Originally Posted by hsriat View Post

[EDIT: And I have the right for making this excuse as we are in PHP forum ;)]

What's your excuse now? ;)
ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#13: 2 Weeks Ago

re: Sum the value


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.  
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: 1 Week Ago

re: Sum the value


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?
ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#15: 1 Week Ago

re: Sum the value


Can you show me from my sample code what do you mean? Thanks for your help
Quote:

Originally Posted by acoder View Post

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?

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#16: 1 Week Ago

re: Sum the value


I mean the code that is generated from your PHP code when you view the source in the browser.
ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#17: 1 Week Ago

re: Sum the value


Quote:

Originally Posted by acoder View Post

I mean the code that is generated from your PHP code when you view the source in the browser.

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' >  
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#18: 1 Week Ago

re: Sum the value


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.
ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#19: 1 Week Ago

re: Sum the value


Do you mean by doing this (see onkeyup)
Quote:
<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 = ''\";>
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#20: 1 Week Ago

re: Sum the value


well, yes. although IMHO inline JavaScript is bad practice.
ddtpmyra's Avatar
Familiar Sight
 
Join Date: Jun 2008
Location: CA
Posts: 222
#21: 1 Week Ago

re: Sum the value


I wonder why it's still not working for me.
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#22: 1 Week Ago

re: Sum the value


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. }
Reply