Submit button seems to be registering twice with just one click. Once before reset and once after reset


#1

Just finished Chapter 10 and running into an error. When I hit the Submit button, my output in the console shows that the code runs through twice even though I only clicked the button once. The first console log shows the proper coffee order information, the second shows default (blank values) and then produces “Uncaught TypeError: fn is not a function.” Despite this, myTruck.printOrders(); still works and shows the pending order. Note that I’m passing in the binded createOrder function to fn so the error is not because I didn’t pass anything to the fn parameter in formHandler.

Here is a screenshot:

I couldn’t find the source of the error, so I downloaded the solution from the Big Nerd Ranch website to compare. I ran the solution code and the same thing happened. I get two logs in the console (one correct, one empty), and the “Uncaught TypeError” message.

At this point, I figured it wasn’t a typo in my code since the BNR solution produced the same error. I googled and found a solution suggesting to add “event.stopImmediatePropagation();” after “event.preventDefault();” in formHandler.js. It looks like it’s working properly with that fix.

Any idea why I’m getting the error when I don’t use stopImmediatePropagation()?

Here are screenshots of the working console output, main.js and formHandler.js files (had to use imgur because of new user upload restrictions): http://imgur.com/a/DNEh9


#2

Hi @imameatball, there’s a couple things possibly going on. Since your FormHandler is being called twice, but with a different fn() each time (one with, one without) makes me suspect two FormHandlers are being instantiated, or that you are calling addSubmitHandler twice.

I’d go ahead and remove stopImmediatePropagation—in general, it’s an anti-pattern and it appears to be hiding a different bug here :slight_smile:

Could you attach your HTML code? Since this forum supports markdown, you can wrap it with triple backticks.


#3

Hey nybblr. Sure thing. Here’s my html. I’m a bit further into the book now so there’s additional html.

Thanks.


#4

Your HTML looks fine. But I think I see the issue—in the console, I notice you are creating a new FormHandler, but main.js already creates one. So that means you have two FormHandlers watching the same form :slight_smile:

So if you refresh the page and don’t type anything in the console, your form should work fine?


#5

Yep, that was the issue. Lol! It also explains why I was getting the same problem with the book solution’s code. Thanks @nybblr!