Javascript alternative for requestSubmit(). Since safari does not support it

Issue

Im trying to submit my form with Javascript. By clicking a button, or pressing enter. type="submit" would generally do all of this. The issue is that I have a "next" button that should activate a function that shows the next part of my form. So I used the following code to submit my form:

// Form:
<form name="hours" method="post" id="HoursForm" class="form">

// nextForm() goes to next part in form.
<button id="NextButton" type="button" class="..." onclick="nextForm()">Next</button>
<button id="SaveButton" type="button" class="..." onclick="document.hours.requestSubmit();">Save</button>

The save button will trigger my event listener that does the following:

hoursForm.addEventListener("submit", function() {

    // If form is submitted and valid, remove the ability to submit again.
    window.removeEventListener('keyup', submitFormWithEnter, false);
    saveButton.disabled = true;
});

When the user presses the "enter" button either the "next" or "save" functionality will be triggered.

/**
 * When pressed enter, next part of form should be shown or form should be submitted.
 * 
 * @param {Event} e 
 */
 function submitFormWithEnter(e) {
    if (e.key === 'Enter') {

        // If the next button is visible, trigger the next part. Else if the last part of the form is visible, submit the form.
        if (!nextButton.classList.contains('d-none')) {
            nextForm();
        } else if (!kmPrivateField.classList.contains('d-none')) {

            // Submit form.
            hoursForm.requestSubmit();
        }
    }
}

So this works all fine untill we use safari. As shown in MDN. Is there an alternative for this functionality?

I tried to use document.getElementById('HoursForm').dispatchEvent(new Event('submit')); in my onclick event (SaveButton). But this only triggers the submit event. And does not submit the form or validate the fields (e.g. min, max attributes are skipped).

.submit() does submit the form, but does not trigger the submit event. Making the user be able to spam the button and submit the form multiple times.

So, what I need:

• Submit form by clicking the "save" button, at all times.
• Submit form by using "enter" key, but only when at the end of the form (last page/part).
• Make user be able to only submit the form once. After button is clicked or form is saved with the "enter" button disable the submit functionality.
• Support for basicly all common browsers except IE. E.g. this is fine.

Solution

Okey I already fixed it.

I changed a couple of lines:

// Added dispatch event AND submit(); I previously only used one of them.
<button id="SaveButton" type="button" class="..." onclick="document.getElementById('HoursForm').dispatchEvent(new Event('submit')); document.hours.submit();">Opslaan</button>

In Javascript I changed .requestSubmit() to .submit(). And added dispatch event to trigger the event.

/**
 * When pressed enter, next part of form should be shown or form should be submitted. Also a little `&&` in my if statement to validate the form.
 * 
 * @param {Event} e 
 */
 function submitFormWithEnter(e) {
    if (e.key === 'Enter') {

        // If the next button is visible, trigger the next part. Else if the save button is visible trigger the submitform part. 
        if (!nextButton.classList.contains('d-none')) {
            nextForm();
        } else if (!kmPrivateField.classList.contains('d-none') && hoursForm.reportValidity()) {

            // Submit form.
            hoursForm.dispatchEvent(new Event('submit'));
            hoursForm.submit();
        }
    }
}

This fixed it for me.

Answered By - Allart