[SOLVED] 'submit #form-submit' ... not calling my function in .js

help
1

Hey All,

I’m pretty new with Meteor, but I’ve been playing around with it a lot lately and I’m running into an issue here that’s driving me mad. All of the documentation and everything that I’m reading shows this is the correct way to do this. I have a form to reset a password:

<template name="ForgotPassword">
	<div class="text-right" id="forgotPassForm">
		<form id="forgot-form-submit">
	      <input id="forgotPasswordEmail" class="form-control forgot-submit" type="text" name="email" placeholder="Email Address">
	      <br>
	      <input class="btn btn-custom" type="submit" value="Send">
	    </form>
	</div>
</template>

Then in my .js i have:

Template.ForgotPassword.events({
  'submit #forgot-form-submit' : function(e, t) {
    console.log("form submitted");
  },...

The method doesn’t execute for whatever reason, but in my browser, i do see:
http://localhost:3000/?email=info%40testing.com

I’m hoping there is just something very obvious that I’m missing here, can someone lend a hand?

2

where exactly you have something with id="form-submit"
I cant see it

3

Sorry, i just realized I pasted that wrong, but it’s the form tag:
<form id="forgot-form-submit">

and

'submit #forgot-form-submit' : function(e, t) {

4

input with type=“submit” is generating submit event, not form… as long as I know

5

So if i change it to something else:

<button class="btn btn-custom" value="Send">Send</button>

I still don’t call that function in my js

6

The one thing I was able to do was modify the method name to:

'click .btn-custom' : function ...

and that was able to trigger the method, however, I wasn’t able to get the data from my form field that way.

7

form know only 1 way how to submit. If you preventDefault() that, you need to get these values yourself

or use autoform as everybody else :smiley:

8

Hmm, autoform, I’ll take a look at that. Although from what I’ve been seeing and what I understand, this is the correct way to do this right?

9

So I figured out a solution that works for me. I added the following:

'click form#forgot-form-submit button[type="submit"]'

This triggers the method, but the data that I need isn’t readily available (since the scope is actually on the button). So then I just referenced the id of the <input> field and got the email address that way. I’m certain there is a more simple way of doing this but this is what I came up with.

e.preventDefault();
var emailInput = $('#forgotPasswordEmail');
var forgotPasswordFormInput = emailInput[0].value;
var email = $.trim(forgotPasswordFormInput).toLowerCase();
10

Resurrecting the dead… I had this issue DRIVING ME NUTS.

Turns out I had an event.preventDefault() way at the top of my code, event was not defined. I removed the offending code.

It was cascading all the way down as a general javascript error and screwing up event data!

Problem: You have a bug in your code.

Solution: Go over EVERY event and double check your parameters meet the event scope!

image