Home/ Questions/Q 8033605
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T01:44:54+00:00

As the header say I need to create a simple total price function.I need

  • 0

As the header say I need to create a simple total price function.I need to times the number of people to 1000 and show that in “totalPrice”. Anything javascript/html/jquery is great. I have this so far:

 <html>
 <body>
     <form id="buyTicket" method="post">
         <div>
             Booking Name : <input type="text" required id="bookingName" placeholder="booking name" /> 
         </div>
         <div>
             Number of persons : <input type="number" required id="numberOP" placeholder="number of persons"/> 
         </div>
         <div>
             Depature : <input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/> 
         </div>
         <div>
             Return           :
             <input type="text" required id="return" class="datepicker" placeholder="enter return date"/> 
         </div>
         <div id="totalPrice">Total:</div>
         <div>
             <button type="submit" id="buttonTicket">Buy Ticket</button>
         </div>
     </form>
     <script type="text/javascript"> 
        function CalculateTotal() {
            var numberOP = document.getElementById('numberOP').value;
            var total = numberOP * 1000;                       
            document.getElementById('totalPrice').innerHTML = total;
        }
    </script>
 </body>
 </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to call your function to display the Total price. Add an change event to to your input to call function.

    <div>Number of persons :<input type="number" required id="numberOP" onchange="CalculateTotal()" placeholder="number of persons"/></div>

    Full code:

    <html><body>
   <form id="buyTicket" method="post">
      <div>Booking Name      :<input type="text" required id="bookingName" placeholder="booking name" /></div>
      <div>Number of persons :<input type="number" required id="numberOP" onchange="CalculateTotal()" placeholder="number of persons"/></div>
      <div>Depature          :<input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/></div>
      <div>Return            :<input type="text" required id="return" class="datepicker" placeholder="enter return date"/></div>
      <div id="totalPrice">Total:</div>
      <input type="hidden" id="total" /> <!-- BAD IDEA -->
      <div><button type="submit" id="buttonTicket">Buy Ticket</button></div>
   </form>

   <script type="text/javascript"> 
      function CalculateTotal() {
         var numberOP = document.getElementById('numberOP').value;
         var total = numberOP * 1000;                       
         document.getElementById('totalPrice').innerHTML = 'Total: ' + total;
         document.getElementById('total').value = total; //<--BAD IDEA
      }
   </script>
</body></html>
    • 0