1

在这个简单的 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>
4

2 回答 2

0

calc()仅当表单更改时才会运行您的页面更新。向您的正文标签添加一个onload事件，您的 calc 函数将在页面加载时运行，或者执行计算服务器端并返回正确的值。

<body onload='calc()'>
于 2013-06-07T17:22:32.397 回答
0

我在您的代码中修复了几个问题，如下所示。最大的问题之一是在您更改 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 -->
于 2013-06-07T17:24:36.797 回答