Submit form on keyup/keydown

[gabrielstuff]

Hi!
I'm trying to figure out how to send the form using keydown or keyup. Does not look to be implemented.

Thanks,

G

[lionel-bijaoui]

Can you provide more details ?

[gabrielstuff]

hello @lionel-bijaoui,
The idea is to be able to send the form on enter when keycode 13 is pressed: keyDown
On this simple codepen you can type and press "enter". By default the browser will submit the form relative to the fieldset you are in.

https://codepen.io/gabrielstuff/pen/eRZxBz

Thanks !

[lionel-bijaoui]

I'm still not sure I get where the problem is.
When the user fill the form, the model is updated in real-time, so you can listen to any even you want and send the data however you want.
For example:

document.addEventListener('keypress', function (e) {
    var key = e.which || e.keyCode;
    if (key === 13) { // 13 is enter
      // send model data to server
    }
});

If what you want is a button, you can use submit.
https://icebob.gitbooks.io/vueformgenerator/fields/submit.html

[gabrielstuff]

Ok, maybe I'm not clear enough. What you propose is somekind of tape on top on something that should "natively" be supported. A form + a submit button in the browser convention means when you type enter, the form is submited.
So that is why I wondering how to do it natively without relying on document.addEventListener or something else.
Thanks !

[lionel-bijaoui]

Well, sorry if this is a "hack" for you...
document.addEventListener is a simple solution to emulate the native way a <form> work.
If you have a better solution in mind, you are free to do a PR and enhance this plugin for the good of the community.

[gabrielstuff]

Yes ! What do you think about adding it natively to the plugin and thus support by default the listening of the keycode 13 on keyup ? I could surely PR, if you are ok with this feature.

[lionel-bijaoui]

If you do that, it will have to be something deactivated by default and set with an option. Most usage of this plugin don't need a redirection or to react to enter and adding it by default would break all current implementations.
I can't guaranty that your PR will be accepted, since validation of feature depends on @icebob , the creator of this plugin.

I'm very curious on what you mean by "natively" and how you are going to implement this without addEventListener, but I will take a look at your PR with a lot of interest.

Good luck and thank you for your participation !
PS: don't forget to mention this issue in the PR ! thx

[gabrielstuff]

I'm going to use addEventListener, I'm just going to make it at the module level and not for the user. If I use template engine like vue, is to be faster and cleaner than native HTML markup... Adding addEventlistener on top of form generation is kind of rewriting again and again the browser logic.

…

On 12 Jun 2017, 15:23 +0200, lionel-bijaoui ***@***.***>, wrote: If you do that, it will have to be something deactivated by default and set with an option. Most usage of this plugin don't need a redirection or to react to enter and adding it by default would break all current implementations. I can't guaranty that your PR will be accepted, since validation of feature depends on @icebob , the creator of this plugin. I'm very curious on what you mean by "natively" and how you are going to implement this without addEventListener, but I will take a look at your PR with a lot of interest. Good luck and thank you for your participation ! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[lionel-bijaoui]

So you are going to put document.addEventListener in the mount hook of the module ? I don't see why you think it's cleaner but go on, it's a useful functionality anyway.
I can see a need for more classic behavior when using VFG, especially with beginners. The more accessible we make VFG, the better 👍
Also, it will be more inline with browser implementation and good practice (kinda like #74 ).
Keep me posted, and gook luck !