Question

这是我希望在提交包之后我想要的表格，事件ID用sum计算，而guest字段总是计算（访客值* 5），然后总结果显示在<div id="result">中。我怎样才能做到这一点？并且此结果设置为id="totalprice"值。感谢

＆＃13;

<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>

＆＃13;

Answer 1

要计算您需要创建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>

下拉计算实时

1 个答案: