Estoy tratando de hacer un botón elegante con algunas animaciones para deshabilitarlo una vez que se hace clic (o se toca en los teléfonos móviles). Sin embargo; Estoy enfrentando un problema. El problema es que establecer el atributo disabled completa la animación, pero no envía el formulario. ¡Sin embargo, está funcionando en PC!
<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); }¿Qué me estoy perdiendo o es un error con Safari en iOS?
EDITAR:
ontouchend=submitForm(); pero no resolvió el problema.
Simplemente mueva su oyente/controlador desde el botón onclick al onsubmit del formulario.
form.submit() manualmentename="submit" en el elemento (aunque no lo recomendaría ya que sobrescribe la función de envío). Esto sucede porque el controlador de eventos onclick ocurre antes de que se envíe el formulario. Posteriormente, cuando llega el momento de enviar el formulario, la entrada de envío se deshabilita y, por lo tanto, el formulario no debería enviarse.
También ha llamado a su botón "enviar" con name="submit" . Cambie el nombre a otro, como "submitButton" para evitar afectar la función de submit nativa.
Ahora puede llamar a submit en su controlador de envío de formulario:
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(); }Detalles:
Las entradas con nombre de un formulario se asignan al objeto que representa el formulario.
Por ejemplo, si tiene un formulario llamado myForm y tiene una entrada llamada firstName, entonces se puede acceder a firstName en JavaScript como tal: myForm.firstName .
Ahora tiene una entrada llamada "enviar" (el botón de enviar). ¿Adivina qué también se llama enviar en el objeto de formulario? El método que se utiliza realmente para "enviar" su formulario.
Cuando tiene una entrada llamada "enviar", el método para enviar se sobrescribe a algo completamente diferente y ya no apunta a la función de envío, por lo tanto, enviar ya no funciona.