如标题所述，我需要创建一个简单的总价格函数。我需要将人数乘以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>
最佳答案
您需要调用函数以显示总价。向您的输入通话功能添加更改事件。
<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>