0

tengo un problema estoy haciendo un modal donde al abrir me muestra 5 radio buton (tipos de viviendas)

<div class="row" id="viviendas"></div>
  1. Casa
  2. Departamento
  3. Parcela
  4. Chalet
  5. Otro

Y tengo un div oculto:

<div class="row" id="otros" style="display: none">
   <div class="col-sm-12">
      <div class="form-group">
         <label>Especifique</label>
            <textarea class="form-control" rows="3" name="otro"></textarea>
      </div>
  </div>
</div>

Este es el modal que genero. Mi código viene dentro de un json y lo armo de la siguiente manera, no puse todos los radio para no hacer tan extenso el codigo

$('.btn').click(function (event) {
            event.preventDefault();
            sit = $(this).attr('href');
            url="AQUI VA MI RUTA DONDE CARGO DATOS EN EL MODAL";
            $.getJSON(url, {}, function (data) {
                event.preventDefault();
                $('#formModal').attr('action', sit);
                $('#modal').modal('toggle');
                if(!data.Estado){
                    alert("Error inesperado");
                }else{
                   xR = "";
                    $('#viviendas').html('');
                        xR+='<div class="col-sm-12">';
                            xR+='<div class="form-group">';
                            xR+='<div class="form-check">';
                            xR+='<label class="form-check-label">';
                            xR+='<input type="radio" name="tipo" value="1" checked>';
                            xR+='<span>CASA</span>';
                            xR+='</label>';
                            xR+='</div>';
                            xR+='</br>';
                            xR+='<div class="form-check">';
                            xR+='<label class="form-check-label">';
                            xR+='<div class="form-check">';
                            xR+='<label class="form-check-label">';
                            xR+='<input type="radio" name="tipo" value="5" checked>';
                            xR+='<span>OTROS</span>';
                            xR+='</label>';
                            xR+='</div>';
                            xR+='</div>';
                            xR+='</div>';
                    $('#viviendas').append(xR);
                    xR = "";
                }
            });
        });

Mi problema se genera a continuación, ya que div oculto cuando pincho otro me deberia mostrar el textarea, pero no hay caso que el value me llegue a este último código que pongo

$("input[name=tipo]").change(function () {
                alert($(this).val()); // ESTE ALERT NUNCA SE ME EJECUTA
                if($(this).val()==1){
                    $('#otros').hide();
                }else if($(this).val()==2){
                    $('#otros').hide();
                }else if($(this).val()==3){
                    $('#otros').show();
                }else if($(this).val()==5){
                    $('#otros').show();
                }
            });

como puedo lograr que radio entre y se ejecute $("input[name=tipo]").change(function () en este codigo, ya que el alert no me arroja nada, o existe otra forma de rescatar ese ID que necesito, por favor que alguien me oriente a solucionar esto

2 respuestas 2

0

intenta agregando la la funcion change dentro de donde llamas al model

$('.btn').click(function (event) {
event.preventDefault();
sit = $(this).attr('href');
url="AQUI VA MI RUTA DONDE CARGO DATOS EN EL MODAL";
$.getJSON(url, {}, function (data) {
    event.preventDefault();
    $('#formModal').attr('action', sit);
    $('#modal').modal('toggle');
    if(!data.Estado){
        alert("Error inesperado");
    }else{
       xR = "";
        $('#viviendas').html('');
            xR+='<div class="col-sm-12">';
                xR+='<div class="form-group">';
                xR+='<div class="form-check">';
                xR+='<label class="form-check-label">';
                xR+='<input type="radio" name="tipo" value="1" checked>';
                xR+='<span>CASA</span>';
                xR+='</label>';
                xR+='</div>';
                xR+='</br>';
                xR+='<div class="form-check">';
                xR+='<label class="form-check-label">';
                xR+='<div class="form-check">';
                xR+='<label class="form-check-label">';
                xR+='<input type="radio" name="tipo" value="5" checked>';
                xR+='<span>OTROS</span>';
                xR+='</label>';
                xR+='</div>';
                xR+='</div>';
                xR+='</div>';
        $('#viviendas').append(xR);
        xR = "";
        
        
        $("input[name=tipo]").change(function () {
            alert($(this).val()); // ESTE ALERT NUNCA SE ME EJECUTA
            if($(this).val()==1){
                $('#otros').hide();
            }else if($(this).val()==2){
                $('#otros').hide();
            }else if($(this).val()==3){
                $('#otros').show();
            }else if($(this).val()==5){
                $('#otros').show();
            }
        });
    }
});
});
2
  • También lo hice, he movido $('input:radio[name=tipo]').change(function (){ dentro de la misma funcion y tampoco me resultó, por eso he buscado ayuda, ya que de ninguna forma me esta funcionado
    – Karli
    Commented el 3 ago. 2021 a las 16:04
  • Por favor siempre agrega una explicacion a tu codigo.
    – DavElsanto
    Commented el 3 ago. 2021 a las 16:47
0

Lo que pasa es que como estas creando elementos html dinamicos. debes de agregar el evento a estos. para mas informacion revisa https://api.jquery.com/on/

Intentalo de esta manera

$( "body" ).on( "change", "input[name=tipo]",function () {
            alert($(this).val()); // ESTE ALERT NUNCA SE ME EJECUTA
            if($(this).val()==1){
                $('#otros').hide();
            }else if($(this).val()==2){
                $('#otros').hide();
            }else if($(this).val()==3){
                $('#otros').show();
            }else if($(this).val()==5){
                $('#otros').show();
            }
        });

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.