jQuery & PHP: Calculate the sum and send it back to client
I have the following HTML form with input elements:
<form id="forma" name="forma" method="post">
<div id="oblock">
<div class="dtable">
<div class="drow" id="drow1">
<div class="dcell">
<label for="aster">Aster:</label>
<input type="text" id="aster" name="aster" value="0" stock="10" price="2.99" required>
</div>
<div class="dcell">
<label for="daffodil">Daffodil:</label>
<input type="text" id="daffodil" name="daffodil" value="0" stock="12" price="1.99" required >
</div>
<div class="dcell">
<label for="rose">Rose:</label>
<input type="text" id="rose" name="rose" value="0" stock="2" price="4.99" required>
</div>
</div>
</div>
</div>
<div id="buttonDiv">
<button type="submit">Place Order</button>
</div>
</form>
And I use jQuery serialize() to collect data from the form and send to the server side ( test.php in my case) using $.post :
$(function() {
$("button").click(function(e) {
var formData = $("form").serialize();
$.post("test.php", formData, processServerResponse);
e.preventDefault();
});
});
function processServerResponse(data) {
$("div.dcell").hide();
$("#buttonDiv").append('<div>'+data.total+'</div>');
$("#buttonDiv button").remove();
}
If I understood correctly - with var formData = $("form").serialize(); the data that are sent to the server will be a string that will look something like this:
"aster":"2"&"daffodil":"5"&"rose":"0"
1. How to access these values in PHP ?
2. If there are a large number of input elements that each has its own unique name, how can we iterate (and avoid using $_POST['input_name'] for each element individually -> $_POST['aster'], $_POST['rose'] and so on... ) and calculate the sum in PHP ?
3. How to send that calculated sum back to client (f rom PHP to jQuery/Client side )?
EDIT2:
Based on some answers I received here, I tried the following way:
<?php
$sum = 0;
foreach ($_POST as $name=>$value) {
$sum += (int)$value;
}
$_POST['total'] = $sum;
echo json_encode($_POST['total']);
My client code (jQuery):
function processServerResponse(data) {
$("div.dcell").hide();
$("#buttonDiv").append('<div>'+data+'</div>');
$("#buttonDiv button").remove();
}
And it works - it displays the sum...
1 With $_POST['variable-name'];
$asterPostVariable = $_POST['aster'];
2 Iterate over the $_POST array
foreach ( $_POST as $key => $val )
{
// Do calculation, your value from input element is in $val
$sum += $val;
// You could also check your $key if you don't want to sum all post variables
}
3 echo it back as json data
echo json_encode( ['sum' => $calculatedSum] );
EDIT
2 Iterate over the $_POST array
foreach ( $_POST as $key => $val )
{
// You could also check your $key if you don't want to sum all post variables. This solution is based on that your form elements that you want to calculate are named with the initial fl_
if ( substr($key, 0, 3) == 'fl_' )
$sum += $val;
}
To answer all three your questions:
1. To access the values, you would use the superglobal variables. For example:
$_POST['element_name'];
2. To iterate through all elements, use the foreach statement. For example:
$sum = 0;
foreach($_POST as $name => $value){
$sum += strtoint($value);
}
$final = array(
sum => $sum
);
3. To return the values back to the JavaScript, use json_encode together with echo . Also make sure not to echo any data that you don't want to return. For example:
echo json_encode($final);
You can have each of your flower variables be the index of an array:
<form id="forma" name="forma" method="post">
<div id="oblock">
<div class="dtable">
<div class="drow" id="drow1">
<div class="dcell">
<label for="flowers[aster]">Aster:</label>
<input type="text" id="flowers[aster]" name="flowers[aster]" value="0" stock="10" price="2.99" required>
</div>
<div class="dcell">
<label for="flowers[daffodil]">Daffodil:</label>
<input type="text" id="flowers[daffodil]" name="flowers[daffodil]" value="0" stock="12" price="1.99" required >
</div>
<div class="dcell">
<label for="flowers[rose]">Rose:</label>
<input type="text" id="flowers[rose]" name="flowers[rose]" value="0" stock="2" price="4.99" required>
</div>
</div>
</div>
</div>
<div id="buttonDiv">
<button type="submit">Place Order</button>
</div>
</form>
and then you can iterate over this array:
foreach($_POST['flowers'] as $flowerType => $count){
// do something
}
I would try to avoid iterating over the entire array of $_POST as you may want to add more variables (unrelated to flowers) to this form later on.
You can use echo json_encode($result); when sending it back to the client
EDIT :
If you're getting an undefined response to your post, you should check your PHP error logs as it's likely that your script is failing or exiting before echoing anything out.
上一篇: 使浮动只显示两位小数