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> 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.
Just move your listener/handler from the button's onclick to the form's onsubmit.
form.submit() manuallyname="submit" on the element (although I wouldn't advise it as it overwrites the submit function).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> 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.