Question

在这个简单的html页面中，我有一个JavaScript在用户选择送货方式时进行计算，事情是$ _POST之后的计算不会保持不变，即使用户选择保持不变也要归功于简单的PHP我添加的代码，我在PHP和JavaScripts上都是全新的，在几次失败后，我认为你们可以帮助我，谢谢。

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

Answer 1

仅在表单更改时才会运行更新页面的

calc()。将onload事件添加到body标签中，并在页面加载时运行calc函数，或者执行计算服务器端并返回正确的值。

<body onload='calc()'>

Answer 2

我在您的代码中修复了几个问题，如下所示。最大的问题之一是，在更改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();

<!--- the rest of your code -->

$ _POST后保持JavaScript效果

2 个答案: