Show checbox already marked with jquery

Question

Show checbox already marked with jquery

Navigation

#1 by (1 votes)

1

I have a fullcalendar and clicking on some day will show me a form, the user enters the normal data and must select some people assigned to that event with a checkbox. (There all good).

Image with created events: link

Image of the registration form: link

The user clicking on an event will show what he has in the database:

Image of the field assigned in the database: link

As you can see the assignees are: Julian Caicedo and Nelson Barrios, but clicking on an event always shows me the first two checkbox marked osea, Andres Medina and Jhon Cortes and if the database had a single assigned example Nelson Barrios would show me the first checbox that would be Andres Medina.

Image of a record with data from the database: link

Code where I have the checkboxes:

<div class="form-group col-md-12" id="formid">
    <label>Asignados:</label>
    <?php

    $contador = 1;

    foreach ($sql8 as $row){
    ?>
    <input type="checkbox" <?php echo 'id="txtAsignados'.$contador.'"' ?> name="txtAsignados[]" class="txtAsignados" value="<?php echo $row['primer_nombre'] . " " . $row['primer_apellido']; $contador++; ?>"><?php echo $row['primer_nombre'] . " " . $row['primer_apellido']; ?>
    <?php } ?>
</div>

The counter what it does is concatenate with the id txtAsigandos to have each of the checkboxes a different ID, example txtAsigned1, txtAsigand2 and so on depending on the amount of assigned that exist.

The name of the assignee is taken directly with a query in the database:

$sql8 = mysqli_query($conexion, "SELECT cedula, primer_nombre, primer_apellido, idrol FROM usuario WHERE idrol = 4 ORDER BY primer_nombre ASC");

Jquey code to check the checkbox:

var contaAsig = 1;
var arrayAsig = 0;

    var texto = calEvent.asignados;
    separador = ",";
    textoseparado = texto.split(separador);

    for (;textoseparado[arrayAsig];){
    $('#txtAsignados'+contaAsig).prop('checked', true);
    contaAsig++;
    arrayAsig++;
}

What I need is for you to mark the assigned ones and NO the first ones that you always check.

mysql jquery php ajax

asked by Jairo Arturo Cifuentes 19.09.2018 в 00:13

source

1 answer

Collect in an object the responses received from 3 URLs via fetch Problems with the name of the package, in Composer

score 1 · Accepted Answer

Básicante today you have a form with four checkboxes:

<input type="checkbox" id="txtAsignados0" name="txtAsignados[]" class="txtAsignados" value="Andrés Medina">
<input type="checkbox" id="txtAsignados1" name="txtAsignados[]" class="txtAsignados" value="Jhon Cortes">
<input type="checkbox" id="txtAsignados2" name="txtAsignados[]" class="txtAsignados" value="Julian Caicedo">
<input type="checkbox" id="txtAsignados3" name="txtAsignados[]" class="txtAsignados" value="Nelson Barrios">

And you have a string with the names of the people assigned, concatenated by commas: Julian Caicedo,Nelson Barrios .

Your current logic is:

I explode my string using the comma
I have an array that contains the names of two selected
I use the position in the array to find the checkbox
- position 0 = > jQuery('#txtAsignados0')
- position 1 = > jQuery('#txtAsignados1')

In other words, with that logic you will always check the first N checkboxes and that is not what you are looking for.

Given your current structure, my proposal would be to make instead:

I explode my string using the comma
I have an array that contains the names of two selected
I use the value in the array to find the corresponding checkbox
- Julian Caicedo = > jQuery('.txtAsignados[value="Julian Caicedo"]')
- Nelson Barrios = > jQuery('.txtAsignados[value="Nelson Barrios"]')

Here is a working example:

let seleccionados ='Julian Caicedo,Nelson Barrios'.split(',');

jQuery(document).ready(function() {
  seleccionados.forEach(function(nombre) {
    jQuery('.txtAsignados[value="${nombre}"]').prop('checked',true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="txtAsignados0" name="txtAsignados[]" class="txtAsignados" value="Andrés Medina">Andrés Medina
<input type="checkbox" id="txtAsignados1" name="txtAsignados[]" class="txtAsignados" value="Jhon Cortes">Jhon Cortes
<input type="checkbox" id="txtAsignados2" name="txtAsignados[]" class="txtAsignados" value="Julian Caicedo">Julian Caicedo
<input type="checkbox" id="txtAsignados3" name="txtAsignados[]" class="txtAsignados" value="Nelson Barrios">Nelson Barrios

It is inefficient to make jQuery look for the value of the checkbox. It would be better if in your structure you save as "assigned" not the concatenation of the names but, perhaps, the concatenation of something that made them unique (for example, your ID) and use that field in turn in the ID of each checkbox.

Assigning an ID that is just a prefix plus an index that is increasing, as you do today, does not mean anything.

The correct way to do this, however, is to keep a relationship between events and people assigned. If today you have the table evento (let's say that your station is event_id) and the table usuario (let's say that your station is cedula ).

you could have a table evento_usuario with the form

id_evento | cedula
------------------
    1     | <cedula de Andrés>
    2     | <cedula de Jhon>
    7     | <cedula de Julian>
    7     | <cedula de Nelson>

So you do not need to exploit a text field, but you can directly list the users that are assigned to the event. If you also put a foreign key to this relationship table (and ON UPDATE CASCACE clause), you can even ignore the border case of wanting to change a user's ID. The relationship table is updated in cascade with the new card.

With the structure you have today, if someone edits the name of Julian Caicedo and accentuates it, you lost all its associations to events where it appears with the name without an accent.