Populate radio input with database data

Question

When I consult the form returns the input radio filled with data from the database, as shown in the input and image:

<input type="radio" id="Estado" name="Estado" value="Pendente" ' . ( ($row6["Estado"]=='Pendente') ? 'checked' : '' ) .' readonly="true"> Pendente &nbsp;&nbsp;&nbsp; <input type="radio" id="Estado" name="Estado" value="Concluído" ' . ( ($row6["Estado"]=='Concluído') ? 'checked' : '' ) .' readonly="true"> Concluído

But when I click the edit button it changes the filled input radio and should not, because it thus does not populate as the database data, as I show in the image:

script:

 $(document).on('click', '.edit_data6', function(){  
       var employee_id6 = $(this).attr("Id");  
       $.ajax({  
            url:"./fetch26",  
            method:"POST",  
            data:{employee_id6:employee_id6},  
            dataType:"json",  
            success:function(data){ 

                 $('#data6').val(data.data6);
                 $('#Colaborador6').val(data.Colaborador6); 
                 $('#Observacao6').val(data.Observacao6);
                 $('#Estado1').prop("checked", data.Estado);
                 $('#Conclusao').val(data.Conclusao);
                 $('#employee_id6').val(data.Id6);
                 $('#insert6').val("Gravar");                    
                 $('#exampleModal6').modal('show');              
            }  
       });  
  });  

  $('#insert_form6').on("submit", function(event){  
       event.preventDefault(); 
       if($('#Colaborador6').val() == "")  
       {  
            alert("Colaborador é necessário");  
       }           
       else  
       {  
            $.ajax({  
                 url:".conexao26",  
                 method:"POST",  
                 data:$('#insert_form6').serialize()
                 ,  
                 beforeSend:function(){  

                      $('#insert6').val("Inserting");  
                 },

                 success:function(data){                     

                      $('#insert_form6')[0].reset();  
                      $('#exampleModal6').modal('hide');  
                      $('#employee_table').html(data); 
                      location.reload("exampleModal6");
                 }  
            });  
       }  
  });   

HTML:

    <form method="post" id="insert_form6">
        <div class="col-md-4 col-xs-4">
          <div class="form-group">
            <h6><label for="Data-name" class="col-form-label">Data</label></h6>
            <h6><input type="date" name="data6" id="data6" value="<?php echo date("Y-m-d");?>"></h6>
          </div>
          </div>
          <div class="col-md-4 col-xs-4">
          <div class="form-group">
            <h6><label for="Colaborador-text" class="col-form-label">Colaborador</label></h6>
            <h6><select style="width:150px" name="Colaborador6" id="Colaborador6" required>

<option></option>

<?php

      $sql = "SELECT Funcionario FROM centrodb.InfoLuvas WHERE Ativo = '1' AND Funcao = 'Limpeza' AND Valencia = 'LAR'";
      $qr = mysqli_query($conn, $sql);
while($ln = mysqli_fetch_assoc($qr)){
      echo '<option value="'.$ln['Funcionario'].'">'.$ln['Funcionario'].'</option>';
      }
     ?>
     </select></h6>
     </div>
     </div>
       <div class="row">
         </div>
          <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <h6><label for="Observacao-name" class="col-form-label">Tarefa Pendente</label></h6>
            <textarea type="text" id="Observacao6" name="Observacao6" class="form-control"></textarea>
          </div>
          </div>
          <div class="col-md-6 col-xs-6">
          <div class="form-group">
          <h6><label for="Observacao-name" class="col-form-label">Estado</label></h6> 
          <div style="clear:both;"></div>
          <h6><input type="radio" id="Estado1" name="Estado" value="Pendente"> Pendente &nbsp;&nbsp;&nbsp; <input type="radio" id="Estado1" name="Estado" value="Concluido"> Concluído</h6> 
          </div>
          </div>
          <div class="row">
         </div>
          <div class="col-md-6 col-xs-6">
            <div class="disabled form-group">
            <h6><label for="Observacao-name" class="col-form-label">Conclusão</label></h6>
            <textarea type="text" id="Conclusao" name="Conclusao" class="form-control"></textarea>
          </div>
          </div>
          <div class="col-md-2 col-xs-2">
          <div class="form-group">
          <h6><input type="hidden" name="Nome6" id="Nome6" value="Ana Ribeiro" readonly="true"></h6>
          </div>
          </div>
          <div class="col-md-2 col-xs-2">
          <div class="form-group">
          <h6><input type="hidden" name="NomeConc" id="NomeConc" value="Ana Ribeiro" readonly="true"></h6>
          </div>
          </div>
          <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button>
        <input type="hidden" name="employee_id6" id="employee_id6" />
        <input type="submit" name="insert6" id="insert6" value="Registo" data-toggle="modal" class="btn btn-success" /> 
      </div>
        </form>    

I’m trying these ways but I still don’t solve the problem:

first form:

var tipo_conta = $('.tipo_conta').val(data.Estado);

if(tipo_conta == 'Pendente'){

  $('#Estado1').prop('checked' , true);

}else{ 

  $('#Estado2').prop('checked' ,true);

} 

second form:

var radios = document.getElementsByName("Estado");

if (radios.value == "Pendente") {
            radios.checked = true;
        }else{
            radios.checked = true;
        }   

Anyone can help?

Answer 1

First I created the variable lis to receive the amount input radio received from the database:

var lis = $("#Estado").val();

Then inside the function data created another variable with the value that the input radio received from the function:

var teste = data.Estado;

and finally do the check with the if:

if(lis == teste){
$('#Estado').prop('checked' , true);
}else{ 
$('#Estado1').prop('checked' ,true);
} 

Complete code:

$(document).on('click', '.edit_data6', function(){  
           var employee_id6 = $(this).attr("Id");
           var lis = $("#Estado").val();
           $.ajax({  
                url:"./fetch26",  
                method:"POST",  
                data:{employee_id6:employee_id6},  
                dataType:"json",  
                success:function(data){
                  var teste = data.Estado;
                     $('#data6').val(data.data6);
                     $('#Colaborador6').val(data.Colaborador6); 
                     $('#Observacao6').val(data.Observacao6);
                     if(lis == teste){
                     $('#Estado').prop('checked' , true);
                     }else{ 
                     $('#Estado1').prop('checked' ,true);
                     } 
                     $('#Conclusao').val(data.Conclusao);
                     $('#employee_id6').val(data.Id6);
                     $('#insert6').val("Gravar");                    
                     $('#exampleModal6').modal('show'); 

                }  
           });  
      });