0

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

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

在这里提琴

这是我的脚本

$(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>
4

5 回答 5

0

您的问题是一个简单的语法错误。在代码的末尾，您有

}
}

第一个}关闭函数，但第二个}导致错误。尝试将其替换为 a)以关闭准备功能。

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

于 2014-06-04T13:45:17.760 回答
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>

演示

于 2014-06-04T13:53:29.673 回答
0

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

小提琴

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);
}

编辑：使用香草 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;
            }
        }

香草小提琴

于 2014-06-04T13:58:40.083 回答
-1

更多 DRY 代码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);
});
于 2014-06-04T14:01:16.520 回答
-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);
    }
});

vanila javascript修复

于 2014-06-04T14:01:48.173 回答