计算总价格脚本不起作用

时间：2014-06-04 13:41:47

标签： javascript calculated-field subtotal

我想计算总价并在表单底部显示小计，但它不起作用，我不知道为什么。

小计应显示减去或添加元素“prijsvolwassenen”，“prijskinderen”，“prijspeuters”和“prijskamertype”后的总价格

FIDDLE HERE

这是我的剧本

$(document).ready(function calculatePrice(formclear) {

 //Get selected data  
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;

var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;

var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;

var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;

//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);

//calculate total value  
var total = volwassenen+kinderen+peuters+kamertype; 

//print value to  PicExtPrice 
document.getElementById("PicExtPrice").value=total;

}
}

这是HTML：

   <form name="formclear" action="" method="post" id="bootstrap-frm">   
 <label>
    <span>Volwassenen :</span>
        <select class="autowidthselect" name="prijsvolwassenen" onChange="calculatePrice()" id="prijsvolwassenen">
            <option value="-50">1</option>
            <option selected="selected" value="0">2</option>
            <option value="50">3</option>
            <option value="100">4</option>
            <option value="150">5</option>
            <option value="200">6</option>
            <option value="250">7</option>
            <option value="300">8</option>
    </select>
</label>  

<label>
    <span>Kinderen (4-12 jr) :</span>
        <select class="autowidthselect" name="prijskinderen" onChange="calculatePrice()" id="prijskinderen">
            <option value="-50">0</option>
            <option value="-25">1</option>
            <option selected="selected" value="0">2</option>
            <option value="25">3</option>
            <option value="50">4</option>
            <option value="75">5</option>
            <option value="100">6</option>
            <option value="125">7</option>
        </select>
</label>

<label>
    <span>Kinderen (0-3 jr) :</span>
        <select class="autowidthselect" name="prijspeuters" onChange="calculatePrice()" id="prijspeuters">
            <option selected="selected" value="0">0</option>
            <option value="15">1</option>
            <option value="30">2</option>
            <option value="45">3</option>
            <option value="60">4</option>
            <option value="75">5</option>
            <option value="90">6</option>
            <option value="105">7</option>
        </select>
</label>

<label>
    <span> Kamertype :</span>
        <select class="autowidthselect" name="prijskamertype" onChange="calculatePrice()" id="prijskamertype">
            <option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
            <option value="295">Kraaiennest</option>
            <option value="395">Kajuit</option>
            <option value="495">Kapiteinshut</option>
        </select>
</label>

<label>
    <button type="button" onclick="calculatePrice()">Calculate</button>
</label>

<label>
    <span>Subtotaal: </span>
        <input id="PicExtPrice" type="text" size="10"/>
</label>

 </form>

5 个答案:

答案 0 :(得分：0)

您的问题是一个简单的语法错误。 在代码的最后，你有

}
}

第一个}关闭了该函数，但第二个}导致错误。尝试用)替换它以关闭就绪功能。

另外，我注意到你没有引用jQuery，所以这也导致了错误。在左侧，将“No-Library（pure JS）”的文本框更改为jQuery版本。

答案 1 :(得分：0)

你实际上是把东西混在一起。您尝试使用document ready jQuery库的一部分（您未加载或在代码中的任何位置使用），实际上您只需要声明一个函数。

此脚本应该适合您：

<head>
    <script type="text/javascript">
        function calculatePrice() {
            //Get selected data  
            var elt = document.getElementById("prijsvolwassenen");
            var volwassenen = elt.options[elt.selectedIndex].value;
            var elt = document.getElementById("prijskinderen");
            var kinderen = elt.options[elt.selectedIndex].value;
            var elt = document.getElementById("prijspeuters");
            var peuters = elt.options[elt.selectedIndex].value;
            var elt = document.getElementById("prijskamertype");
            var kamertype = elt.options[elt.selectedIndex].value;

            //convert data to integers
            volwassenen = parseInt(volwassenen);
            kinderen = parseInt(kinderen);
            peuters = parseInt(peuters);
            kamertype = parseInt(kamertype);

            //calculate total value  
            var total = volwassenen + kinderen + peuters + kamertype;

            //print value to  PicExtPrice 
            document.getElementById("PicExtPrice").value = total;
        }
    </script>
</head>

Demo

答案 2 :(得分：0)

在引用它时你应该更多地使用jQuery（顺便说一句，你忘了在你的小提琴中做）。我认为你想要实现的是这样的：

<强> FIDDLE

<强> HTML 

<form name="formclear" action="" method="post" id="bootstrap-frm">
    <label> <span>Volwassenen :</span>

        <select class="autowidthselect" name="prijsvolwassenen" id="prijsvolwassenen">
            <option value="-50">1</option>
            <option selected="selected" value="0">2</option>
            <option value="50">3</option>
            <option value="100">4</option>
            <option value="150">5</option>
            <option value="200">6</option>
            <option value="250">7</option>
            <option value="300">8</option>
        </select>
    </label>
    <label> <span>Kinderen (4-12 jr) :</span>

        <select class="autowidthselect" name="prijskinderen" id="prijskinderen">
            <option value="-50">0</option>
            <option value="-25">1</option>
            <option selected="selected" value="0">2</option>
            <option value="25">3</option>
            <option value="50">4</option>
            <option value="75">5</option>
            <option value="100">6</option>
            <option value="125">7</option>
        </select>
    </label>
    <label> <span>Kinderen (0-3 jr) :</span>

        <select class="autowidthselect" name="prijspeuters" id="prijspeuters">
            <option selected="selected" value="0">0</option>
            <option value="15">1</option>
            <option value="30">2</option>
            <option value="45">3</option>
            <option value="60">4</option>
            <option value="75">5</option>
            <option value="90">6</option>
            <option value="105">7</option>
        </select>
    </label>
    <label> <span> Kamertype :</span>

        <select class="autowidthselect" name="prijskamertype" id="prijskamertype">
            <option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
            <option value="295">Kraaiennest</option>
            <option value="395">Kajuit</option>
            <option value="495">Kapiteinshut</option>
        </select>
    </label>
    <label> <span>Subtotaal: </span>

        <input id="PicExtPrice" type="text" size="10" />
    </label>
</form>

<强> JS 

$(document).ready(function () {
    $("select").on("change", function () {
        CalculatePrice();
    });
    $("#CalculatePrice").on("click", function () {
        CalculatePrice();
    });
});

function CalculatePrice() 
{
    var pv = parseInt($("#prijsvolwassenen").val(), 10);
    var pk = parseInt($("#prijskinderen").val(), 10);
    var pp = parseInt($("#prijspeuters").val(), 10);
    var pkt = parseInt($("#prijskamertype").val(), 10);

    if (!isNaN(pkt))
        $("#PicExtPrice").val(pv+pk+pp+pkt);
}

编辑：使用vanilla JS更新答案： 让你的JS像这样：

<强> JS 

function calculatePrice() {
            //Get selected data  
            var elt = document.getElementById("prijsvolwassenen");
            var volwassenen = elt.options[elt.selectedIndex].value;

            var elt = document.getElementById("prijskinderen");
            var kinderen = elt.options[elt.selectedIndex].value;

            var elt = document.getElementById("prijspeuters");
            var peuters = elt.options[elt.selectedIndex].value;

            var elt = document.getElementById("prijskamertype");
            var kamertype = elt.options[elt.selectedIndex].value;

            //convert data to integers
            volwassenen = parseInt(volwassenen);
            kinderen = parseInt(kinderen);
            peuters = parseInt(peuters);
            kamertype = parseInt(kamertype);

            //check if each value is a number and calculate total value
            if (!isNaN(volwassenen) && !isNaN(kinderen) && !isNaN(peuters) && !isNaN(kamertype)) {
                var total = volwassenen + kinderen + peuters + kamertype;

                //print value to  PicExtPrice 
                document.getElementById("PicExtPrice").value = total;
            }
        }

<强> VANILLA FIDDLE

答案 3 :(得分：-1)

更多干密码http://jsfiddle.net/B6mPP/6/ 

$(function(){
    var fields = $('#prijsvolwassenen,#prijskinderen,#prijspeuters,#prijskamertype'), 
        total = $('#PicExtPrice');

    function calculateTotal(){
        var sum = 0;
        fields.each(function(){
            var value = parseInt($(this).val());
            value == value && (sum += value);
        })
        total.val(sum);            
    };

    fields.change(calculateTotal);
    $('#calculate').click(calculateTotal);
});

答案 4 :(得分：-1)

$(function(){
    $('.autowidthselect').on('change', function(){
        calculatePrice();    
    });

    $('button').on('click', function(){
        calculatePrice();
        return false;
    });

    function calculatePrice() {
        var total = 0;
        $('.autowidthselect').each(function(){
            total += !isNaN(this.value) ? parseInt(this.value) : 0;
        });
        $("#PicExtPrice").val(total);
    }
});

vanilla javascript修复

相关问题
最新问题