0

いくつかの計算を行う JavaScript コードがあり、最終結果を取得してフォームに含めることができる必要があります。そのためには、<input type="hidden" name="new total">. フィールド「New Total」から結果を取得したい。ここで私の JavaScript コードの動作を確認できます。http://jsfiddle.net/danielrbuchanan/yjrTZ/5/

var prices = [];

function remove(arr,itm){
    var indx = arr.indexOf(itm);
    if (indx !== -1){
        arr.splice(indx,1);
    }
}

function calculateSectedDues(checkbox, amount) {
    if (checkbox.checked === true) {
        prices.push(amount);
    } else {
        remove(prices, amount);
    }

    var total = 0;
    for (var i = 0, len = prices.length; i < len; i++)
        total += prices[i];

    var min = prices.slice().sort(function(a,b){return a-b})[0];
    if(typeof min === 'undefined') min = 0;

    var withDiscount = total - min;
    var discountAmount = withDiscount - total;

    //document.grad_enroll_form.total.value = total;
    document.querySelector("#value").innerHTML = "Total: $"+total+'<br>';
    document.querySelector("#value").innerHTML += "Discount: $"+discountAmount+'<br>';
    document.querySelector("#value").innerHTML += "New total: $"+withDiscount+'<br>';
}

簡単そうに見えて、なぜか空欄になってしまいます。

4

3 に答える 3

0

いくつかのオプションがあります。

オプション 1: jQuery

どんなにやりたいことでも、目に見える div を追加します。計算を駆動する入力フィールドに onChange() イベントをバインドします。

<div id="finalValue"></div>

<script language="javascript">
$(function() {
    $("form input").change(function() {
        calculateSectedDues($("#checkboxid"), $("#amountid").val());
    });
});
</script>

calculateSectedDues() 関数で、これを末尾に追加します。

$("#finalValue").html("Total: $" + total + "<br />Discount: " + discountAmount + "<br />New Total: " + withDiscount + "<br />");

オプション 2: jQuery を使用しない

<div id="finalValue"></div>

<script language="javascript">
function bindEvent() {
    calculateSectedDues(document.getElementById("checkboxid"), document.getElementById("amountid").value);
}
window.onload = function()
{
    var elJ = document.getElementsByTagName("input");
    for (var i=0;i<elJ.length;i++) {
        elJ[i].addEventListener('change',bindEvent,false);
    }
}
</script>

calculateSectedDues() 関数で、これを末尾に追加します。

document.getElementById("finalValue").InnerHtml("Total: $" + total + "<br />Discount: " + discountAmount + "<br />New Total: " + withDiscount + "<br />");

それはあなたが取得しようとしているものですか？

また、サーバー側でも計算を行うことを忘れないでください。JavaScript に頼らないでください。これは単に、ユーザーが何を手に入れているかをユーザーに通知するためのものです。そうしないと、非表示の合計フィールドを使用している場合、フロントエンドのハッキングが簡単に行われる可能性があります。

于 2013-04-18T21:09:40.190 に答える