Handling form submittion

Question

I have a form within modal and I don't seem to be able to catch the submit event.

Let's say we have a html page defined as (for the sake of simplicity leaving out any templates defined by me)

<body>
    <button class="ui button">Open modal</button>
    <div class="ui small modal">
        <div class="header">
            Enter your email
        </div>
        <div class="content">
            <form class="ui form">
                <div class="field">
                    <div class="ui left icon input">
                        <i class="at icon"></i>
                        <input type="email" name="email" placeholder="Email">
                    </div>
                </div>
                <div class="ui error message">
                </div>
            </form>
        </div>
        <div class="actions">
            <div class="ui negative button">
                Cancel
            </div>
            <div class="ui positive primary loadable button">
                Reset password
            </div>
        </div>
    </div>
</body>

and registred template events

Template.body.events({
    'click button': function () {
        $('.modal').modal('show');
    },
    'submit form': function () {
        alert('called');
    }
});

When I submit the form it doesn't get cought by the handler. Why and what's the best approach?

I got something similar working by defining the inner content of modal as template, but it makes things much harder. Is there any other way?

EDIT: Here's meteorpad that demostrates the issue

How do you submit the form if there is no submit button in the form? — MatiK, Feb 05 '16 at 20:50
this may be too obvious but are you `event.preventDefault`ing the form submit to keep the page from reloading? — Daniel Beck, Feb 05 '16 at 21:58
@pikausp It looks it is a problem with semantic-ui. If you remove `modal` class from div all events are working properly. — MatiK, Feb 05 '16 at 22:13
Adding events i onRendered method with jquery works in your case: http://meteorpad.com/pad/iMdbkBv5tiZBXx62u/Copy%20of%20Leaderboard — MatiK, Feb 05 '16 at 22:30
Curious if there's a way around it. It makes the code much less readable and consistent, thanks for the workaround. @DanielBeck the problem is not the default action, the problem is that the handler never gets executed — pikausp, Feb 05 '16 at 22:37
Ah, sorry, I was on the wrong track, wondering if you weren't seeing the event because the page was busy being reloaded. My bad — Daniel Beck, Feb 05 '16 at 22:49
Alert is blocking function, the page wouldn't reload until confirmed — pikausp, Feb 05 '16 at 22:57

score 0 · Answer 1 · answered Feb 05 '16 at 22:49

0

The reason behind this behavior is that modal is detached from the DOM. This behavior can be overriden by setting detachable: false

Here's working meteorpad

Credits

answered Feb 05 '16 at 22:49

pikausp

1,142
11
31

Handling form submittion

1 Answers1