Q: how do I create a simple total price? 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>


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


A: Try parseInt to get a number instead of string.
function CalculateTotal()
{ 
       var numberOP =  parseInt("0" + document.getElementById('numberOP').value);
       var total = numberOP * 1000;                       
       document.getElementById('totalPrice').innerHTML = total;
}

//Call above method
CalculateTotal();

you can call this method on submit button just to check if it works 
 <button type="submit" id="buttonTicket" onclick="CalculateTotal();" >Buy Ticket</button>


A: I don't think you need to use form in your case. You just want to show total price only. Try this:
<html>
<body>
     <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" onlick="CalculateTotal();">Buy Ticket</button>
     </div>
 <script type="text/javascript"> 
    function CalculateTotal() {
        var numberOP = document.getElementById('numberOP').value;
        var total = numberOP * 1000;                       
        document.getElementById('totalPrice').innerHTML = total;
    }
</script>
</body>
</html>


A: Knockout.js is Designed for such kind of situation,
See Knockout Home
