1

ヘッダーにあるように、単純な合計価格関数を作成する必要があります。人数を 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>
4

4 に答える 4

1

あなたの場合、フォームを使用する必要はないと思います。合計金額のみを表示したいだけです。これを試して：

<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>
于 2012-05-31T07:03:20.727 に答える
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>
于 2012-05-31T06:54:02.630 に答える
1

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>
于 2012-05-31T06:54:05.883 に答える
0

Knockout.js は、このような状況向けに設計されています。Knockout ホームを参照してください。

于 2012-05-31T07:08:13.027 に答える