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?
LVL 7
rgranlundAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
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.
0
Ray PaseurCommented:
<!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>

Open in new window

0
rgranlundAuthor Commented:
@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.
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Jason C. LevineNo oneCommented:
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.
0
Ray PaseurCommented:
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.
0
rgranlundAuthor Commented:
The following is an example of the formula I need to run.
<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>

Open in new window

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

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
0
Ray PaseurCommented:
"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
0
Ray PaseurCommented:
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>

Open in new window

0
rgranlundAuthor Commented:
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 :
<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>

Open in new window


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?
0
Ray PaseurCommented:
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>

Open in new window

0
Ray PaseurCommented:
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.
0
rgranlundAuthor Commented:
@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>
                                          

Open in new window

0
rgranlundAuthor Commented:
@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;
<!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>
                                     

Open in new window

0
Ray PaseurCommented:
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.

function findQty1(){
    var dat = document.getElementById('qty1').value;
    tot = dat;
    document.getElementById('qty1').value = tot;
}

Open in new window

0
Ray PaseurCommented:
Looks like our posts crossed.  What is the issue now with the latest revision of the code snippet?
0
rgranlundAuthor Commented:
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>

Open in new window

0
rgranlundAuthor Commented:
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.
0
Ray PaseurCommented:
Not sure I see why you need the if / else statement?  See what this does:

<!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>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
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>

Open in new window

0
rgranlundAuthor Commented:
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!

<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>

Open in new window

0
Ray PaseurCommented:
I don't think this last version of the code works.  Did you test it before you posted it?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.