下拉实时计算答案

【问题标题】：Dropdown Calculate in real time下拉实时计算
【发布时间】：2017-10-07 06:44:25
【问题描述】：

这是我在提交包和事件 id 后使用 sum 计算的表单，并且访客字段始终计算（访客值 * 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>

【问题讨论】：

请编辑您的问题。我创建了一个 sn-p。现在，当您单击“编辑此 sn-p”时，您可以在编辑器的 JavaScript 窗格中添加您尝试过的内容 - 还将名称/ID 从“事件”和“提交”更改为其他内容，因为它们是保留字和名称的“提交”将隐藏表单提交事件 - 最后给每个选项一个“请选择”选项
@rayan005 请添加您为此尝试过的JS部分。
@Nishesh Pratap 我不能做实时计算代码。我只有ajax提交代码。你能帮我写代码吗

标签： javascript php ajax calculator

【解决方案1】：

要计算总价，您需要创建一个 JS 函数，然后您需要在更改客人、事件和包字段时调用该函数。

下面是我们创建了一个 JS 函数 calculateTotal() 的 sn-p，在该函数中我们计算所有 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>

【讨论】：