Google closure - Triggering form submit

Question

I have a form with a closure ui button:

<form id="login-form">
    <div>
        <input type="text" name="email" />
        <input type="password" name="password" />
        <div id="submit-login" class="goog-css3-button">Sign in</div>
    </div>
</form>

I made my button submit my form:

var myButton = goog.ui.decorate(goog.dom.getElement("submit-login"));
myButton.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
goog.events.listen(myButton, goog.ui.Component.EventType.ACTION, function(e) {
    goog.dom.getElement("login-form").submit();
});

Now, I have the 2 followings issues:

• The form is not submitted when I push "Enter" in one of the fields
• The event goog.events.EventType.SUBMIT is not triggered on the form, so my eventual listeners wont be executed

How can I fix this?

Answer 1

The hack I found is to:

• append an hidden button tag
• trigger a click on the hidden button on the event ACTION

var hiddenSubmit = goog.dom.createDom("button",{ type : "submit", "style" : "visibility: hidden; position: absolute; z-index: -10000"});
goog.dom.appendChild(goog.dom.getElement("submit-login"), hiddenSubmit);
goog.events.listen(myButton, goog.ui.Component.EventType.ACTION, function(e) {
    hiddenSubmit.click();
});

EDIT : As Safari and Chrome does not trigger events on hidden with "Display: none" elements, we must hide the button with other css rules