数量变化时如何更改总价？ [关闭]

Question

关闭。 这个问题需要更加集中。 它目前不接受答案。

---

想改善这个问题吗？ 更新问题，使其仅通过编辑这篇文章来关注一个问题。

4年前关闭。

改进这个问题

当用户在文本框中输入他们想要的票数时，小计应自动更改/更新。 我必须添加什么才能使其正常工作？

<form id="confirmInfo" action="bookingsuccess.html">
  <p>Number of tickets :
    <input type="text" type="num" />
  </p>
  <p>Price Per ticket : $7</p>
  <p>Booking fee : $2</p>
  <p>Subtotal : <b>$<span id="total">0</span></b>
  </p>
  <form name="myform" action="bookingsuccess.php" method="post">
    <button>Book</button>
  </form>
  <button>Cancel</button>
</form>

Answer 1

这是您需要的工作片段。 请提出问题，如果有，请解释

 function calc() { var price = document.getElementById("ticket_price").innerHTML; var noTickets = document.getElementById("num").value; var total = parseFloat(price) * noTickets if (!isNaN(total)) document.getElementById("total").innerHTML = total }

 <form id="confirmInfo" action="bookingsuccess.html"> <p>Number of tickets :<input id="num" type="text" oninput="calc()" /> </p> <p>Price Per ticket : $<span id="ticket_price">7</span></p> <p>Booking fee : $2</p> <p>Subtotal : <b>$<span id="total">0</span></b></p> <form name="myform" action="bookingsuccess.php" method="post"> <button>Book</button> </form> <button>Cancel</button> </form>

Answer 2

首先，如果您只允许数字，这将是有意义的，要做到这一点，您必须检查keydown事件上的每个给定字符，并只允许所需的输入，例如： numeric,Ctrl+c ... : Reference 。

其次，要获取用户在此字段中写入的内容并进行计算，您可以使用change(); 或keyup(); 事件。

PS：如果要获取其值，则必须向所需元素添加class或id属性。

jQuery 解决方案：

 $(document).ready(function(){ $(".tickets_number").keydown(function (e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || // Allow: Ctrl+A, Command+A (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || // Allow: home, end, left, right, down, up (e.keyCode >= 35 && e.keyCode <= 40)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } }); $(".tickets_number").keyup(function (e) { $('#total').html(($(this).val()*7)+2); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <form id="confirmInfo" action="bookingsuccess.html"> <p>Number of tickets :<input type="text" class="tickets_number" value=""/> </p> <p>Price Per ticket : $7</p> <p>Booking fee : $2</p> <p>Subtotal : <b>$<span id="total">0</span></b></p> <form name="myform" action="bookingsuccess.php" method="post"> <button>Book</button> </form> <button>Cancel</button> </form>

Answer 3

首先添加您喜欢的任何 id <input type="text" type="num" />我建议 id="num_of_tickets" 所以你的输入字段将是<input id="num_of_tickets" type="text" type="num" />其次创建使用 javascript onkeyup 事件，因此您输入的最终形状将类似于

<input id="num_of_tickets" onkeyup="calc()" type="text" type="num" />

每当输入字段中的值发生变化时，此功能将自动触发 第三次将此脚本添加到页眉或页脚以获得所需的结果

<script>
function calc() {
    var x = document.getElementById("num_of_tickets").value;
    document.getElementById("total").innerHTML = x * 7 + 2;
}
</script>

这里根据要求替换 7 和 2 或使用变量代替

注意：您在另一个表单标签中使用表单标签这是错误的做法，请只使用一个

Answer 4

我试图尽可能简单地使用 jQuery 进行数字输入，您应该使用<input type="number" />然后使用$('input[type="number"]').on('input', function() {}

 var perTicket = 7; var bookingFee = 2; var $subTotal = $('#total'); $('input[type="number"]').on('input', function() { if (!$(this).val().trim().length) return; var total = $(this).val() * perTicket + bookingFee; $subTotal.text(total); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="confirmInfo" action="bookingsuccess.html"> <p>Number of tickets : <input type="number" /> </p> <p>Price Per ticket : $7</p> <p>Booking fee : $2</p> <p>Subtotal : <b>$<span id="total">0</span></b> </p> <form name="myform" action="bookingsuccess.php" method="post"> <button>Book</button> </form> <button>Cancel</button> </form>

Answer 5

html代码

<form id="confirmInfo" action="bookingsuccess.html">
              <p>Number of tickets :<input type="text" type="num" id="tickets"/> </p>
                  <p>Price Per ticket : $7</p>
                  <p>Booking fee : $2</p>
                  <p>Subtotal : <b>$<span id="total">0</span></b></p>


                  <form name="myform" action="bookingsuccess.php" method="post">
                  <button>Book</button>
                  </form>
                  <button>Cancel</button>

              </form>

查询

$(function(){
    $("#tickets").change(function(){
        var numberOfTickets=parseInt( $(this).val());
        var total = (numberOfTickets * 7) + 2 ;
        $("#total").val(total);
});
})