handle onsubmit for forms

edited March 2012 in Enyo 2
Hello

I'm trying to wrap the form in a kind. This is the fragment code:
enyo.kind({
    name: 'views.Form',
    kind: enyo.Control,
    tag: 'form',
    classes: 'form-horizontal',

    onsubmit: function() {
        window.alert('123');
        return false;
    },
    create: function() {
        this.inherited(arguments);
        this.$.input2.addClass('warning');
        this.$.input3.addClass('error');
    }
});
I tried to set the 'onsubmit' attribute of the form, but unfortunately i couldn't call the onsubmit method. Could you please assst me to solve this problem?

Comments

  • edited March 2012
    you need to add a handlers hash that points to your onsubmit method:

    handlers: { onsubmit: 'onsubmit' }

    add that below your classes property.
  • edited March 2012
    I tried this as well but it didn't work. I think i must add:
    attributes: {
            onsumbit: enyo.bubbler
        }
    and then somehow to handle the events. I'm new into that and I'm just figuring out how this work.

    As far as i know the onsubmit should be set on the form as attribute and i cannot see how suggested solution will work as the kind is not rendering this
  • To get the Enyo dispatcher to listen for submit events, you'll need to call
    enyo.dispatcher.listen(document, "submit");
    This will add a document-level listener for bubbled-up onsubmit events. The dispatcher will then send the event back down to its original target and handle bubbling it up through the Enyo control hierarchy.
  • thank you for the tip. this enabled me to be notified when i submit the form. the sample looks like:
    enyo.kind({
        name: 'views.Form',
        kind: enyo.Control,
        tag: 'form',
        classes: 'form-horizontal',
    
        handlers : {
            onsubmit: 'submitMe'
        },
    
        create: function() {
            this.inherited(arguments);
            enyo.dispatcher.listen(document, "submit");
            this.$.input2.addClass('warning');
            this.$.input3.addClass('error');
        },
        components: [
            { tag: 'fieldset',
                components: [
                    { name: 'legend', tag: 'legend', content: 'Global currencies'},
                    {name: 'input1', kind: views.LabeledInput, text: 'USD', label: 'USA currency', help: 'some help provided'},
                    {name: 'input2', kind: views.LabeledInput, text: 'EUR', label: 'Europe currency', help: 'us help provided'},
                    {name: 'input3', kind: views.LabeledInput, text: 'GBP', label: 'UK currency'},
                    {name: 'actions', kind: views.ActionBar}
                ]
            }
        ],
        isValid : function () {
           return false;
        }   ,
        submitMe: function (inSender, inEvent) {
            if (!this.isValid()) {
                window.alert('not valid ');
                inEvent.preventDefault();
            }
            return true;
        }
    });

    another problem:

    is there a way of routing events? For example i have 2 forms on the screen and i would like to submit onli the second one. is this possible obly by checking if the inSender is equals to this?
  • Yeah, you need to look at who sent the event to figure out what to trigger.

    Also, I suggest moving the enyo.dispatcher.listen call out of the create method and just stick it in your code outside of a kind definition. Calling it multiple times will end up with duplicate event listeners being registered.
  • edited March 2012
    probably I found the most optimal solution for this problem,
    enyo.kind({
    This form relay on a custom component created by me, so it was a source of problems as well. The lesson: if you want to take care of element id generation, do it properly as it may screw your event model.


    Still not have full understanding of event model, but I like what I see at the moment.
Sign In or Register to comment.