Question

尝试将我的“房间类型”下拉并转换为输入公式中使用的值。但是，我没有找到任何可以详细说明选择框结构的运气。

<form oninput="total.value = (nights.valueAsNumber * rmtp.valueAsNumber) + 
     ((guests.valueAsNumber) * 10)">
        <TABLE class="Internal Info" align="center">
    <TR>
    <TD><label>Full name:</label></TD>
    <TD><input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required></TD>
    </TR>
    <TR><TD>
      <label>Email address:</label></TD>
    <TD>  <input type="email" id="email_addr" name="email_addr" required></TD></TR>
    <TR>
      <TD><label>Repeat email address:</label></TD>
      <TD><input type="email" id="email_addr_repeat" name="email_addr_repeat" required 
       oninput="check(this)"></TD>
    </TR>
      <TR><TD><label>Arrival date:</label></TD>
    <TD>  <input type="date" id="arrival_dt" name="arrival_dt" required></TD></TR>
    <TR>
      <TD><label>Number of nights :</label></TD>
      <TD><input type="number" id="nights" name="nights" value="1" min="1" max="30" required></TD>
    </TR>
    <TR>
      <TD><label>Room Type</label></TD>
      <TD><select name="rmtp" required>
      <option value="80">Standard($80/N)</option>
      <option value="90">Superior($90/N)</option>
      <option value="110">Deluxe($110/N)</option>
      <option value="130">Family($130/N)</option>
      <option value="120">Riviera Suite($120/N)</option>
      <option value="199">Honeymoon Package($199/N)</option>
      </select>

      </TD>
    </TR>
      <TR><TD><label>Number of additional guests (two guests included at the base price; each additional guest adds $10.00 per night):</label></TD>
      <TD><input type="number" id="guests" name="guests" value="0" min="0" max="4" required></TD></TR>
    <TR>
      <TD><label>Estimated total:</label></TD>
    <TD>  $<output id="total" name="total">80</output>.00</TD>
      </TR>
      <TR>
      <TD><label>Promo code:</label></TD>
      <TD><input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}" 
       title="Promo codes consist of 6 alphanumeric characters."></TD></TR></TABLE>
    <br />
    </form>

    <script>
    function check(input) {
      if (input.value != document.getElementById('email_addr').value) {
        input.setCustomValidity('The two email addresses must match.');
      } else {
        // input is valid -- reset the error message
        input.setCustomValidity('');
      }
    }
    </script>

Answer 1

将oninput更改为total.value = (parseInt(nights.value) * parseInt(rmtp.value)) + ((parseInt(guests.value)) * 10)。

并非所有浏览器都支持.valueAsNumber。在此处查看浏览器支持表大约一半的页面：http://html5doctor.com/the-output-element/。该页面通常提供了oninput和output元素的一些很好的示例。

为HTML5表单从下拉列表中分配数值

1 个答案: