AC2 Bug #8 - Button Firing Submit() Twice - Is it a Bug or Bad Code?

Wappler General Bugs
#1

I’m not sure if this is a bug or not…

But in some of the versions of dmxAppConnect.js that I’m trying for AC2, the following button causes get_contact_activity.submit() to execute once when I mouse click on it, and in other versions it fires twice and triggers an abort event on the first firing:

firex2
firex2876×51 2.17 KB

In the stable channel, it only ever executes get_contact_activity.submit() once, and no abort event ever happens.

Is the problem with my coding or with some of the versions of dmxAppConnect.js?

<button id="b_start_booking" class="btn btn-success form_button_solid" 
dmx-on:click="this_attendee_number.setValue($id);get_contact_activity.submit();scroll.goto('#a_contact_details_'+$id)" 
dmx-show="(show_booking_details==0) &amp;&amp; (form_mode.value=='event')" 
:thinking:dmx-on:keydown.enter="this_attendee_number.setValue($id);get_contact_activity.submit();scroll.goto('#a_contact_details_'+$id)" 
dmx-bind:disabled="(i_contact_email.invalid) || (i_contact_email.value.length()==0)">
Start Booking<span dmx-show="browser.viewport.width>576"></span></button>
#2

Well, you do have two submit actions tied to the button.

It’s hard to understand what you are trying to do there?

#3

One is for a mouse click, one is for pressing the enter key… Both work well in the stable channel!

#4

Actually, seems bad code to me :grimacing:

My rule of thumb, I don’t hook events in the submit button, but rather the server connect form element. I believe I hook a Dynamic Event “on form submit” (or similar), and I might (not too sure) also have a preventDefault modifier to such form so the custom steps can run instead of the default SC form behaviour

#5

I can’t recreate this behavior on click:

The only way i can make this happen is to have both on click and on keydown.enter events both submit the form and then this happens when i hit the enter button, when the button is focused.
And this happens in both beta and stable, the keydown event here looks wrongly added to me, you don’t need it. The onclick event will run fine when the button is focused and the enter is pressed.

#6

I would remove the keydown event, when the button has focus and the enter or spacebar is pressed it will trigger the click event, no need to also listen for the key (this will only cause both event handlers to run).

#7

I’ve left the code the same and it is now fixed in dmxAppConnect.js (2023-06-23 0942)… :star_struck:

#8

Just and advice here - even if now it works for you by chance, (as in my tests it always submits twice on hitting enter), now it’s the time to embrace the best practices and remove the unnecessary enter event.

1 Like