-2

I have an Elementor form with multiple fields. I want the form to be automatically submitted as soon as there is no focus on any of the fields like clicking somewhere.

My solution for a form with a single field looks like this:

$( '#form-field' ).blur( function() {
    $( '#form' ).submit();
});

How can I extend this to all fields of the form #form?

Thanks for any help!

EDIT:

Thanks for the answers.

As far as favilian's answer goes, the if statement would be interesting. So if the user leaves one form field, there has to be a check to see if we are not in any other field of the form. Only if not in any other field, submit the form. The form looks (simplified) like this:

<form method="post" id="form">
    <input type="text" name="form_fields[field1]" id="form-field-field1">
    <input type="text" name="form_fields[field2]" id="form-field-field2">
    <input type="text" name="form_fields[field3]" id="form-field-field3">
    <button type="submit">Save</button>
</form>

So, for example, case one:

The user clicks in the first field (#form-field-field1) and leaves the form, the form should be submitted, because there is no focus on field two (#form-field-field2) and three (#form-field-field3).

Case two:

The User clicks again in the first field and continues to the second field (via click or tab). This should not trigger the submit since another field of the form is foccused/active. After that, the user leaves the form by clicking. No other form field is active. Now the form should be submitted.

How can the if statement look like that checks if not another field is focussed?

bndkt
  • 13
  • 4

2 Answers2

0

Hum you can listen for every focusout with

document.addEventListener('focusout', function

And you can tell the currenct activeElement with document.activeElement

So maybe something like

document.addEventListener('focusout', function (e) {
    const active = document.activeElement;
    if ( /active is not an input of form, depends on your html syntax / ) {
       //Submit the form
    }
});
farvilain
  • 2,552
  • 2
  • 13
  • 24
  • Have you tried something like the following: [https://stackoverflow.com/questions/35109582/how-to-submit-form-through-jquery-onblur](https://stackoverflow.com/questions/35109582/how-to-submit-form-through-jquery-onblur)? – Craig Stroman Nov 04 '20 at 21:43
  • Could even be better ! But he specified that he wants no focus `on any` input. Difficult to know if it is the real goal and if a miss communication. – farvilain Nov 04 '20 at 21:49
  • Then maybe they could try the following [https://codesandbox.io/s/trusting-leakey-6msgt?fontsize=14&hidenavigation=1&theme=dark](https://codesandbox.io/s/trusting-leakey-6msgt?fontsize=14&hidenavigation=1&theme=dark) instead. – Craig Stroman Nov 04 '20 at 22:01
  • Thanks for your answers. I extended my question. – bndkt Nov 05 '20 at 17:17
0

Okay, with the help of a friend, I found the solution. There seems to be a tiny moment between the focusout and the new focus what makes the timeout necessary.

$( '#form :input' ).blur( function() {
    setTimeout( function() {
        if ( [...document.querySelectorAll( ':focus' )].length == 0 ) {
            $( '#form' ).submit();
        }
    }, 200 );
});
bndkt
  • 13
  • 4