Dans la dernière partie du code, j'ai plus d'une case à cocher. J'ai une zone de texte d'entrée nommée livello qui doit stocker sa valeur dans la base de données mysql. Les cases à cocher ne sont pas fixes en nombre mais peuvent varier si l'administrateur en ajoute à la base de données. Donc, sur la base de ce code
<!--Add Utente Modal -->
<div id="aggiungi" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<form method="post" class="form-horizontal" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Aggiungi UTENTE</h4>
</div>
<div class="modal-body">
<input type="hidden" name="edit_id" value="<?php echo $id; ?>">
<div class="form-group">
<label class="control-label col-sm-2" for="username">Username:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="username" name="username" required autofocus> </div>
<label class="control-label col-sm-2" for="password">Password:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="password" name="password" required> </div>
</div>
<br>
<br>
<div class="form-group">
<label class="control-label col-sm-2" for="nome">Nome:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="nome" name="nome" required> </div>
<label class="control-label col-sm-2" for="cognome">Cognome:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="cognome" name="cognome" required> </div>
</div>
<br>
<br>
<div class="form-group">
<label class="control-label col-sm-2" for="sesso">Sesso:</label>
<div class="col-sm-4">
<select id="sesso" name="sesso" >
<option value=" "> </option>
<option value="m">Maschio</option>
<option value="f">Femmina</option>
</select>
</div>
<label class="control-label col-sm-2" for="posizione">Posizione:</label>
<div class="col-sm-4">
<select id="posizione" name="posizione" >
<option value=" "> </option>
<option value="Staff">Staff</option>
<option value="Operatore">Operatore</option>
</select>
</div>
</div>
<br>
<br>
<div class='form-group'>
<?php
$sql = "SELECT id, posizione, nome
FROM user_livelli";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$id = $row['id'];
$posizione = $row['posizione'];
$nome = $row['nome'];
?>
<input type='checkbox' name='nome_posiz[]'/> <?php echo $nome; ?>
<div id='show' class='col-sm-4'></div>
<?php
}
}
?>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="livello">Livello:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="livello" name="livello"> </div>
</div>
<script>
let oShow=document.getElementById('show');
let oInput=document.getElementById('livello');
let oCol=Array.from( document.querySelectorAll('.form-group > input[type="checkbox"]') );
let livello=new Array( oCol.length ).fill( '0', 0, oCol.length );
oInput.value=livello.join('');
oCol.forEach( (chk,index)=>{
chk.addEventListener('change',function(e){
livello.splice(index,1,this.checked ? '1':'0' );
oShow.innerHTML=livello.join('');
oInput.value=livello.join('');
});
})
</script>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="add_utente"><span class="glyphicon glyphicon-plus"></span> Aggiungi</button>
<button type="button" class="btn btn-warning" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Annulla</button>
</div>
</form>
</div>
</div>
</div>
Lorsque j'ajoute un nouvel UTENTE (utilisateur), j'aimerais avoir Livello à 000000 car les 6 cases à cocher ne sont pas cochées. Lorsque je coche une ou plusieurs cases à cocher, Livello remplace immédiatement la valeur par exemple par 100011.
PS en modification Le script fonctionne très bien pour ajouter un nouvel utilisateur où l'administrateur coche la case nécessaire. Comment le script peut-il être modifié pour modifier les données utilisateur. Dans ce cas, les cases à cocher sont cochées ou non (et cette partie fonctionne déjà), livello a une valeur comme 0010011100 Je voudrais que la valeur livello soit imprimée à l'intérieur de la boîte de saisie livello et que cette valeur puisse également changer si je coche ou décoche les cases à cocher
3 Réponses :
Vous pouvez utiliser quelque chose comme
$livello = "";
if(isset($_POST['checkbox1']){
$livello .= "1";
} else {
$livello .= "0";
}
if(isset($_POST['checkbox2']){
$livello .= "1";
} else {
$livello .= "0";
}
Les attributs d'ID DOIVENT être uniques dans le DOM. Donc, plutôt que d'attribuer à chacun le même jeu d'ID que le nom de l'élément - et d'utiliser la syntaxe de style tableau.
Je ne suis pas un utilisateur de jQuery mais je suis sûr qu'il est possible de le faire dans jQuery avec probablement seulement des modifications mineures à ce qui suit. Ce qui suit utilise document.querySelectorAll pour trouver une référence à TOUTES les cases à cocher et attribue un simple auditeur à chacune.
<div class='form-group'>
<input type='checkbox' name='check[]' value='1' />aaa
<input type='checkbox' name='check[]' value='1' />bbb
<input type='checkbox' name='check[]' value='1' />ccc
<input type='checkbox' name='check[]' value='1' />ddd
<input type='checkbox' name='check[]' value='1' />eee
<input type='checkbox' name='check[]' value='1' />fff
<div id='show' class='col-sm-4'></div>
</div>
<!-- as per comment, unclear where in the DOM this snippet lives however -->
<div class='form-group'>
<label class='control-label col-sm-2' for='livello'>Livello:</label>
<div class='col-sm-4'>
<input type='text' class='form-control' id='livello' name='livello'>
</div>
</div>
let oShow=document.getElementById('show');
let oInput=document.getElementById('livello');
let oCol=Array.from( document.querySelectorAll('.form-group > input[type="checkbox"]') );
let livello=new Array( oCol.length ).fill( '0', 0, oCol.length );
oCol.forEach( (chk,index)=>{
chk.addEventListener('change',function(e){
livello.splice(index,1,this.checked ? '1':'0' );
oShow.innerHTML=livello.join('');
oInput.value=livello.join('');
});
})
C'est exactement ce dont j'ai besoin mais je dois l'intégrer dans ma page modale bootstrap
hélas, je ne peux y offrir que peu d’aide car je ne connais que rien des technologies concernées. Cela implique-t-il simplement la conversion en code jQuery?
Comment puis-je envoyer la valeur 'livello' de la jquery à
J'ai changé le code comme vous l'avez suggéré, mais comme vous pouvez le voir sur l'image (j'ai modifié mon message), la valeur livello est hors de la zone de saisie livello. J'ai également besoin de sa valeur pour l'envoyer à une table lorsque j'appuie sur le bouton Aggiungi. Merci
le code de votre extrait fonctionne parfaitement, il y a un problème avec le BOOTSTRAP Modal
devrait être id = "aggiungi" dans Modal <....>? la jquery fait référence à id = "show"
Je n'utilise pas jQuery ou Modals ... Je ne suis pas sûr de ce que vous voulez dire ou quel est ce problème. scusi
Comme dit, le code du professeur fonctionne très bien. Je voudrais voir la chaîne à l'intérieur de livello dès que le code démarre. Par exemple, si vous modifiez la ligne bbb en bbb Je voudrais voir 0100 pendant que le code s'exécute
@ MassimoD.N. pouvez-vous utiliser jquery?
Je pense que oui. Je ne suis ni javascript ni jquery
@ MassimoD.N. Je vois .. ici est une solution avec jquery a également ajouté des commentaires au code afin que vous puissiez comprendre.
Grâce au code jquery fourni par Swati, je comprends que pour voir la chaîne (tous les zéros qui sont tous décochés) à l'intérieur de livello dès que le code démarre, il suffit d'ajouter oInput.value = livello.join (''); après la déclaration de chaîne dans le javascript. Merci beaucoup
En PHP, faites-vous isset () sur chaque case à cocher? S'ils ne sont pas cochés, ils n'apparaîtront pas dans leur POST ou GET
Je pense que vous confondez
valeuravec un booléen (d'une manière binaire que vous avez inventée?). Cela ne sert pas à ce que la case à cocher soit cochée ou non.