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() function 内部，但它没有在任何地方调用。 因此，您可以删除 function 并直接添加.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

应该是event.preventDefault()就像Barmar说的那样。 为表单提供提交事件也很好。

Answer 3

要提交“select” DOM 元素的值，您必须设置“name”属性，然后，“提交”按钮将在您单击它时包含它

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