Question

正如标题所说我需要创建一个简单的总价格函数。我需要将人数乘以1000并在“totalPrice”中显示。任何javascript / html / jquery都很棒。到目前为止我有这个：

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

Answer 1

您需要调用您的函数来显示总价。将更改事件添加到您的输入以调用函数。

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

完整代码：

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

Answer 2

尝试使用parseInt获取数字而不是字符串。

function CalculateTotal()
{ 
       var numberOP =  parseInt("0" + document.getElementById('numberOP').value);
       var total = numberOP * 1000;                       
       document.getElementById('totalPrice').innerHTML = total;
}

//Call above method
CalculateTotal();

你可以在提交按钮上调用此方法，只是为了检查它是否有效

 <button type="submit" id="buttonTicket" onclick="CalculateTotal();" >Buy Ticket</button>

Answer 3

我认为你不需要在你的情况下使用表格。您只想显示总价。试试这个：

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

Answer 4

Knockout.js专为这种情况而设计，见Knockout Home

如何创建简单的总价？

4 个答案: