PHP add up total before submitting form
I'm not 100% sure how to ask this so please stick with me.
I have a wordpress / Woocommerce installation. The shopping cart has a single product that have a bunch of variations. I have had to create a function to add up all of the variations. Woocommerce deals in whole dollars and does not do many calculations with percentages.
With that said, depending on what a person enters into all of the input fields, the price can be different. I use a php function to calculate the price. However, Is there a way to run a form with processing it? Meaning, I want to run the form so I can see the totals be added up but I don't want to submit it. Does that make sense?
I have a wordpress / Woocommerce installation. The shopping cart has a single product that have a bunch of variations. I have had to create a function to add up all of the variations. Woocommerce deals in whole dollars and does not do many calculations with percentages.
With that said, depending on what a person enters into all of the input fields, the price can be different. I use a php function to calculate the price. However, Is there a way to run a form with processing it? Meaning, I want to run the form so I can see the totals be added up but I don't want to submit it. Does that make sense?
Jason C. Levine
Techinically this is what JavaScript is good for. You can have JavaScript functions fire as the user enters data, do the necessary math, write the results to form values and then submit when ready.
<!DOCTYPE html>
<!-- SEE http://www.experts-exchange.com/Programming/Languages/Scripting/PHP/Q_28484078.html -->
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<script>
function findSum(){
var arr = document.getElementsByClassName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('sum').value = tot;
}
</script>
<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>
<form>
Qty1 : <input onblur="findSum()" name="qty1" class="qty" autocomplete="off" /><br>
Qty2 : <input onblur="findSum()" name="qty2" class="qty" autocomplete="off" /><br>
Qty3 : <input onblur="findSum()" name="qty3" class="qty" autocomplete="off" /><br>
<br>
Total : <input readonly type="text" name="total" id="sum"/>
<input type="submit" />
</form>
</body>
</html>ASKER
@Jaso and Ray, thanks for your initial thoughts. This is going in the correct direction. However, it is not as simple as adding up the numbers.
Input one may be the number * 1.1%
Input two may be input plus 5% * 1.1% + Input one etc... Its more complex than simple addition.
Can you point me closer to the answer knowing that? That is why I was wondering if there was a way to total before submitting, just in case they want to change anything.
Input one may be the number * 1.1%
Input two may be input plus 5% * 1.1% + Input one etc... Its more complex than simple addition.
Can you point me closer to the answer knowing that? That is why I was wondering if there was a way to total before submitting, just in case they want to change anything.
It's still the same answer. You can use JavaScript events to control when and how the totals happen and if the user changes, the events fire again and recalculate.
If you wanted a pure PHP solution, you could do this as a two step form where the first step does calculations and a second button handles submission. The possibilities are limited only by your ability.
If you wanted a pure PHP solution, you could do this as a two step form where the first step does calculations and a second button handles submission. The possibilities are limited only by your ability.
Agree with Jason -- it's just arithmetic. Can you please post the HTML form so we can see what the inputs really contain? I can't really envision what you're getting at, but if I can see the client side of the interface it may help. If there are specialized instructions for using the form, please post those, too. Thanks.
ASKER
The following is an example of the formula I need to run.
The equation I need to run is as follows:
95 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 71.25
QTY 2 input = 82
Different equation needs to run for QTY 2
82 x 1 x 1.1 x 1 x 1 x .75 x 1 x 1 = 67.65
QTY 3 Input = 54
Equation for Input 3:
54 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 40.50
QTY 4 Input =54
Different equation needs to run for QTY 4
54 x 1 x 1.1 x 1 x 1 x .75 x 1 x 1 = 44.55
THEN: readonly type="text" name="total" id="sum" would be: 223.95
<form>
Qty1 : <input onblur="findSum()" name="qty1" class="qty" autocomplete="off" /><br>
Qty2 : <input onblur="findSum()" name="qty2" class="qty" autocomplete="off" /><br>
Qty3 : <input onblur="findSum()" name="qty3" class="qty" autocomplete="off" /><br>
Qty4 : <input onblur="findSum()" name="qty3" class="qty" autocomplete="off" /><br>
Total : <input readonly type="text" name="total" id="sum"/>
<input type="submit" />
</form>The equation I need to run is as follows:
95 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 71.25
QTY 2 input = 82
Different equation needs to run for QTY 2
82 x 1 x 1.1 x 1 x 1 x .75 x 1 x 1 = 67.65
QTY 3 Input = 54
Equation for Input 3:
54 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 40.50
QTY 4 Input =54
Different equation needs to run for QTY 4
54 x 1 x 1.1 x 1 x 1 x .75 x 1 x 1 = 44.55
THEN: readonly type="text" name="total" id="sum" would be: 223.95
"1" (one) is the multiplicative identity. Not really sure what role it would play in these computations or where it would come from?
95 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 71.25 === 95 x .75
95 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 71.25 === 95 x .75
This should help you get started. If you don't already know JavaScript and want to learn it, I can recommend CodeAvengers as a good learning resource. This appears to be good, too: http://www.amazon.com/dp/1497408180
<!DOCTYPE html>
<!--
SEE http://www.experts-exchange.com/Programming/Languages/Scripting/PHP/Q_28484078.html
QTY 1 input = 95
The equation I need to run is as follows:
95 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 71.25
QTY 2 input = 82
Different equation needs to run for QTY 2
82 x 1 x 1.1 x 1 x 1 x .75 x 1 x 1 = 67.65
QTY 3 Input = 54
Equation for Input 3:
54 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 40.50
-->
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<script>
function findSum(){
var arr = document.getElementsByClassName('qty');
var tot=0;
for(var i=0; i<arr.length; i++){
if(parseFloat(arr[i].value))
tot += parseFloat(arr[i].value);
}
document.getElementById('sum').value = tot;
}
function findQty1(){
var arr = [ 1.0, 1.0, 1.0, 1.0, 0.75, 1.0, 1.0 ];
var dat = document.getElementById('qty1').value;
var tot=0.0;
for(var i=0; i<arr.length; i++){
tot = arr[i] * dat;
dat = tot;
}
document.getElementById('qty1').value = tot;
}
function findQty2(){
var arr = [ 1.0, 1.1, 1.0, 1.0, 0.75, 1.0, 1.0 ];
var dat = document.getElementById('qty2').value;
var tot=0.0;
for(var i=0; i<arr.length; i++){
tot = arr[i] * dat;
dat = tot;
}
document.getElementById('qty2').value = tot;
}
function findQty3(){
var arr = [ 1.0, 1.0, 1.0, 1.0, 0.75, 1.0, 1.0 ];
var dat = document.getElementById('qty3').value;
var tot=0.0;
for(var i=0; i<arr.length; i++){
tot = arr[i] * dat;
dat = tot;
}
document.getElementById('qty3').value = tot;
}
</script>
<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>
<form>
Qty1 : <input onblur="findQty1()" name="qty1" id="qty1" class="qty" autocomplete="off" /><br>
Qty2 : <input onblur="findQty2()" name="qty2" id="qty2" class="qty" autocomplete="off" /><br>
Qty3 : <input onblur="findQty3()" name="qty3" id="qty3" class="qty" autocomplete="off" /><br>
<br>
Total : <input readonly type="text" name="total" id="sum"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>
</body>
</html>ASKER
OK, Thanks for all of your help so far. I am better understanding how to ask the question:
The following code shows what I am trying todo :
I don't know how to pass the value from one function to the next. For example, pass the value from qty to findQty2 then pass the value of findQty2 to Function findQty3??? Is this making sense yet?
The following code shows what I am trying todo :
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<script>
function findSum(){
var arr = document.getElementsByClassName('qty');
var tot=0;
for(var i=0; i<arr.length; i++){
if(parseFloat(arr[i].value))
tot += parseFloat(arr[i].value);
}
document.getElementById('sum').value = tot;
}
function findQty2(){
var arr = qty1;
var dat = document.getElementById('qty2').value;
var tot=0.0;
for(var i=0; i<arr.length; i++){
tot = arr[i] * dat;
dat = tot;
}
document.getElementById('qty2').value = tot;
}
function findQty3(){
var arr = qty2;
var dat = document.getElementById('qty3').value;
var tot=0.0;
for(var i=0; i<arr.length; i++){
tot = arr[i] * dat;
dat = tot;
}
document.getElementById('qty3').value = tot;
}
</script>
<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>
<form>
Qty1 : <input onblur="findSum()" name="qty1" id="qty1" class="qty" value="183.60" autocomplete="off" /><br>
Qty2 : <select onblur="findQty2()" name="qty2" id="qty2" class="qty" autocomplete="off" >
<option value="1">1</option>
<option value=".925">.925</option>
<option value=".85">.85</option>
<option name="qty2" value=".80">.80</option>
</select>
<br>
Qty3 : <select onblur="findQty3()" name="qty3" id="qty3" class="qty" autocomplete="off" >
<option value="1.00">A</option>
<option value="1.00">B</option>
<option value=".85">C</option>
<option name="qty2" value=".80">D</option>
</select>
<br>
Total : <input readonly type="text" name="total" id="sum"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>
</body>
</html>I don't know how to pass the value from one function to the next. For example, pass the value from qty to findQty2 then pass the value of findQty2 to Function findQty3??? Is this making sense yet?
This shows how you might take PHP variables and use them to create the JavaScript. We use HEREDOC notation to build the javascript statements, then echo the javascript statements into the HTML document on line 80.
<?php // demo/temp_rgranlund.php
error_reporting(E_ALL);
// SET PHP STRING VARIABLES
$a = "1.0";
$b = "1.1";
$c = "0.75";
// USE THE VARIABLES TO CREATE THE JAVASCRIPT
$javascript = <<<ENDJS
<script>
function findSum(){
var arr = document.getElementsByClassName('qty');
var tot=0;
for(var i=0; i<arr.length; i++){
if(parseFloat(arr[i].value))
tot += parseFloat(arr[i].value);
}
document.getElementById('sum').value = tot;
}
function findQty1(){
var arr = [ $a, $a, $a, $a, $c, $a, $a ];
var dat = document.getElementById('qty1').value;
for(var i=0; i<arr.length; i++){
dat = arr[i] * dat;
}
document.getElementById('qty1').value = dat;
}
function findQty2(){
var arr = [ $a, $b, $a, $a, $c, $a, $a ];
var dat = document.getElementById('qty2').value;
for(var i=0; i<arr.length; i++){
dat = arr[i] * dat;
}
document.getElementById('qty2').value = dat;
}
function findQty3(){
var arr = [ $a, $a, $a, $a, $c, $a, $a ];
var dat = document.getElementById('qty3').value;
for(var i=0; i<arr.length; i++){
dat = arr[i] * dat;
}
document.getElementById('qty3').value = dat;
}
</script>
ENDJS;
// END OF PHP, USE HTML
?>
<!DOCTYPE html>
<!--
SEE http://www.experts-exchange.com/Programming/Languages/Scripting/PHP/Q_28484078.html
QTY 1 input = 95
The equation I need to run is as follows:
95 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 71.25
QTY 2 input = 82
Different equation needs to run for QTY 2
82 x 1 x 1.1 x 1 x 1 x .75 x 1 x 1 = 67.65
QTY 3 Input = 54
Equation for Input 3:
54 x 1 x 1 x 1 x 1 x .75 x 1 x 1 = 40.50
-->
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<?php echo $javascript; ?>
<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>
<form>
Qty1 : <input onblur="findQty1()" name="qty1" id="qty1" class="qty" autocomplete="off" /><br>
Qty2 : <input onblur="findQty2()" name="qty2" id="qty2" class="qty" autocomplete="off" /><br>
Qty3 : <input onblur="findQty3()" name="qty3" id="qty3" class="qty" autocomplete="off" /><br>
<br>
Total : <input readonly type="text" name="total" id="sum"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>
</body>
</html>
Looking at the code snippet here, I think you want to maybe consider taking a class about HTML. CodeAvengers has one. The snippet there is kind of a non-starter because of the HTML errors. For example, the HTML option tag does not have a name= attribute. I can't really follow the logic for what you want to do any more.
ASKER
@Ray, sorry, in haste I believe I posted the wrong updated code. The following is very close to what I am trying to accomplish.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<script>
function findSum(){
var arr = document.getElementsByClassName('qty');
var tot=0;
for(var i=0; i<arr.length; i++){
if(parseFloat(arr[i].value))
tot += parseFloat(arr[i].value);
}
document.getElementById('sum').value = tot;
}
function findQty1(){
var dat = document.getElementById('qty1').value;
tot = dat;
document.getElementById('qty1').value = tot;
}
function findQty2(){
var arr = document.getElementById('qty1').value;
var dat = document.getElementById('qty2').value;
var tot=0.0;
for(var i=0; i<arr.length; i++){
tot = arr[i] * dat;
dat = tot;
}
document.getElementById('qty2').value = tot;
}
function findQty3(){
var arr = document.getElementById('qty2').value;
var dat = document.getElementById('qty3').value;
var tot=0.0;
for(var i=0; i<arr.length; i++){
tot = arr[i] * dat;
dat = tot;
}
document.getElementById('qty3').value = tot;
}
</script>
<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>
<form>
Qty1 : <input onblur="findQty1()" name="qty1" id="qty1" class="qty" value="183.60" autocomplete="off" /><br>
Qty2 : <select onblur="findQty2()" name="qty2" id="qty2" class="qty" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1">1</option>
<option value=".925">.925</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Qty3 : <select onblur="findQty3()" name="qty3" id="qty3" class="qty" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1.00">1.00</option>
<option value="1.00">1.00</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Total : <input readonly type="text" name="total" id="sum"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>
</body>
</html>
ASKER
@ray the following works almost 100%. However, I'm not sure how to write in Javascript "if value is set"
For example: var myResult = (if (isset ['myBox1'])) {echo myBox1; } else {echo 1; } * myBox2 * myBox3;
For example: var myResult = (if (isset ['myBox1'])) {echo myBox1; } else {echo 1; } * myBox2 * myBox3;
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<script>
function findSum(){
var myBox1 = document.getElementById('qty1').value;
var myBox2 = document.getElementById('qty2').value;
var myBox3 = document.getElementById('qty3').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2 * myBox3;
result.value = myResult;
}
</script>
<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>
<form>
Qty1 : <input name="qty1" id="qty1" class="qty" value="183.60" autocomplete="off" /><br>
Qty2 : <select name="qty2" id="qty2" class="qty" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1">1</option>
<option value=".925">.925</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Qty3 : <select name="qty3" id="qty3" class="qty" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1.00">1.00</option>
<option value="1.00">1.00</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Total : <input readonly type="text" name="total" id="result"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>
</body>
</html>
Please take that javaScript course before you start down this path. This is just not going to work for you unless you learn the basics. If you don't have time or don't want to learn JavaScript then consider hiring a developer to build the application for you. This question thread isn't going anywhere -- it's just too confused and lacking in basics. I'm afraid that we are wasting your time at this point.
As one example of something that I can't understand, have a look at this. In narrative terms, by line number here is what we have:
1. Define a function named findQty1 that accepts no arguments
2. Go into the document, find the element with the id="qty1" and assign the value to variable dat
3. Assign the value of dat to tot
4. Go into the document, find the element with the id="qty1" and assign the value of tot to the element
In other words, it copies a value into itself, thereby accomplishing nothing except to waste cycles on the client computer! There are other things, too, but when you find that you're starting with something like this the right thing to do is scrap it all and start over.
As one example of something that I can't understand, have a look at this. In narrative terms, by line number here is what we have:
1. Define a function named findQty1 that accepts no arguments
2. Go into the document, find the element with the id="qty1" and assign the value to variable dat
3. Assign the value of dat to tot
4. Go into the document, find the element with the id="qty1" and assign the value of tot to the element
In other words, it copies a value into itself, thereby accomplishing nothing except to waste cycles on the client computer! There are other things, too, but when you find that you're starting with something like this the right thing to do is scrap it all and start over.
function findQty1(){
var dat = document.getElementById('qty1').value;
tot = dat;
document.getElementById('qty1').value = tot;
}
Looks like our posts crossed. What is the issue now with the latest revision of the code snippet?
ASKER
I'm having an issue implementing the if / else statement with the javascript multiplication:
<script>
function findSum(){
var myBox1 = document.getElementById('qty1').value;
var myBox2 = document.getElementById('qty2').value;
var myBox3 = document.getElementById('qty3').value;
var result = document.getElementById('result');
var myResult = myBox1 * if(myBox2 > 0) { myBox2 } else {myBox2 == 1} * if(myBox3 > 0) { myBox3 } else {myBox3 ==1};
result.value = myResult;
}
</script>ASKER
I think you are correct Ray. I need to back off of this question and just deal with the Javascript part. I'm going to repost and ask in a different manner. Thanks for your help.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Sorry about the formatting. E-E must be the only place in the world where a tab is 8 blanks instead of 4!
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<script>
function findSum(){
var myBox1 = document.getElementById('qty1').value;
var myBox2 = document.getElementById('qty2').value;
var myBox3 = document.getElementById('qty3').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2 * myBox3;
result.value = myResult;
}
</script>
<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>
<form>
Qty1 : <input name="qty1" id="qty1" class="qty" value="183.60" autocomplete="off" /><br>
Qty2 : <select name="qty2" id="qty2" class="qty" autocomplete="off" >
<option value="1">Select an option...</option>
<option value="1">1</option>
<option value=".925">.925</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Qty3 : <select name="qty3" id="qty3" class="qty" autocomplete="off" >
<option value="1">Select an option...</option>
<option value="1.00">1.00</option>
<option value="1.00">1.00</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Total : <input readonly type="text" name="total" id="result"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>
</body>
</html>ASKER
Actually, I feel kind of stupid now. All I needed to do was change the += in the javascript to *
Thanks again for all of your help!
Thanks again for all of your help!
<script>
function findSum(){
var arr = document.getElementsByClassName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot * parseInt(arr[i].value);
}
document.getElementById('sum').value = tot;
}
</script>
<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>
<form method="POST" action="">
Qty1 : <input name="qty1" id="qty1" class="qty" value="183.60" onblur="findSum()" autocomplete="off" /><br>
Qty2 : <select name="qty2" id="qty2" class="qty" onblur="findSum()" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1">1</option>
<option value=".925">.925</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Qty3 : <select name="qty3" id="qty3" class="qty" onblur="findSum()" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1.00">1.00</option>
<option value="1.00">1.00</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
SUM So Far: <input readonly type="text" name="sum" id="sum"/><br />
Click To Preview Your Total So Far:
<input type="button" value="Total Results" onclick="findSum()" />
</form>
I don't think this last version of the code works. Did you test it before you posted it?