preventDefault works only once?

Question

this trigger works correctly ONE time. If it fires again, it just refreshes my page, so I’m guessing that the preventDefault isn’t working. Am I missing something?

function watchForm() {
  $(‘form’).submit(event => { //listening for event on the form pop-up menu
    event.preventDefault(); //suppresses browser from going to a linked page.
    $(’#js-error-message’).empty();
    let searchState = $(’#js-stateMenuForm :selected’).val();
    getParks(searchState); //calls getParks function.
  });
}

Can you post a [MCVE] so we can reproduce the error and try to debug it? — CertainPerformance, Mar 09 '19 at 23:35
That code is going to throw `Uncaught SyntaxError: Invalid or unexpected token` when it hits the `‘`. — Quentin, Mar 09 '19 at 23:41
*«this trigger works correctly ONE time...»* because it's execution **fails**. Any errors in [console](https://webmasters.stackexchange.com/questions/8525/how-do-i-open-the-javascript-console-in-different-browsers)? this `’` character is the problem. Use `'` single quotes... not *curly* quotes. -- Voting to close as a typo. — Louys Patrice Bessette, Mar 09 '19 at 23:59
The curly quotes appear to have been a formatting creation of the StackOverflow entry field in my OP. They are regular single quotes in my code. Posting a sample in a minute. — gadgetwerx, Mar 10 '19 at 00:08
How and when do you call `watchForm()`? Because that function, finally, registers a submit event handler. It should be called once only. — Louys Patrice Bessette, Mar 10 '19 at 01:29

score 0 · Answer 1 · answered Mar 10 '19 at 01:12

0

Rewrite your function to this below and see if it works:

function watchForm(){
   // for every form on the page
  $('form').on('submit', function(e){
   // empty the error element
   $('#js-error-message').empty();
   var searchState = $('#js-stateMenuForm :selected').val();
    // call the function that uses the value you are looking forward to.
    getParks(searchState);
  // where e is the event
  e.preventDefault();
  return false; // force return of the form's submission
  });
}

Also, you can check this post: Jquery .on() submit event

answered Mar 10 '19 at 01:12

Nicholas Mberev

1,563
1
14
14

Same result. Works at first. Later, reloads the page. – gadgetwerx Mar 10 '19 at 02:18
Can we please take a look at the page you are having this issue on? How many forms on the page ? and can you give your form a specific id and use the id instead of generic 'form' element? Are you calling the function by clicking on a button? what is the use of the function getParks()? Are you sure the function is not detaching events from the form? – Nicholas Mberev Mar 10 '19 at 02:50
Please try this, make sure there is no input type='submit' or button with type='submit' on the form. By experience, an input or button with type submit removes the event from the form to the button or to the input itself. – Nicholas Mberev Mar 10 '19 at 02:57

preventDefault works only once?

1 Answers1