preventDefault runs only once

JavaScript
#1

Greetings, 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 pop-up menu
event.preventDefault(); //suppresses browser from going to a linked page (that isnt reall linked) so this page can be updated.
$(’#js-error-message’).empty();
let searchState = $(’#js-stateMenuForm :selected’).val(); //invoked state code value stored in searchState
getParks(searchState); //calls getParks and sends the state code
});
}

#2

Hello and Welcome!

Which browser are You using? Have You tried different ones? Are there any errors displayed on the browser console?

#3

Hey,
Try putting your event.preventDefault(); at the end of your function?
Let us know if you find out what the issue was or if you are still stuck :slight_smile:

#4

I’m testing locally on my own iMac. Results are consistent on Chrome, Firefox, Safari, Opera, and Firefox developer edition. No errors.

#5

Tried your suggestion.
Still reRendering.

#6

Hmm, try using event.preventDefault(); AND event.stopPropogation();?
OR have you tried returning false at the end of the function instead of the e.preventdefault?

This SO might help with regards to why, (if it fixes).

#7

I’ve tried both of those. stopPropagation still reloads page.
retrun false stops the submit button from doing anything.

1 Like
#8

Just to make sure, before I am all out of ideas, you used preventDefault and then stopPropagation together?

Sorry, hopefully someone else knows this magic.

#9

Yep, Both together, AND separately.

#10

Unfortunately I’m still a FCC noob, so I can’t link to my code at repl.it yet.

#11

If you open some topics and do the guide at the start you unlock the basic member level :slight_smile:

#12

Have you tried using codepen.io to post your code?

If so, just post your codepen profile name and the name of the pen.

#13

I use repl.it but can use codepen. The problem is that I cant post the link to repl.it until I get some badges here. Not sure how long that will take.

#14

Without seeing how your are calling your watchForm, it is difficult to help. Seeing the full code would make it clearer.

#15

I suppose you could also post your repl.it profile name and session name and we could find it that way also.

#16

I found your project.

#17

gadgetwerx/ParkWeatherAPI-Test-0

#18

@gadgetwerx You have two problems.

  1. You need to call watchForm again inside your displayResults function right after you call stateMenu('nav');

  2. You need to empty the div with id=“parks” after the same call to watchForm inside your displayResults function. Otherwise, the results keep getting appended to the end of the section instead of being at the top.

#19

That didn’t work. On choosing a state, and hitting Go, the div just emptied and left an empty field.

#20

I modified your original repl session and seems to work for me unless I have misunderstood something.

1 Like