ドロップダウンリアルタイムで計算

Question

これは私が提出したパッケージとイベントIDの後に加算したいと思うフォームです。そして、ゲストフィールドは常に計算されます（ゲスト値* 5）。そして合計結果は<div id="result">に表示されます。どうやってやるの？この結果はid="totalprice"値に設定されています。おかげで合計金額を計算するための

<form action="" class="myform" method="post" id="calculate"> 
 
    <h1>Reservation Info</h1> 
 
    <input type="text" id="datepicker" name="date" placeholder="Date"> 
 
    <select name="event" id="event"> 
 
    <option id="50" value="event 1">Event 1</option> 
 
    <option id="150" value="event 2">Event 2</option> 
 
    <option id="300" value="event 3">Event 3</option> 
 
    <option id="500" value="event 4">Event 4</option> 
 
    </select> 
 
    <input type="text" name="guest" placeholder="Number of gests" /> 
 
    <h1>Packages</h1> 
 
    <select name="package" id="asdasd"> 
 
    <option id="100" value="100">Package 1</option> 
 
    <option id="200" value="200">Package 2</option> 
 
    <option id="300" value="300">Package 3</option> 
 
    <option id="400" value="400">Package 4</option> 
 
    </select> 
 

 
    <div id="result"> 
 
    <input type="hidden" name="price" id="totalprice" /> 
 

 
    <h1>Additional comments</h1> 
 
    <textarea rows="4" name="comment" placeholder="Additional comments"></textarea> 
 

 
    <br> 
 
    <button type="submit" name="submit">submit</button> 
 
</form>

Answer 1

あなたはJS関数を作成する必要があり、その後、あなたはゲスト、イベントとパッケージフィールドの変化にその関数を呼び出す必要があります。

以下は、JS関数calculateTotal（）を作成したスニペットで、この関数では3つのフィールドの合計を計算しています。必要に応じて計算ロジックを変更してください。

<form action="" class="myform" method="post" id="calculate"> 
    <h1>Reservation Info</h1> 
    <input type="text" id="datepicker" name="date" placeholder="Date"> 
    <select name="event" id="event" onchange="calculateTotal()"> 
    <option id="50" value="50">Event 1</option> 
    <option id="150" value="150">Event 2</option> 
    <option id="300" value="300">Event 3</option> 
    <option id="500" value="500">Event 4</option> 
    </select> 
    <input type="text" id="guest" name="guest" placeholder="Number of guests" onchange="calculateTotal()"/> 
    <h1>Packages</h1> 
    <select name="package" id="package" onchange="calculateTotal()"> 
    <option id="100" value="100">Package 1</option> 
    <option id="200" value="200">Package 2</option> 
    <option id="300" value="300">Package 3</option> 
    <option id="400" value="400">Package 4</option> 
    </select> 

    <div id="result"> 
    <input type="hidden" name="price" id="totalprice" /> 

    <h1>Additional comments</h1> 
    <textarea rows="4" name="comment" placeholder="Additional comments"></textarea> 

    <br> 
    <button type="submit" name="submit">submit</button> 
</form> 
<script> 
function calculateTotal(){ 
var guest = parseInt(document.getElementById("guest").value); 
var event = parseInt(document.getElementById("event").value); 
var package= parseInt(document.getElementById("package").value); 
var sum= event+package+(guest*5); 
document.getElementById("totalprice").value=sum; 
} 
</script>