En nuestra exploración continua de mejorar la interactividad de nuestras aplicaciones web, hemos dado un paso más para brindar a los usuarios una experiencia aún más fluida. Ahora, no solo mostramos una atractiva alerta visual con SweetAlert2 cuando los datos se guardan con éxito, sino que también desactivamos el campo de entrada y el boton de envio, proporcionando así una experiencia más intuitiva y pulida.
// Fragmento de código JavaScript
.then(data => {
console.log(data.status);
if (data.status === 'Correcto') {
// Mostrar una alerta SweetAlert2
Swal.fire({
icon: 'success',
title: 'Éxito',
text: 'Datos guardados exitosamente',
confirmButtonColor: '#3085d6',
});
// Deshabilitar el botón después de guardar los datos
document.getElementById('guardarBtn').disabled = true;
// Deshabilitar el campo de entrada después de guardar los datos
document.getElementById('carpeta').disabled = true;
}
});
2. ¿Por qué es Importante?
Al desactivar el campo de entrada después de que se han guardado los datos, proporcionamos una señal visual clara al usuario de que la operación ha sido completada con éxito. Esto también evita que el usuario realice entradas adicionales innecesarias, mejorando así la experiencia general del usuario.
3. ¡Sigue Aprendiendo y Experimentando!
Estas pequeñas mejoras son solo el comienzo de las muchas posibilidades que puedes explorar en el desarrollo web. Anima a los usuarios a proporcionar comentarios sobre estas funciones y sigue experimentando con nuevas técnicas para hacer que tus aplicaciones sean aún más sorprendentes.
¡Despierta tu Curiosidad y Eleva tus Proyectos!
Con SweetAlert2 y la desactivación inteligente de campos, hemos llevado nuestra aplicación a un nuevo nivel de interactividad. ¡Sigue explorando, aprendiendo y construyendo proyectos increíbles! En la próxima parte, exploraremos más consejos y trucos emocionantes.
codigo completo:
<div class="container">
<form id="myForm">
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="carpeta">Carpeta de investigación:</label>
<input type="text" class="form-control inputstl" name="carpeta" id="carpeta" placeholder="Carpeta Judicial" aria-invalid="true">
</div>
</div>
<!-- Campos ocultos para enviar el id al servidor -->
<input type="hidden" name="id" value="<?php echo "17" ?>">
<div class="col-2">
<div class="form-group">
<button type="submit" class="btn btn-success" id="guardarBtn" >Guardar</button>
</div>
</div>
</div>
</form>
</div>
<script>
var formulario = document.getElementById('myForm');
formulario.addEventListener('submit', function(e){
e.preventDefault();
console.log('me diste un click')
var datos = new FormData(formulario);
console.log(datos.get('carpeta'))
console.log(datos.get('id'))
fetch('http://localhost/MVC-SITE-v5/EJERCICIOS-COMPONENTES/1-carpeta.php', {
method: 'POST',
body: datos,
})
.then(res => res.json())
.then(data => {
console.log(data.status);
if (data.status === 'Correcto') {
// Mostrar una alerta SweetAlert2
Swal.fire({
icon: 'success',
title: 'Éxito',
text: 'Datos guardados exitosamente',
confirmButtonColor: '#3085d6',
});
// Deshabilitar el botón después de guardar los datos
document.getElementById('guardarBtn').disabled = true;
// Deshabilitar el campo de entrada después de guardar los datos
document.getElementById('carpeta').disabled = true;
}
});
})
</script>
Comentarios
Publicar un comentario