Question

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

<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

以下是您需要的工作片段。如有任何疑问，请提出解释

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

Answer 2

首先，如果你只允许使用数字，那么你必须检查keydown事件中的每个给定字符，并且仅允许所需的输入，例如：numeric，Ctrl + c ......：{{3 }}

其次，要获取用户在此字段中撰写的内容并进行计算，您可以使用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 =＆＃34; num_of_tickets＆＃34;所以你的输入字段将是<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>

Jquery的

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

如何在数量变化时更改总价？

5 个答案:

JQuery解决方案：