1

Solicito de su colaboración con lo siguiente:

Tengo un formulario de editar el cual me trae un valor y me lo almacena en una variable de la siguiente manera:

var regu = listas["regularidad"].regularidad;

requiero que seguido a esto me muestre u oculte unos div dependiendo del valor que me traiga esta variable: los div son como los siguientes solo mostrare uno para no extender la consulta.

<div class="form-row" style="">
                        <div id="diaria" class="box diaria" style="padding-bottom:0.5rem;">
                            <div id="diarioChk">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="diario" value="" >
                                    <label class="form-check-label" style="font-weight: 100; margin-left: 20px;" for="diario" >
                                        Cada 
                                    </label>
                                    <input type="number" min="1" oninput="this.value = !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null" class="form-control" style="width:70px; display:inline; height:25px;" id="diarioNumero">
                                    <label class="form-check-label" style="font-weight: 100; padding-bottom:1rem;"> 
                                        dias.
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="diario"  value="">
                                    <label class="form-check-label" style="font-weight: 100; margin-left: 20px;" for="todosLosdias">
                                        Todos los dias de la semana
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

la idea es cuando la variable regu sea igual a 0 me muestre este div, si es 1 me oculte el div diario y me muestre uno con id = semanal

para ello tengo lo siguiente pero no me ha funcionado:

switch(regu){
        case 0:
            $(document).ready(function() {
            $('input[id="diaria"]').click(function() {
                var inputValue = $(this).attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
                }); 
            });
        brake;

        case 1:
            $(document).ready(function() {
                $('input[id="semanal"]').click(function() {
                    var inputValue = $(this).attr("value");
                    var targetBox = $("." + inputValue);
                    $(".box").not(targetBox).hide();
                    $(targetBox).show();
                });
            });
        brake;

        case 2:
            $(document).ready(function() {
                $('input[id="mensual"]').click(function() {
                    var inputValue = $(this).attr("value");
                    var targetBox = $("." + inputValue);
                    $(".box").not(targetBox).hide();
                    $(targetBox).show();
                });
            });
        brake;

        case 3:
            $(document).ready(function() {
                $('input[id="anual"]').click(function() {
                    var inputValue = $(this).attr("value");
                    var targetBox = $("." + inputValue);
                    $(".box").not(targetBox).hide();
                    $(targetBox).show();
                });
            });
        brake;

        case 4:
            $(document).ready(function() {
                $('input[id="sinRegularidad"]').click(function() {
                    var inputValue = $(this).attr("value");
                    var targetBox = $("." + inputValue);
                    $(".box").not(targetBox).hide();
                    $(targetBox).show();
                });
            });
        brake; 
    }

espero me puedan colaborar, esto ya lo pude hacer desde checkbox o campos de select pero no lo he podido realizar asi con variables o desde un campo de texto, por lo cual agradezco mucho de su colaboración.

Cordial saludo.

2
  • $(document).ready(function() .. esta funcion debiese usarse una sola vez.. cuando quieres ejecutar algo en la carga del documento, lo estas usando de forma incorrecta en tu ejemplo, si obtienes regu desde un formulario de edicion entonces deberias validar el valor de regu en el evento onsubmit de tu formulario
    – David081
    el 12 abr. 2022 a las 15:34
  • @David081 muchas gracias por tu comentario y corrección lo que requiero es que dependiendo del valor de un input de tio numerico me muestre el div correspondiente y me oculte los demas esto lo realizo desde el evento onsubmit o desde la funcion ready? agradezco enormemente tu colaboración el 12 abr. 2022 a las 16:45

1 respuesta 1

2

Usando el evento submit de tu formulario vas a depender de que la variable regu se valide cada vez que envíes la información del formulario y resultaría algo así como lo siguiente:

   $("#miformulario).on('submit', function(){
   let regu = $("#input").val()
   switch(regu){
    case 0:
            var inputValue = $("#diaria").attr("value");
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show();
    brake;

    case 1:
                var inputValue = $("#semanal").attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
    brake;

    case 2:
                var inputValue = $("#mensual").attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
    brake;

    case 3:

                var inputValue = $("#anual").attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
    brake;

    case 4:
                var inputValue = $("#sinRegularidad").attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
    brake; 
  }
})

Usando el evento de un input se va a validar la variable regu cada vez que este input cambie su valor, y quedaría algo así como:

 $("#input).on('change', function(){
   let regu = $(this).val()
   switch(regu){
    case 0:
            var inputValue = $("#diaria").attr("value");
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show();
    brake;

    case 1:
                var inputValue = $("#semanal").attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
    brake;

    case 2:
                var inputValue = $("#mensual").attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
    brake;

    case 3:

                var inputValue = $("#anual").attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
    brake;

    case 4:
                var inputValue = $("#sinRegularidad").attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
    brake; 
  }
})

Así se ejecutara la function cada vez que el valor del input cambie, recuerda que puedes usar también los otros evento de los input, como por ejemplo input,keydown,keyup, keypress.. etc Nota:No profundice mucho en lo que ejecuta cada case, solo intento ayudar con la lógica según lo que solicitas. espero haberte ayudado. Nota2: en su defecto también puedes usar la clase de bootstrap "d-none" para ocultar elementos de la siguiente forma $("#mielemento").addClass("d-none") y para removerla $("#mielemento").removeClass("d-none")

2
  • Todo esto está muy bien, pero si en lugar de brake; ponemos break; al final de cada opción del switch tal vez funcione mejor, porque brake; va a dar un error como una catedral de grande.
    – DigiSoul
    el 12 abr. 2022 a las 17:44
  • Es muy valida la respuesta, pero aplica mas cuando se ejecuta en envio de datos o la acción de un botón. En mi caso la acción de ocultar o mostrar debe ejecutar al cargar la pagina no se si agragando el switch dentro de una funcion llamada cargaRegularidad y agregando el evento onload en el body funcione y sea correcto hacerlo de esta manera. Agradezco su colaboración el 13 abr. 2022 a las 19:59

Tu Respuesta

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

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