Php 在$\u POST之后保持JavaScript效果
在这个简单的html页面中，我有一个JavaScript，当用户选择运输方法时，它会进行计算，问题是在$\u POST之后，计算不会保持不变，尽管由于我添加了简单的PHP代码，用户选择保持不变，但我对PHP和JavaScript都是全新的，在几次失败之后，我想你们可以帮我，谢谢Php 在$\u POST之后保持JavaScript效果,php,javascript,Php,Javascript,在这个简单的html页面中，我有一个JavaScript，当用户选择运输方法时，它会进行计算，问题是在$\u POST之后，计算不会保持不变，尽管由于我添加了简单的PHP代码，用户选择保持不变，但我对PHP和JavaScript都是全新的，在几次失败之后，我想你们可以帮我，谢谢 <html> <body> <div class="calculations"> <table> <tbody><tr>
<html>
<body>
<div class="calculations">
<table>
<tbody><tr>
<td>Subtotal:</td>
<td id="subtotal">$97.00</td>
</tr>
<tr>
<td>Shipping:</td>
<td id="shipping">$6.95</td>
</tr>
<tr class="total">
<td>Total:</td>
<td id="total">$103.95</td>
</tr>
</tbody></table></div>
<select name="shippingmethod" onchange="calc()" class="shipping-method" id="shippingmethod">
<option value="" selected="<?php if (!$_POST || $shippingmethod == '0') {echo 'selected';} ?>">USPS Ground - $6.95</option>
<option value="1" <?php if ($_POST && $shippingmethod == '1') {echo 'selected';}?>>Priority Shipping - $17.95</option>
</select>
<script>
function calc() {
var subtotal =parseFloat(document.getElementById("subtotal").innerHTML.substring(1));
var shipping = parseInt(document.getElementById("shippingmethod").value);
if(shipping == 1) {
var total = subtotal+17.95;
document.getElementById("shipping").innerHTML = "$"+17.95;
} else {
var total = subtotal+6.95;
document.getElementById("shipping").innerHTML = "$"+6.95;
}
document.getElementById("total").innerHTML = "$"+total;
}
document.getElementById("shippingmethod").onchange = function(){
window.scrollTo(0, 0); // scroll to top
calc(); // call function
};
</script>
</body>
<html>
小计：
$97.00
航运：
$6.95
总数：
$103.95
calc（）
仅当表单更改时才运行更新页面的程序。在body标签中添加onload
事件，页面加载时将运行计算功能，或者在服务器端执行计算并返回正确的值
<body onload='calc()'>
您可以在下面看到，我在您的代码中解决了几个问题。最大的问题之一是，在更改select语句之前，javascript不会被计算出来，因此我在脚本底部添加了calc（）
，以便它立即重新计算
<?php
// Get the posted shipping method or default to 0
$shippingMethod = isset($_POST['shippingmethod']) ? (int)$_POST['shippingmethod'] : 0;
?>
<!--- your code -->
<select id="shippingmethod" name="shippingmethod" class="shipping-method">
<option data-cost="6.95" value="0" <?php if ($shippingMethod == 0) echo 'selected="selected"' ?>>USPS Ground - $6.95</option>
<option data-cost="17.95" value="1" <?php if ($shippingMethod == 1) echo 'selected="selected"' ?>>Priority Shipping - $17.95</option>
</select>
<script>
// Store some of our elements so we don't have to query the DOM more than once
var shippingSelect = document.getElementById("shippingmethod");
var subtotalElement = document.getElementById("subtotal");
function calc() {
var subtotal = parseFloat(subtotalElement.innerHTML.substring(1));
// if you notice we are now storing the shipping cost in the DOM elements
// This makes the code simpler and we don't have hard coded values in your
// javascript. You now can add any number of shipping method without having
// to change your javascript
var shippingCost = parseFloat(shippingSelect.options[shippingSelect.selectedIndex].getAttribute('data-cost'));
document.getElementById("total").innerHTML = "$" + (subtotal + shippingCost);
document.getElementById("shipping").innerHTML = "$" + shippingCost;
}
shippingSelect.onchange = function(){
window.scrollTo(0, 0); // scroll to top
calc(); // call function
};
// Force the shipping to calculate immediately.
calc();
>优先装运-17.95美元
//存储一些元素，这样就不必多次查询DOM
var shippingSelect=document.getElementById（“shippingmethod”）；
var subtotalElement=document.getElementById（“小计”）；
函数计算（）{
var subtotal=parseFloat（subtotalElement.innerHTML.substring（1））；
//如果您注意到，我们现在将运输成本存储在DOM元素中
//这使得代码更简单，并且在您的代码中没有硬编码的值
//您现在可以添加任意数量的装运方法，而无需
//更改javascript的步骤
var shippingCost=parseFloat（shippingSelect.options[shippingSelect.selectedIndex].getAttribute（'data-cost'）；
document.getElementById（“总计”）.innerHTML=“$”+（小计+发货成本）；
document.getElementById（“shipping”）.innerHTML=“$”+shippingCost；
}
shippingSelect.onchange=函数（）{
滚动到（0，0）；//滚动到顶部
calc（）；//调用函数
};
//强制运输立即计算。
计算（）；
Http不是一个有状态的协议，因此您需要使用会话之类的东西来存储页面请求之间的信息。如果要计算货币总和，则不应进行浮点计算。我建议你读一下十进制和浮点之间的区别。
<!--- the rest of your code -->