1

この単純な html ページには、ユーザーが配送方法を選択したときに計算を行う JavaScript があります。追加した単純な PHP コードのおかげで、ユーザーの選択が同じままであっても、$_POST 後に計算が同じにならないということです。 、私は PHP と JavaScript の両方でまったく新しいものであり、いくつかの失敗の後、皆さんがこれについて私を助けてくれると思いました。

<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

以下に示すように、コードで修正したいくつかの問題があります。最大の問題の 1 つは、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 に答える
0

calc() which updates you page is only ever ran when the form changes. Add an onload event to your body tag and your calc function will be ran when the page loads, or do the calculation server side and return the correct value in place.

<body onload='calc()'>
于 2013-06-07T17:22:32.397 に答える