Simulate button click on key down: enter

Wappler General Need Help
, ,
1

Hi community,

I cannot figure out how to prevent default enter key behaviour and simulate button click? I’m trying to mix wappler native functions + custom javascript as I don’t know how to achieve it but still no luck, the issue probably is that it’s a datastore update involved in this. I’m trying to use this with no luck

dmx-on:keydown.enter="run(\[{runJS:{outputType:'text',function:\`$event.preventDefault()\`}},{wait:{delay:200}},{run:{outputType:'text',action:\`serverconnectform1.submit()\`}}\])">

<script>
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && e.target.id === 'text_social_media_link') {
          setTimeout(() => e.target.blur(), 200); // flush last keystroke before submit
        }
});
</script>

a working button code that I’m trying to simulate is this simple:

<input type="hidden" name="social_media_id" dmx-bind:value="social_media_id">
<input type="hidden" name="link" dmx-bind:value="link">
<!-- Save button (right) -->
<button form="serverconnectform1" class="btn rounded-pill d-flex align-items-center gap-1 btn-sm btn-primary" dmx-on:click="run(\[{wait:{delay:200}},{run:{outputType:'text',action:\`serverconnectform1.submit()\`}}\])" id="btn_save_social_media">
     <i class="fas fa-check"></i>
     Išsaugoti
</button>

any available methods to simulate a button click ?

2

If you want the enter key to become a button click, to submit the form, the best way is to make sure you have a submit button in the form. You'll use a static Wappler event to call your Javascript.

You'll want to catch the keydown event using Wappler static event:

onkeydown="callFormButtonClick()"

In your Javascript function, you'll use the .click() event of the form's submit button:

document.getElementById('btnSubmit').click();

Don't try to submit the form from within Javascript. Always use the .click() event of the submit button so that Wappler will handle the form submission and allow you to also use its own dynamic events like dmx-on:success, etc.

3

This is the official method.