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

Несколько вопросов здесь:

• Вам необходимо прослушать событие Form .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>

Answer 2

Чтобы отправить значение элемента DOM "select", вы должны установить атрибут "name", а затем кнопка "submit" включит его при нажатии на него

<form class = "decisions">

    <select class="states js-query-states" name="state">
        <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 3

Это должно быть event.preventDefault () как Barmar . Также хорошо иметь отправить событие для формы.