简体   繁体   中英

Select radio button according to returned value

When I edit an event without fullcalendar, I created these two radio buttons in the modal.

$('#calendar').fullCalendar({
defaultView: 'month',
header: {
                language: 'PT',
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek',
               
            },
            
            defaultDate: dia,
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            selectable: true,
            selectHelper: true,
      
events: [

<?php foreach($events as $event): ?>
                {
                    id: '<?php echo $event['id']; ?>',
                    title: '<?php echo $event['nome']; ?>',
                    radio_one: '<?php echo ($event['contatou']=="Sim") ?  "checked" : "" ;  ?>',
                    radio_two: '<?php echo ($event['contatou']=="Não") ?  "checked" : "" ;  ?>',
                    
                },

            <?php endforeach; ?>
            ]
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
            <form class="form-horizontal" method="POST" action="./updatevisitaLar1">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">ALTERAR VISITA</h4>
              </div>
              <div class="modal-body">
                
                  <div class="form-group">
                    <label for="titlee" class="col-sm-4 control-label">NOME UTENTE</label>
                    <div class="col-sm-8">
                      <select name="titlee" class="form-control" id="titlee">
                        <option value=""></option>
                          <?php        
                            $sql = "SELECT * FROM raddb.Utente WHERE ativo = '1' ORDER BY nome ASC";
                            $qr = mysqli_query($conn, $sql);
                            while($ln = mysqli_fetch_assoc($qr)){
                            echo '<option value="'.$ln['codigo'].'">'.$ln['nome'].'</option>';
                            }
                          ?>  
                        </select>
                    </div>
                  </div>
          
          <div id="isolamento">

                  <div class="form-group">
                  <label for="switch_one" class="col-sm-4 control-label">CONTATOU VISITANTE</label>
                    <div class="switch-field">
                        <input type="radio" id="radio_one" name="switch_one" value="Sim" />
                        <label for="radio_one">SIM</label>
                        <input type="radio" id="radio_two" name="switch_one" value="Não" />
                        <label for="radio_two">NÃO</label>
                    </div>
                  </div>

                  <div class="form-group">
                  <label for="switch_two" class="col-sm-4 control-label">ALTERAÇÂO DA VISITA</label>
                    <div class="switch-field">
                        <input type="radio" id="radio_three" name="switch_two" value="Alt" />
                        <label for="radio_three">ALTERAÇÂO DE DATA</label>
                        <input type="radio" id="radio_four" name="switch_two" value="Canc" />
                        <label for="radio_four">CANCELOU VISITA</label>
                    </div>
                  </div>
                  
                  </div>

                  <ul class="flex-outer">
               <div class="form-check">
                    <label class="toggle">
                        <input type="checkbox" name="delete"> <span class="label-text text-danger"> ELIMINAR TAREFA</span>
                    </label>
                </div>                
                 </ul> 
                
                  <input type="hidden" name="id" class="form-control" id="id">
                
                
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                <button type="button" style="float: right" onclick="inserir_alter()" class="btn btn-primary">Guardar</button>
              </div>
            </form>
            </div>
          </div>
        </div>

When I return the value of the database option button, I want the value returned from the database to be selected. To do this I am doing it this way as I put it above:

radio_one: '<?php echo ($event['contatou']=="Sim") ?  "checked" : "" ;  ?>',
radio_two: '<?php echo ($event['contatou']=="Não") ?  "checked" : "" ;  ?>',

But it is not working. I intend that the user when consulting the event in the modal, the radio selected appears according to the value returned from the database

I open the modal like this:

eventRender: function(event, element) {
                element.bind('dblclick', function() {
                    
                    console.log(event.cancelou);
                    $('#ModalEdit #id').val(event.id);
                    $('#ModalEdit #titlee').val(event.titlee);
                    $('#ModalEdit #response').val(event.response);
                    $('#ModalEdit #contacte').val(event.contacte);
                    $('#ModalEdit #title1e').val(event.title1);
                    $('#ModalEdit #contact1e').val(event.contact1);
                    $('#ModalEdit #start1').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
                    $('#ModalEdit #end1').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));
                    $('#ModalEdit #DataRegisto').val(event.DataRegisto);
                    $('#ModalEdit #Colaborador').val(event.Colaborador);

                    $('#ModalEdit').modal('show');
                });

You're not using the values you're setting in the fullCalendar events to actually do anything. And having the two separarate radio_one and radio_two values doesn't make a lot of sense really either.

Here's an approach which should work:

events: [
    <?php foreach($events as $event): ?>
    {
        id: '<?php echo $event['id']; ?>',
        title: '<?php echo $event['nome']; ?>',
        switch_one: '<?php echo $event['contatou'];  ?>'
    },
    <?php endforeach; ?>
]

and

$("input[name='switch_one'][value='" + event.switch_one + ']").prop("checked",true);

This uses the actual value in your field to find the radio with the matching value within the group of radio buttons, and sets it "checked" property to true, which makes it selected. The concept was taken from the example in this answer .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM