1

Necesito habilitar el botón de registro cuando el formulario este completo. Tengo dos selectores de opciones los cuales deben ser seleccionados con la información que contienen. Cuando el formulario este completo necesito que se habilite el botón de registro. El código funciona y cumple lo que necesito quitando las funciones del select2 pero necesito utilizarlo. Me generan conflicto al utilizar la función de JavaScript select2 de Bootstrap. ¿Conocen alguna solución utilizando la función de habilitar el botón y también el select2? Estoy atento a sus comentarios!

 <form action="formPrestamo" id="form" method="POST">
    <select name="socio" class="form-select" id="socio" data-placeholder="Seleccione el Socio">
        <option></option>
        <option value="1">member one</option>
        <option value="2">member two</option>
    </select>
    <br>
    <select name="libro" class="form-select" id="libro" data-placeholder="Seleccione el Libro">
        <option></option>
        <option value="1">book one</option>
        <option value="2">book two</option>
    </select>

    <button type="button" class="btn btn-primary" id="botonRegistrar" disabled>Registrar</button>

</form>

<script type="text/javascript">
    $('#socio').select2({
        theme: "bootstrap-5",
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
        "language": {
            "noResults": function () {
                return "<a href='#' class='btn btn-danger'>No hay resultados</a>";
            }
        },
        escapeMarkup: function (markup) {
            return markup;
        }
    });

    $('#libro').select2({
        theme: "bootstrap-5",
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
        "language": {
            "noResults": function () {
                return "<a href='#' class='btn btn-danger'>No hay resultados</a>";
            }
        },
        escapeMarkup: function (markup) {
            return markup;
        }
    });




    let form = document.querySelector("#form");
    let botonRegistrar = document.querySelector("#botonRegistrar");

    function validar() {

        let desabilitar = false;

        if (form.socio.value == "") {
            desabilitar = true;
        }

        if (form.libro.value == "") {
            desabilitar = true;
        }

        if (desabilitar == true) {
            botonRegistrar.disabled = true;
        } else {
            botonRegistrar.disabled = false;
        }
    }
    document.getElementById("socio").addEventListener("change", validar);
    document.getElementById("libro").addEventListener("change", validar);
    form.addEventListener("keyup", validar)

</script>
5
  • "Me generan conflicto al utilizar la función de JavaScript select2 de Bootstrap" Qué conflicto has identificado? Por qué indicas que existe alguno?
    – javdromero
    Commented el 14 feb. 2023 a las 21:10
  • El problema es que la función de habilitar el botón funciona si quito la lineas del jquery-Select2 ahí si funciona pero al tener el select2 el boton sigue desabilitado y no se habilita teniendo selectores con valores
    – Lucas
    Commented el 14 feb. 2023 a las 21:16
  • El problema es que el evento change que usa un select por defecto no lo puedes usar. Entonces, intenta con los eventos propios de trigger de Select2
    – javdromero
    Commented el 14 feb. 2023 a las 21:27
  • Edita la pregunta y agrega lo que estás testeando para ir ayudando a corregir eso
    – javdromero
    Commented el 14 feb. 2023 a las 21:55
  • ORIGINAL --> document.getElementById("socio").addEventListener("change", validar); TEST: Estoy intentando cambiar aquí los elementos no sé si es en estas lineas o mas arriba pero con estos 2 cambios y otros parecidos a este no pude. document.getElementById("libro").change.select2(validar); // document.getElementById("libro").addEventListener("change.select2", validar);
    – Lucas
    Commented el 14 feb. 2023 a las 21:59

1 respuesta 1

0

Como te indica en la documentación oficial, puedes acceder a un método cuando se selecciona algo de los select2.

Elimina los addEventListener y reemplaza por:

$('#socio').on('select2:select', function(e) {
    validar()
});

$('#libro').on('select2:select', function(e) {
    validar()
});
1
  • Genio!!! Muchas gracias. Ahora sí se soluciono.
    – Lucas
    Commented el 14 feb. 2023 a las 22:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.