0
297
VistasCómo deshabilitar el botón mientras se crea el formulario y evitar formularios duplicados
Estoy tratando de hacer que el botón "Enviar" esté deshabilitado al enviar y reenviar datos desde un formulario. Esto es para evitar que el usuario cree varias copias del formulario al hacer clic rápidamente en el botón cuando se guardan los datos iniciales que se ingresaron.
Un enfoque que probé fue agregar un antirrebote a la función de JavaScript que maneja las operaciones del botón de envío. Sin embargo, si el usuario continúa haciendo clic en el botón después de 5 segundos, aún se crea el duplicado.
Creo que un mejor enfoque sería deshabilitar el botón mientras se envían los datos y dar una indicación al usuario de que los datos se están guardando y, una vez completados, volver a habilitar el botón.
Aquí está el código javascript para el contexto:
setupFormIO: function(submissionFunction) { var $this = this; var submitFunc = submissionFunction; var labelText = "Submit"; if ($this.projectData && !this.readonly) { labelText = "Save"; } var submits = FormioUtils.searchComponents($this.template.components, { "type": "button" } ); if (submits) { _.each(submits, function (component) { component.label = labelText; // var timer; if (timer) { clearTimeout(timer); } // if ($this.readonly) { $("#" + component.id + " > button").on("click", function(evt) { evt.stopPropagation(); location.assign("/project/ProjectHome.aspx"); timer = setTimeout(process, 5000); // }); } }); }1 Respuestas
Responde la pregunta0
Agregar los siguientes fragmentos de código en ubicaciones estratégicas del script que manejan las operaciones durante y después de hacer clic en el botón Enviar ayudó a crear el efecto deseado.
beforeSubmit: function (submission, next) { const btns = document.querySelectorAll('.btn'); for (const btn of btns) { btn.disabled = true; } $this.isSubmitting = true; console.log("button disabled"); if (submits) { _.each(submits, function (component) { console.log("renabled"); for (const btn of btns) { btn.disabled = false; } $this.isSubmitting = false; console.log("button renabled"); }); }Sin embargo, esto estaba deshabilitando y habilitando cada botón en la página. En última instancia, se utilizó el siguiente método jquery porque se dirige específicamente a los botones de envío solamente.
if (submits) { _.each(submits, function (component) { $("#" + component.id + " > button").prop('disabled', true); }); } window.axios.post($this.baseUri + '/validate', submission.data) .then(function (d) { next(); }) .catch(function (e) { var message = "Validation Failed:"; $this.isSubmitting = false; if (submits) { _.each(submits, function (component) { $("#" + component.id + " > button").prop('disabled', false); });También quería señalar que después de hacer clic en el botón Enviar, la página se redirige a una página de resumen para evitar que se vuelva a hacer clic en el botón Enviar.