Setting Disabled Attribute doesn't submit forms on Safari iOS

Question

I am trying to do a fancy button with some animations to disable it once clicked (or touched on mobile phones). However; I am facing an issue. The issue is that setting the disabled attribute does complete the animation, but doesn't submit the form. It's working on PCs, though!

<form class="needs-validation" action="" method="post" enctype="application/x-www-form-urlencoded" role="form">
    <div class="card shadow">
        <div class="card-body">
            <h2 class="card-title text-center">Form</h2>
            <div class="form-floating mb-3">
                <input class="form-control" name="id" placeholder="Enter ID" type="text" required>
                <label>ID<label>
            </div>
            <div class="mb-3 text-end">
                <button type="submit" class="btn btn-primary" name="submit" id="submit"
                    onclick="submitForm();">Search</button>
            </div>
        </div>
    </div>
</form>

function submitForm() {
    var submitBtn = document.getElementById("submit");
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp; Searching...';
    submitBtn.setAttribute("disabled", true);
}

What am I missing or is it a bug with Safari on iOS?

EDIT:

Tried ontouchend=submitForm(); but didn't solve the issue.

Lzh · Accepted Answer · 2022-07-23 14:02:19Z

1

Edit: simpler answer

Just move your listener/handler from the button's onclick to the form's onsubmit.

This causes your listener/handler to only be invoked after the submit process is invoked, so setting disabled doesn't affect that process.
This also means you don't need to call form.submit() manually
You can then have the original name="submit" on the element (although I wouldn't advise it as it overwrites the submit function).

Original answer

This happens because the onclick event handler occurs before the form is submitted. Subsequently, when it is time to submit the form, the submit input is disabled and so the form should not submit.

Also you have named your button "submit" with name="submit". Change the name to something else, like "submitButton" to avoid affecting the native submit function.

Now you can call submit in your submitForm handler:

function submitForm() {
    var submitBtn = document.getElementById("submit");
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp; Searching...';
    submitBtn.setAttribute("disabled", true);

    // calling submit manually
    form.submit();
}

Details:

Named inputs of a form are assigned to the object representing the form.

For example, if you have an form named myForm and it has an input named firstName, then firstName can be accessed in JavaScript as such: myForm.firstName.

Now you have an input called "submit" (the submit button). Guess what's also called submit on the form object? The method that is actually used to actually "submit" your form.

When you have an input called "submit" the method to submit gets overwritten to something completely different and it's no longer pointing to the submit function, hence submit doesn't work no longer.

edited Jul 23, 2022 at 14:02

answered Jul 23, 2022 at 13:42

Lzh

3,6351 gold badge25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tes3awy Over a year ago

Still didn't work! I even tried and removed the name attribute but no hope

Lzh Over a year ago

I tried it, it should work. Would you show us the whole form element (with the latest changes) please -- enter it into the question description

Lzh Over a year ago

@Tes3awy Sorry something was missing from my answer, please also add form.submit(); to the submitForm function

Lzh Over a year ago

@Tes3awy The explanation is in the answer (I edited the answer): "This happens because the onclick event handler occurs before the form is submitted. Subsequently, when it is time to submit the form, the submit input is disabled and so the form should not submit."

Lzh Over a year ago

I also added an alternative, simpler answer... As for the timeout, it works because it causes the attribute to be set only after the form submission process is invoked so it doesn't block the submission process

|

Collectives™ on Stack Overflow

Setting Disabled Attribute doesn't submit forms on Safari iOS

1 Answer 1

Edit: simpler answer

Original answer

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit: simpler answer

Original answer

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related