Question

当我查询表单时，返回输入单选，其中填充了数据库的数据，如下所示：

<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

我也在完整的图片中显示：

但是，当我单击“编辑”按钮时，它更改了已填充的输入单选框，但不应更改，因为它不再根据数据库的数据填充，如图所示：

脚本：

$(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>

我正在尝试这些方法，但仍然无法解决问题：

第一种形式：

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

if(tipo_conta == 'Pendente'){

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

}else{ 

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

}

第二种形式：

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

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

有人可以帮忙吗？

Answer 1

我在HTML文件中发现了问题。正如@daddygames建议的那样，您在两个单选按钮中都使用了相同的ID。见下文

<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>

ID必须是唯一的。更新ID并使其唯一。然后根据需要更改.ajax脚本中的代码。这将为您提供帮助。

Answer 2

首先，我创建了变量lis，以接收radio input从数据库接收的值：

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

然后在data函数内部，我创建了另一个变量，其值是radio input从该函数接收的值：

var teste = data.Estado;

最后我检查if：

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

完整代码：

$(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'); 

                }  
           });  
      });

用数据库数据填写单选输入

2 个答案: