How do I change the total price when the quantity changes?

Question

When the user enters the number of tickets they want in the text box, the subtotal should automatically change/update. What do I have to add to get this working?

<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

Here is a working snippet of what you need. Please ask questions, if any, for explanations

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

First it will make sense if you only allow numeric ,to do this you have to check every given character on keydown event and allow only desirable input like : numeric,Ctrl+c ... : Reference.

Second, to get what you user wrote in this field and do your calculation, you can use change(); or keyup(); event.

PS: you have to add a class or id attribute to your required element if you want to get its value.

JQuery solution:

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

First add any id you prefer to <input type="text" type="num" /> i suggest id="num_of_tickets" so your input field will be <input id="num_of_tickets" type="text" type="num" /> Secondly create use javascript onkeyup event so the final shape of your input will be like

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

this function will automatically trigger whenever there is value change in the input field Third add this script to the head or footer to achieve desired result

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

Here replace 7 and 2 as per requirement or use variables instead

NOTE: You are using form tags inside another form tags this is a wrong practice, use only one instead

Answer 4

I have tried to keep as simple as possible using jQuery for number input you should use <input type="number" /> then calculate the sub total with $('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 Code

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