TransWikia.com

Obtener RadioButton marcado a traves de json y modal

Stack Overflow en español Asked by Karli on November 13, 2021

tengo un modal que cargo con los datos a través de un json, lo cual me trae los datos sin inconvenientes, lo que no me resulta es cuando vuelvo a abrir mi modal, lograr poner seleccionado el radiobutton que logicamente traigo a traves del json y por base de datos (Actualmente seleccionado Departamento). Mi codigo json lo obtengo asi

$('.btnEdit').click(function (event) {
            event.preventDefault();
            sit = $(this).attr('href');
            url="{{route('editar.JSON', ["id"=>"#REF#"])}}";
            url=url.replace("#REF#", $(this).attr('id'));
            $.getJSON(url, {}, function (data) {
                event.preventDefault();
                $('#formModal').attr('action', sit);
                $('#modal').modal('toggle');
                if(!data.Estado){
                    alert("Error");
                }else{
                    if((data.tipo)==1){
                        $('#est').html("Casa");
                    }else if((data.tipo)==2){
                        $('#est').html("Condominio");
                    }else if((data.tipo)==3){
                        $('#nwEstadoEv').html("Departamento");
                    }else if((data.tipo)==4){
                        $('#nwEstadoEv').html("Parcela");
                    }
                }
            });
        });

Y parte de mi modal es asi

<div>
   <label><input type="radio" class="form" name="tipo"  value="1">Casa</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="2">Condominio</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="3">Departamento</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="4">Condominio</label>
</div>

Asi es como se ve mi modal

Había tratado de usar $('#seleccion').prop('checked'), pero no he logrado absolutamente nada, si hago un console.log(data.tipo); me devuelve 3, lo cual es correcto ya que pertenece a Deparmento, pero no logro que me deje seleccionado lo que ya traigo en mi codigo, como puedo hacerlo por favor

jqueryjson

One Answer

Como tus radio buttons no tienen id, puedes buscarlo por su tipo y valor:

$(":radio[value='3']").prop('checked', true);
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
        
<div>
   <label><input type="radio" class="form" name="tipo"  value="1">Casa</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="2">Condominio</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="3">Departamento</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="4">Condominio</label>
</div>

O por el nombre y valor:

$("input[name=tipo][value='3']"). prop('checked', true);
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
        
<div>
   <label><input type="radio" class="form" name="tipo"  value="1">Casa</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="2">Condominio</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="3">Departamento</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="4">Condominio</label>
</div>

Aunque también podrías tomar el value directamente de la propiedad de tu json:

let data = {tipo:"3"};
$(":radio[value=" + data.tipo + "]").prop('checked', true);
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
        
<div>
   <label><input type="radio" class="form" name="tipo"  value="1">Casa</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="2">Condominio</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="3">Departamento</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="4">Condominio</label>
</div>

o 

let data = {tipo:"3"};
$("input[name=tipo][value=" + data.tipo + "]"). prop('checked', true);
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
        
<div>
   <label><input type="radio" class="form" name="tipo"  value="1">Casa</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="2">Condominio</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="3">Departamento</label>
</div>
<div>
   <label><input type="radio" class="form" name="tipo"  value="4">Condominio</label>
</div>

Cualquiera de las opciones las puedes usar una vez que obtengas la respuesta a la llamada ajax:

$.getJSON(url, {}, function (data) {
    event.preventDefault();
    $('#formModal').attr('action', sit);
    $('#modal').modal('toggle');
    if(!data.Estado){
        alert("Error");
    }else{
        if((data.tipo)==1){
            $('#est').html("Casa");
        }else if((data.tipo)==2){
            $('#est').html("Condominio");
        }else if((data.tipo)==3){
            $('#nwEstadoEv').html("Departamento");
        }else if((data.tipo)==4){
            $('#nwEstadoEv').html("Parcela");
        }

        console.log(data.tipo);
        // Agrega esto ?
        $(":radio[value=" + data.tipo + "]").prop('checked', true);
    }
});

Answered by porloscerros Ψ on November 13, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP