如何定义变量并在隐藏的输入字段中调用它?

时间:2013-04-18 20:52:20

标签: javascript forms

我有一个javascript代码可以进行一些数学运算,我需要能够将最终结果拉出来并将其包含在表单中。为此,我想使用<input type="hidden" name="new total">。我想从现场&#34; New Total&#34;中获取结果。你可以在这里看到我的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>';
}

看起来很简单,出于某种原因,我在如何做到这一点上留下了空白。

3 个答案:

答案 0 :(得分:0)

我认为你想要的是用你的变量设置一个输入值,所以我认为它应该是这样的:

使用Javascript:

document.getElementById("newTotal").value = your_new_total;

HTML:

<form>
    <input id='newTotal' type='hidden' name='NewTotal' value='' />
</form>

希望这有帮助。

答案 1 :(得分:0)

<input type="hidden" id="new_total" name="new_total">
<!-- no spaces in name and id -->

将此代码放在calculateSectedDues函数

的末尾

document.getElementById('new_total').value = withDiscount

答案 2 :(得分: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来为您完成。这只是为了通知用户他们之前得到了什么。否则,如果您使用隐藏的总字段,则可以轻松完成前端黑客攻击。