For the JS experts: How to prevent double form submission if form submits on change and the enter key is pressed


#1

Hi there,

this is more JS than ATK related:
I implemented a nice autosave, each input has an onChange handler that submits the form. This works perfectly for textareas and dropdowns, text inputs have one flaw:
When pressing the enter key in a text input, the form is submitted, too. Now this causes a double form submission as the enter key submits and the inChange handler submits. Any Idea how to stop this the smart way?

Thanks
Philipp


#2

can you show how you are doing on-change submit?


#3

Hi,

I have 2 versions:

  1. One Event handler for the whole form which delegates to the inputs

         $this->mainForm->on('change', 'input,textarea', $this->mainForm->js()->form('submit'));
    
  2. One for each input as I want to set some option to dropdowns anyway (I thought of using some other event handler, hence the double code for on(‘change’):

         foreach($this->mainForm->fields as $field) {
             $field->id = $field->short_name;
             $field->addClass('eoo-notification-border');
             if((new \ReflectionClass($field))->getShortName() == 'DropDown') {
                 $field->setDropdownOption('selectOnKeydown', false);
                 $field->on('change', $this->mainForm->js()->form('submit'));
             }
             else {
                 $field->on('change', $this->mainForm->js()->form('submit'));
             }
         }

#4

I thought of writing an own JS which does the following:

  1. serialize the value of each input and add it as data-serialized attribute (have that already to determine if a form field really changed).

  2. Add on focusOut event handler that checks if now the serialized value matches the previously one, if not (a change occured) submit form

  3. add onKeypress event handler that checks if enter key was pressed. If yes, submit if a change in input value (compare serialized values again) occured.

Thats the best Idea I came up so far.


#5

Just read that the submission on enter keypress is caused by Semantic UI… will try to investigate there…


#6

Hi there,

the solution I found was to add a focusout eventhandler. It checks if the value of the input is the same as the initial one, if not it submits the form:

$.fn.submitInputOnChange = function() {
   $('#eooMainForm input')
    .each(function() {
        $(this).data('serialized', $(this).serialize());
        $(this).on('focusout', function() {
            if($(this).serialize() != $(this).data('serialized')) {
                $("#eooMainForm").form('submit');
            }
        });
...

#7

Glad it’s solved. Just to add another trick, not sure if it’s helpful - :slight_smile:

onKeyUp

  • stop previous timer (if any)
  • add class on the form (modified/dirty)
  • start new timer
  • enable save button

When timer arrives

  • disable save button
  • submit form

this all can be done quite easily inside a chunk of custom JS code, which can be re-usable across all your forms.


#8

Hi there,

part of this is already implemented, above JS code is only an exerpt from the whole function.

What I do not have is the timer. The idea is that it waits for 1 second (or any other time) before submitting so it does not always submit? At the moment I only submit on focusout/enter key, ui runs quite smooth like that. But I will think about the timer, nice idea.