Uncaught RangeError: Maximum call stack size exceeded Meteor.js form

Question

I have a form that I am submitting (and using a reactiveVar to change the output in the view on submit). Whenever I submit successfully I get this ominous error:

Uncaught RangeError: Maximum call stack size exceeded
isArguments @ es5-shim.js:888
keys @ es5-shim.js:951
_.each._.forEach @ underscore.js:111
EJSON.clone @ ejson.js:500
(anonymous function) @ ejson.js:501
_.each._.forEach @ underscore.js:113
EJSON.clone @ ejson.js:500
(anonymous function) @ ejson.js:501
_.each._.forEach @ underscore.js:113
EJSON.clone @ ejson.js:500

I have two event handlers in someview.js:

Template.inquiry.events({
  'click .submit': function(event, template) {
    var $form = template.$('#request-form');

    if ($form.valid()) {
          template.showForm.set( false );

          Meteor.setTimeout( function() {
            template.showForm.set( true );
          }, 10000); // Reset after 10 seconds.
    }
  },
});

Template.inquiry.events({
    'submit form': function(event) {
        event.preventDefault();
        var name = event.target.name.value;
        var email = event.target.email.value;

        UserList.insert({
            name: name,
            email: email
        });
    }
});

and a helper to grab the initial reactiveVar (showForm):

Template.inquiry.helpers({

  //toggles 'thank you' on inquiry template
  showForm: function () {
    return Template.instance().showForm.get();
  },
});

Why am I getting this error?

Answer 1

You should not put 2 events triggered at the same time. The moment the button is clicked, the form is submitted as well (I believe the timeout is making the recursive calling between the submit and the click), thus giving you the unexpected error. You need to merge those 2 together (and this is natural)

Template.inquiry.events({
    'submit form': function(event, template) {

    event.preventDefault();
    var $form = template.$('#request-form');

    if ($form.valid()) {
        var name = event.target.name.value;
        var email = event.target.email.value;

        UserList.insert({
            name: name,
            email: email
        });

        template.showForm.set( false );

        Meteor.setTimeout( function() {
            template.showForm.set( true );
        }, 10000); // Reset after 10 seconds.
    }
}

});

and remove the click event