3

I was just playing around a bit with Meteor.js when I ran into this strange issue, I have a form with two textfields, but somehow my event is not listening to the submit. When I remove one textfield, everything works fine ...

Below is my template for the form:

<template name="new_timer">
    <div class="timer timer--empty">
        <form id="new_timer">
            <input type="text" name="timer__name" class="timer__name" placeholder="Timer name">
            <input type="text" name="timer__description" class="timer__description" placeholder="Timer description">
        </form>
    </div>
</template>

And on the client side:

Template.new_timer.events({
    'submit form': function(e) {
        console.log('new timer');

        e.preventDefault();
    }
})

This doens't seem to work, however when I change my template to the following, it works

<template name="new_timer">
    <div class="timer timer--empty">
        <form id="new_timer">
            <input type="text" name="timer__name" class="timer__name" placeholder="Timer name">
        </form>
    </div>
</template>

Am I just overlooking something very basic here?

4
  • How do you submit the form?
    – Peppe L-G
    Jan 19, 2014 at 15:29
  • @PeppeL-G I was hoping the submit would just trigger when pressing enter. (Like how you normally submit it)
    – woutr_be
    Jan 19, 2014 at 15:43
  • 2
    I'm not sure how it (should) works now days, but in the past you had to have a submit-button in the form in order for the "submit by pressing enter in a textfield" functionality to work.
    – Peppe L-G
    Jan 19, 2014 at 15:52
  • Good point, if I add a submit butting it does work, guess I'll just hide it
    – woutr_be
    Jan 19, 2014 at 16:00

2 Answers 2

1

You might add an event like

'keyup form': function(e) {
    if (e.keyCode === 13) {
        // do something
    }
}

Basically using a submit in a single page application is not adapted. In this kind of application everything is event based, you never reload a page so you never really 'submit' a form.

The 'form' tag becomes useless, most of developers (including me) are keeping it by habit but it is not required.

It is a bit late for an answer, I hope it can help somebody else!

3
  • The form element is not useless, for example it's great for posting the data (listen for the submit event, and not caring about if a send button has been pushed or if the enter key enter been hit in a text field), like in his problem.
    – Peppe L-G
    Jan 29, 2014 at 18:54
  • If you listen to the submit event in a single page app, you are going to prevent the default process e.preventDefault() So I do not think this event is really useful because we prevent its default behaviour.
    – Ageo
    Jan 29, 2014 at 19:02
  • In any case, your comment is right. It might be easier and probably more logic to do so.
    – Ageo
    Jan 29, 2014 at 19:07
0

I had similar problem, submit event does not work with more inputs without this:

<input type="submit" hidden="hidden">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.