0

An example url is located here: [link removed]

The code I have in place is simply this:

$('.jump-submit').on('change', function(e) {
    var $this = $(this);
    $this.closest('form').submit();
});

But if you click on the select box to choose a state, before you can choose a state, the form seems to be submitted anyways as if it's being triggered by an click event, when I'm using the change event.

Not very good at debugging this in the console, but have "Preserve Log enabled and also put a checkbox in "Load -> unload" in the Sources tab of Chrome, but stepping through it with "Pause on Exceptions" points to DOM Exception Failed to execute 'queryselectorall' but than researching this says to not use "Pause on Exceptions" in chrome and that this is not a jQuery bug.

How to debug this properly and determine what is causing the page to refresh before the change event should be happening on this Select box?

Solomon Closson
  • 6,111
  • 14
  • 73
  • 115

1 Answers1

3

You have a class called submit-form on the dropdown and you have the following click event causing the behavior:

...).on('click', '.submit-form', function(event) {
    event.preventDefault();

    $(this).closest('form').submit();
});

It's line 175 of app.js (after prettifying, might differ in the source)

  • But wait, `.jump-submit` is not the same as `.submit-form`. They are 2 different elements. Does jQuery not understand this? – Solomon Closson Jun 30 '17 at 18:46
  • 1
    `.jump-submit` is a child of `.submit-form`. You have a `change` event for the dropdown and a `click` event for the form itself. They both submit the form. I don't see why you would ever want to submit the form anytime you click on it. My assumption is you meant to add the `.submit-form` to a button and not the form itself? –  Jun 30 '17 at 18:50
  • Wait, I see what's happening. .submit-form is the parent, and therefore getting the click event fired. Thanks :) – Solomon Closson Jun 30 '17 at 18:50
  • 1
    Oh yes, I misunderstood. Clicking on the dropdown also fires the click event of the parent due to event bubbling. –  Jun 30 '17 at 18:51
  • Hmm... not sure why but `event.preventDefault();` was also needed for a JQuery multi-select option element in a form in order for the page to not refresh when I programatically selected all options. – ViaTech Jun 05 '19 at 12:42
  • @THEJOATMON hi there, the same thing happening to me, whatever input type i click on, it trigger automatic page reload & i tried event.preventDefault(); but that's not working. pls help. – Nayana_Das Feb 08 '23 at 11:42