Deteccion de cambios incluyendo select, input, textarea y checkbox

This commit is contained in:
imnavajas
2024-02-05 22:15:35 +01:00
parent b328a7c5af
commit a334ac6842

View File

@ -117,7 +117,7 @@
<?= $this->section("additionalInlineJs") ?>
// Obtener todos los campos de entrada del formulario
const formInputs = document.querySelectorAll('input, textarea');
const formInputs = document.querySelectorAll('input, textarea, select');
//console.log(formInputs)
@ -126,31 +126,51 @@
// Guardar los valores originales
formInputs.forEach(function(input) {
originalValues[input.id] = input.type === 'checkbox' ? input.checked : input.value;
if (input.type === 'checkbox') {
originalValues[input.id] = input.checked;
} else {
originalValues[input.id] = input.tagName.toLowerCase() === 'select'
? $(input).val() // jQuery para obtener el valor de un select2
: input.value;
}
});
console.log(originalValues)
// Agregar un evento de cambio a cada campo de entrada
formInputs.forEach(function(input) {
console.log(input.type)
input.addEventListener('input', function() {
//console.log(input.value)
// Verificar si hay cambios con respecto a los originales
const cambiosDetectados = Array.from(formInputs).some(function(input) {
return input.type === 'checkbox' ?
input.checked !== originalValues[input.id] :
input.value !== originalValues[input.id];
if (input.tagName.toLowerCase() === 'select' && $(input).data('select2')) {
// Para elementos select2
$(input).on('change', function() {
verificarCambios();
});
// Mostrar alerta solo si hay cambios
if (cambiosDetectados) {
showBreadCrumbSaveButton(true);
console.log('¡Se detectaron cambios!');
}else{
showBreadCrumbSaveButton(false);
}
});
} else {
// Para otros tipos de campos
input.addEventListener('input', function() {
verificarCambios();
});
}
});
function verificarCambios() {
// Verificar si hay cambios con respecto a los originales
var cambiosDetectados = Array.from(formInputs).some(function(input) {
return input.type === 'checkbox'
? input.checked !== originalValues[input.id]
: input.tagName.toLowerCase() === 'select'
? $(input).val() !== originalValues[input.id]
: input.value !== originalValues[input.id];
});
// Mostrar alerta solo si hay cambios
if (cambiosDetectados) {
showBreadCrumbSaveButton(true);
}else{
showBreadCrumbSaveButton(false);
}
}
<?= $this->endSection() ?>