Pressing enter in a text box submits the form

Hi Max,

I have an edit form with several text boxes as well as drop-downs and a submit button.  I noticed by accident that when I press enter in a text box, it submits the form.

Is there an option to turn off the enter behaviour so that the only way to submit the form is to click the submit button?

The edit form has data loaded into the boxes and drop-downs ready for the user to make changes.  As the form is an edit screen, I'd rather that Enter takes the user to the next input element (if Enter has to do something).

If the user presses enter in a text box without having changed any data in the form, it reaches the "On Save Failed" clause (because 0 rows were affected by the update), so this is also undesirable.  I wonder if there's a way to disable the Submit button untl some data is actually changed?

Thanks!

I found I can add this Javascript to disable the enter key.  Add to each page.

document.addEventListener('DOMContentLoaded', () => {

  const form = document.getElementById('myForm');

  form.addEventListener('keydown', (e) => {

    // Allow Enter inside textarea or any element with multiline behavior

    if (e.target.tagName === 'TEXTAREA') return;

    // If Enter is pressed elsewhere, block form submission

    if (e.key === 'Enter') {

      e.preventDefault();

    }

  });

});

I also found a way to disable the save button until data has been changed.

Change myForm to the name of your form, and change saveBtn to the ID of your save button.

document.addEventListener('DOMContentLoaded', () => {

  const form = document.getElementById('myForm');  const saveBtn = document.getElementById('saveBtn');

  saveBtn.disabled = true;

  const initialData = new FormData(form);

  const initialState = Object.fromEntries(initialData.entries());

  function checkForChanges() {

    const currentData = new FormData(form);

    const currentState = Object.fromEntries(currentData.entries());

    const changed = Object.keys(initialState).some(

      key => initialState[key] !== currentState[key]

    );

    saveBtn.disabled = !changed;

  }

  form.addEventListener('input', checkForChanges);

  form.addEventListener('change', checkForChanges);

});

I think disabling the Submit button till some data has changed is the best solution here as the default for forms is to submit when the Enter button is pressed.

Thank you for posting the solutions 🙂