I'm Trying to update the $total_charge variable with the value of the "shipping radio button" without having to refresh or submit the page. I believe this can be done using JavaScript, but I'm not sure how. The code I'm using is below.
Any suggestions?
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<?php
$qty = $_POST["qty"];
$style = $_POST["style"];
$price = $_POST["price"];
$lense = $_POST["lense"];
$lense_chunks = explode("|", $lense);
$tax = .08*(($price+$lense_chunks[1])*$qty);
$total_charge = ($tax + $shipping) + (($price+$lense_chunks[1])*$qty);
?>
</head>
<body>
<p><strong>Price</strong> = <?php echo $price;?> <br />
<strong>QTY</strong> = <?php echo $qty;?>
<br />
<strong>Style</strong> = <?php echo $style;?>
<br />
<strong>Lense</strong> = <?php echo $lense_chunks[0];?>
<br />
<strong>Lense Fee</strong> = <?php echo $lense_chunks[1];?>
<br />
<strong>Tax</strong> = <?php echo $tax;?><br />
<strong>Shipping</strong> = Standard ($5.00)
<label>
<input name="shipping" type="radio" id="RadioGroup1_0" value="5.00" checked="checked" />
</label>
Overnight ($20.00)
<input type="radio" name="shipping" value="20.00" id="RadioGroup1_0" />
<br />
<strong>Total Charge</strong> = <?php echo $total_charge;?>
</p>
</body>
</html>
I'm Trying to update the $total_charge variable with the value of the "shipping radio button" without having to refresh or submit the page. I believe this can be done using JavaScript, but I'm not sure how. The code I'm using is below.
Any suggestions?
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<?php
$qty = $_POST["qty"];
$style = $_POST["style"];
$price = $_POST["price"];
$lense = $_POST["lense"];
$lense_chunks = explode("|", $lense);
$tax = .08*(($price+$lense_chunks[1])*$qty);
$total_charge = ($tax + $shipping) + (($price+$lense_chunks[1])*$qty);
?>
</head>
<body>
<p><strong>Price</strong> = <?php echo $price;?> <br />
<strong>QTY</strong> = <?php echo $qty;?>
<br />
<strong>Style</strong> = <?php echo $style;?>
<br />
<strong>Lense</strong> = <?php echo $lense_chunks[0];?>
<br />
<strong>Lense Fee</strong> = <?php echo $lense_chunks[1];?>
<br />
<strong>Tax</strong> = <?php echo $tax;?><br />
<strong>Shipping</strong> = Standard ($5.00)
<label>
<input name="shipping" type="radio" id="RadioGroup1_0" value="5.00" checked="checked" />
</label>
Overnight ($20.00)
<input type="radio" name="shipping" value="20.00" id="RadioGroup1_0" />
<br />
<strong>Total Charge</strong> = <?php echo $total_charge;?>
</p>
</body>
</html>
4 Answers
Reset to default 3PHP is back-end and Javascript is front-end.
To update $total_charge you must send an http request to your server with the new value.
But for visual effect in html page, use javascript
<head>
<?php
$qty = $_POST["qty"];
$style = $_POST["style"];
$price = $_POST["price"];
$lense = $_POST["lense"];
$lense_chunks = explode("|", $lense);
$tax = .08*(($price+$lense_chunks[1])*$qty);
$total_charge = ($tax + $shipping) + (($price+$lense_chunks[1])*$qty);
?>
<script>
function refreshTotalCharge(value){
var tax = <?php echo $tax; ?>;
var shipping = <?php echo $shipping; ?>;
var lense_chunks1 = <?php echo $lense_chunks[1]; ?>;
var qty = <?php echo $qty; ?>;
document.getElementById("totalCharge").innerHTML= (tax + shipping) + ((value + lense_chunks1) * qty);
}
</script>
</head>
<body>
<p>
<strong>Price</strong> = <?php echo $price;?> <br />
<strong>QTY</strong> = <?php echo $qty;?>
<br />
<strong>Style</strong> = <?php echo $style;?>
<br />
<strong>Lense</strong> = <?php echo $lense_chunks[0];?>
<br />
<strong>Lense Fee</strong> = <?php echo $lense_chunks[1];?>
<br />
<strong>Tax</strong> = <?php echo $tax;?><br />
<strong>Shipping</strong> = Standard ($5.00)
<label>
<input name="shipping" type="radio" id="RadioGroup1_0" value="5.00" checked="checked" onClick="refreshTotalCharge(this.value);" />
</label>
Overnight ($20.00)
<input type="radio" name="shipping" value="20.00" id="RadioGroup1_0" onClick="refreshTotalCharge(this.value);"/>
<br />
<strong>Total Charge</strong> = <span id="totalCharge"><?php echo $total_charge;?></span>
</p>
</body>
You can use javascript to update the total shown to the user.
The code by r3tep should work.
I have put it in a jsFiddle for you: http://jsfiddle/ASZcL/
The javascript:
var total_without_shipping = '<?php echo $total_charge_without_shipping;?>';
function updateTotal(shipping_cost) {
total_cost = parseInt(total_without_shipping) + parseInt(shipping_cost);
document.getElementById('total').innerHTML = total_cost;
}
And the form with php:
<p><strong>
Price</strong> =
<?php echo $price;?>
<br /> <strong>QTY</strong> =
<?php echo $qty;?>
<br /> <strong>Style</strong> =
<?php echo $style;?>
<br /> <strong>Lense</strong> =
<?php echo $lense_chunks[0];?>
<br /> <strong>Lense Fee</strong> =
<?php echo $lense_chunks[1];?>
<br /> <strong>Tax</strong> =
<?php echo $tax;?>
<br /> <strong>Shipping</strong> = Standard ($5.00)
<label>
<input name="shipping" type="radio" id="RadioGroup1_0" value="5.00" checked="checked" onclick="updateTotal(this.value)" />
</label>Overnight ($20.00)
<input type="radio" name="shipping" value="20.00" id="RadioGroup1_0" onclick="updateTotal(this.value);" />
<br /> <strong>Total Charge</strong> = <span id="total">100</span>
</p>
Yes indeed you should use javascript due to the fact that you want to update a variable value before sending to the server, and that is what javascript stands for, manipulating DOM objects.
Create a javascript script that holds all variables, make calculations on javascript and then parse the total charge to the PHP variable, which I suppose will send the data to your tables.
Don't forget to use parseInt in order to avoid a mess with decimals.
I want to extend the javascript to php value parsing. Simply by javascript altering DOM object value, document.getElementById().value, change the value of the input field where the total charge is allocated. When sending the form, the server will get via $_POST the value that jjavascript calculated.
You could undesrtand that PHP is running at server side and HTML/JS/CSS at client side. PHP is a scripting language, it means that when your browser receive the page, your script does not longer exist, so when you click your radio button, your variable does not exist anymore.
You could:
- Use Ajax to send a request to run a script without any refresh.
- Use Session to keep a variable associated to the current user (through page loading).
- Edit the displayed total with JavaScript.
For the third option, you should isolate the content you need to edit, use an input tag or any other tag (according to the context and needs). Then you could use jQuery to manipulate it easily:
$("input[name=shipping]").change(function() {
$(this).val();// The value of the checked radio button
$("#TotalCharge").text("New value");//text() to edit text of you total charge tag with id="TotalCharge". .html() is an alternative to write HTML.
});
While i was writing this code, i saw you are using the same ID for two different HTML elements, that si forbidden (In fact, it's a mon mistake but it can't do what you want), prefer to use a class.
You may use hidden input for other values if you need it. (But you could also get it from tag content or data)
Please refer to jQuery documentation for more information about it.