javascript - Html/javascript - 下拉选择不适用于提交按钮

Question

我正在尝试使用下拉菜单和输入框，然后同时提交两者。出于某种原因，它不是

function watchForm() {
  $('.decisions').on('click', function(event) {
    event.preventDefault;
    const state = $('.js-query-states').val();
    console.log(state)
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="decisions">

  <select class="states js-query-states">
    <option value="">Choose a state</option>
    <option value="AL">Alabama</option>
  </select><br><br>
  <label for="number">How many</label>
  <input type="input" name="number" id="number" value=5>
  <input type="submit" value="Submit">
</form>

Answer 1

这里有几个问题:

• 你需要听表格 .submit()事件而不是 click()。
• 此外，您在 event.preventDefault 之后缺少括号 ()。
• 此外，事件处理程序似乎位于 watchForm() 函数内，但并未在任何地方调用。因此，您可以删除该函数并直接添加 .submit() 事件处理程序。

$('.decisions').submit(function(event) {
  event.preventDefault();
  const state = $('.js-query-states').val();
  console.log(state)

  const number = $('#number').val();
  console.log(number)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="decisions">
  <select class="states js-query-states" required>
    <option value="">Choose a state</option>
    <option value="AL">Alabama</option>
  </select><br><br>
  <label for="number">How many</label>
  <input type="input" name="number" id="number" value=5>
  <input type="submit" value="Submit">
</form>