How to submit a form using CTRL+S

Wappler General Need Help
1

I have a form I want to submit when the user presses CTRL+S.

In the submit button of the form I have the dmx-on:keydown.ctrl.keys line, but I can’t seem to make it activate… am I missing something about how this works, or something that could stop it activating?

<form novalidate="" id="f_message_template"...>
...
   <button class=" button_save" id="b_save_message_template" type="submit" dmx-on:keydown.ctrl.keys="f_message_template.submit()">{{apptext.value.400}}</button>
...
</form>

Thanks in anticipation!
Antony.

2

Using dmx-on:keydown.ctrl.keys="f_message_template.submit()" makes no sense in the button like that.
What do you want to achieve exactly? To submit the server connect form on pressing Ctrl+s on this page?

3

Thanks Teodor... yes, this is what I want!

4

You need to use keys as a trigger as in Key and the letter “s”. trythis syntax:

<button id="btn1" class="btn" dmx-on:keypress.keys="form1.submit()" type="submit">Button</button>
5

First of all you need to bind this on the page body (App root) not on the form or the button as it makes no sense to use it there, and then you have to prevent the default browser ctrl+s behavior, which is to save your html page locally on your computer.
So select App, add a dynamic event on key down, and select modifiers - Ctrl, Key S and Prevent:

Screenshot 2022-04-12 at 13.40.09
Screenshot 2022-04-12 at 13.40.09441×864 50.3 KB

Btw - it’s explained in the docs how to add shortcut keys on your pages and what is the logic: https://docs.wappler.io/t/using-shortcut-keys-for-dynamic-events/4161

1 Like
6

I was close :grinning:

2 Likes
7

@teodor, on a similar topic, is there a way to disable the back button and back arrow key while my app is running?

8

Brilliant @teodor, that is working great! :slight_smile: Thank you so much.

It has raised another question though. I really wanted this function when a user has gone into full screen mode and wants to make intermediate saves while editing a long document.

The crtl-S is now doing the .submit() function, but it is also closing the full screen window. Do you know how I can prevent this happening? I've had a quick google of this for summernote but can't see anything obvious to try!

9

Is your visitor using a fullscreen browser dialog, or are you referring to something else?

10

They are using the browser as normal with the tabs along the top, but hitting the full screen button in Summernote… the one on the right here:

dm5_editor_buttons

So that the editor is full screen:

XX_full_screen
XX_full_screen1919×578 19.1 KB

But when in this mode, if the user does crtl-S, then their edits are saved but the full screen mode is exited. I really want them just to stay in full screen mode the whole time!

11

Doesn’t happen in my test case, the editor stays in fullscreen. Are there any events running on form submit?

12

Thanks @teodor… yes, there are several running that need to run - maybe they are causing it to happen.

I’ll run with how it is for now.

Thanks for all your help! :slight_smile: