ID attributes MUST be unique within the DOM. So, rather than assigning each with the same ID set that as the element’s name – and use the array style syntax.
I’m not a user of jQuery but I’m sure it is feasible to do this in jQuery with probably only minor modifications to the following. The below uses document.querySelectorAll to find a reference to ALL the checkboxes and assigns a simple listener to each.
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('');
});
})
<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>
You could use something like
$livello = "";
if(isset($_POST['checkbox1']){
$livello .= "1";
} else {
$livello .= "0";
}
if(isset($_POST['checkbox2']){
$livello .= "1";
} else {
$livello .= "0";
}
Thanks to the jquery code provided by Swati, I understand that to see the string (all zeros that is all unchecked) inside livello as soon as the code start, just add oInput.value=livello.join(”); after string declaration in the javascript. Thanks so much
In the last part of the code, i have more than one checkbox. I have an input textbox named livello that must store its value to mysql database.
The checkboxes are not fixed in number but can vary if the admin add some to the data base. So based on this 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>
When i add a new UTENTE (user), i would like to have Livello at 000000 because the 6 checkboxes are unchecked. When i check one or more checkboxes, Livello immediately change value to for example 100011.
PS in edit
The script works very well for add a new user where the admin check the necessary checkbox.
How can the script be changed for edit user data.
In this case the checkbox are checked or not (and this part already works), livello have a value like 0010011100
I would like livello value printed inside livello input box and that this value could also change if i check or uncheck checkboxes
In PHP are you doing isset() on each check-box? If they aren’t checked, then they won’t appear in their POST or GET
This is exactely what i need but i need to integrate it in my bootstrap modal page
alas I can offer little assistance there as I know less than nothing about the involved technologies. Does that merely involve converting to jQuery code?
i changed the code as you suggested but as you can see from the image (i edited my post) the livello value is out of livello input box. I also need its value to send it to a table when i press the Aggiungi Button. Thank you
@MassimoD.N. I see..
