Question

我需要根据房间和每天的价格来计算酒店的预订价格。假设一个人预定2天价格为1000的2个房间。因此总价格将为2000 * 2 =4000。我使用Javascript完成了此操作，但是在更改输入值时，我需要再次刷新页面。我需要像自动计算文本值中的任何更改一样进行此操作。已经实现的代码是-

<script language="JavaScript" type="text/javascript">

    $(document).ready(function () {
        $("select.rooms").change(function () {
            var selectedrooms = $(".rooms option:selected").val();
            $("#tr").val("" + selectedrooms);

            var tprice = $("#price").val() * selectedrooms;

            $("#tprice").val("" + tprice);
            $("#checkout-date").change(function () {
                var selectedoutdate = $("#checkout-date").val();
                var selectedindate = $("#checkin-date").val();

            });


        });
        ///var txtto = document.getElementById("#txtTo");

        if ($("#txtFrom").val() != "" && $("#txtTo").val() != "") {

            var From_date = new Date($("#txtFrom").val());
            var To_date = new Date($("#txtTo").val());
            var diff_date = To_date - From_date;

            //var years = Math.floor(diff_date / 31536000000);
            //var months = Math.floor((diff_date % 31536000000) / 2628000000);
            var days = Math.floor(((diff_date % 31536000000) % 2628000000) / 86400000);

            $("#days").html(days);
            //alert( years+" year(s) "+months+" month(s) "+days+" and day(s)");

            var ttp = days * $("#tprice").val();
            //alert("days: " + days + "price: " + $("#tprice").val() + "ttp: " + ttp);
            //$("#priceDetails").html(selectedrooms + " and " + days + " day(s): " + ttp);

            $("#priceDetails").html(days + " day(s) and " + $(".rooms option:selected").val() + " Room(s): ");
            $("#prc").html(ttp);
        }
        else {
            //alert("Please select dates");
            $("#priceDetails").html("0.0");
            return false;
        }

    });

</script>

，我的输入框（HTML）代码是-

<form class="" id="form-booking" method="post" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Check-In</label>
                            <input type="text" required="true" placeholder="Check-In" id="txtFrom" title="Add your Check In date" class="checkin form-control" />
                        </div>
                        <div class="col-sm-4">
                            <label>Check-Out</label>
                            <input type="text" required="true" id="txtTo" placeholder="Check-out" title="Type in your Check out date" class="checkout form-control" />
                        </div>

                        <div class="col-sm-4">
                            <label>Rooms</label>
                            <select id="rooms" required="required" style="font-size:small" class="rooms form-control dropdown">
                                <option disabled="disabled">Select...</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>5+</option>
                            </select>

                        </div>

                        <div class="col-sm-12">
                            <div id="divmsg" class="" style="display:block">
                                <p id="pmsg" class="text-danger"></p>
                            </div>
                        </div>

                    </div>
                </form>

有什么建议吗？如何实现呢？

Answer 1

您需要将代码放入输入模糊事件中，以便自动计算最终价格

https://api.jquery.com/blur/

如何在ASP.NET MVC中自动计算价格值

1 个答案: