Html / javascript - Dropdown selection not working with Submit button

Question

I am trying to using a dropdown and an input box and then submit both. For some reason, it is not

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>

What exactly is not working? Why are you listening clicks on the form? — Teemu
– Teemu, Commented Apr 28, 2020 at 5:30
You're missing the parentheses after event.preventDefault, so you're not calling the function. — Barmar
– Barmar, Commented Apr 28, 2020 at 5:32

palaѕн · Accepted Answer · 2020-04-28 05:44:44Z

1

Few issues here:

You need to listen to the Form .submit() event instead of click().
Also, you are missing the parentheses () after event.preventDefault.
Also, it seems that the event handler is inside the watchForm() function, but it is not called anywhere. So, you can remove that function and add the .submit() event handler directly.

$('.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>

answered Apr 28, 2020 at 5:44

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jfjmartin Over a year ago

thank you. I have watchForm() called but just didn't include it in the code I sent. looks like the () after the event.prevent Default() was the main issue but thanks for all the pointers

Nagaraj . · Accepted Answer · 2020-04-28 05:43:14Z

0

It should be event.preventDefault() like Barmar said. Also it's good to have submit event for the form.

answered Apr 28, 2020 at 5:43

Nagaraj .

4551 gold badge6 silver badges14 bronze badges

Comments

Cristian Richard · Accepted Answer · 2020-04-28 05:51:40Z

0

To submit the value of the "select" DOM element you must set the "name" attribute and then, "submit" button will include it when you clicked on it

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

answered Apr 28, 2020 at 5:51

Cristian Richard

265 bronze badges

Collectives™ on Stack Overflow

Html / javascript - Dropdown selection not working with Submit button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related