javascript — выпадающий расчет в режиме реального времени
Это моя форма, которую я хочу, чтобы после отправки пакета и идентификатора события вычислялась сумма, а гостевое поле всегда вычислялось (значение гостя * 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>Решение
Для расчета общей цены необходимо создать функцию JS, а затем вызвать ее при изменении поля guest, event и package.
Ниже приведен фрагмент, где мы создали функцию 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>
Другие решения
Других решений пока нет …
detector