Pass ID value through Toggle

Question

Pass ID value through Toggle

Asked 5 years, 4 months ago

Viewed 20 times

1

I have the following toggle:

It works perfectly, but I would like to put it in a way that works individually for each record that comes from the comic book, but I’m not getting it. Look at:

CSS

<style type="text/css">
    .onoff input.toggle {
    display: none;
}

.onoff input.toggle + label {
    display: inline-block;
    position: relative;
    box-shadow: inset 0 0 0px 1px #d5d5d5;
    height: 30px;
    width: 70px;
    background: #DC143C;
    border-radius: 30px;
}

.onoff input.toggle + label:before {
    cursor: pointer;
    content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0  Não";
    display: block;
    color: #FFF;
    height: 30px;
    border-radius: 30px;
    background: rgba(19, 191, 17, 0);
    transition: 0.1s ease-in-out;
}

.onoff input.toggle + label:after {
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    top: 0;
    left: 0px;
    border-radius: 30px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: 0.1s ease-in-out;
}

.onoff input.toggle:checked + label:before {
    cursor: pointer;
    width: 70px;
    content: "\00a0 \00a0 \00a0 Sim";
    color: #FFF;
    font-family: 'Arial';
    background: #13bf11;
}
.onoff input.toggle:checked + label:after {
    left: 40px;
    box-shadow: inset 0 0 0 1px #13bf11, 0 2px 4px rgba(0, 0, 0, 0.2);
}
#estado{ font-size: 14px; font-weight: bold;}
</style>

PHP

<table class="table table-striped">
 <thead>
   <tr>
     <td>Nome</td>
     <td>Ativo?</td>
   </tr>
  </thead>
  <tbody>
<?php
...
$c = 1;
while($pe = mysqli_fetch_object($sql))
{
?>
   <tr>
     <td><?php echo $pe->Nome; ?></td>
     <td>
       <div class="onoff">
         <input type="checkbox" data-id="<?php echo $pe->IdCadastros; ?>"  class="toggle" id="onoff">
         <label for="onoff"></label>
         <input type="hidden" name="Avisar" id="campo<?php echo $c; ?>" value="0">
       </div>
    </td>
  </tr>
<?php
$c++; }
?>
 </tbody>
</table>

JQUERY

    <script type='text/javascript'>
//<![CDATA[
window.onload=function(){

var onoff = document.getElementById('onoff');

onoff.addEventListener('change', function() {
    var id = $(this).attr('data-id');
    estado = this.checked ? 'S' : 'N';
    var campo = document.getElementById("campo1").value = estado;

    $.ajax({
        url: '<?php echo $caminhoAbsoluto; ?>/status.php',
        type: 'post',
        data: {
           estado: this.checked,
           campo: campo
       },success: function(data) {
         //alert();
         console.log(data);
        }

      }).done(function(msg) {

   });
});
}//]]>
///////////////////
</script>

How can I make it work individually for each record?

1

Individually that you refer to you don’t need to use the selector per id, so you don’t have to create a Function for each id name?

– hugocsl

2019/07/15 at 23:08
1

Hi Hugo. I made a change in my post. In the list will appear the toogle for each user. Need so that when changing the status to yes or no, pass the value of the user ID to Jquery and make the change of the status of each in the database.

– user24136

2019/07/15 at 23:10
My question is more in passing the ID of each user through Toogle by Jquery, because the change in BD I am doing with PHP and everything is Ok.

– user24136

2019/07/15 at 23:13
1

Now it became clearer the problem, but qq forna, I do not know answer rss :D

– hugocsl

2019/07/15 at 23:15
kkkkkkk quiet

– user24136

2019/07/15 at 23:22
1

Then you’ll submit the whole form or it’s just that same Ajax?

– Sam

2019/07/15 at 23:22
Hi Sam. This... I made a change to my post. I used the data-id attribute. I don’t know if it’s the right way, but Paree that now just need to pass this value by url.

– user24136

2019/07/15 at 23:26
1

change this var id = $(this). attr('data-id'); so var id = $(".toggle"). attr('data-id'); and run a test

– Lucas Antonio

2019/07/15 at 23:33

Show 3 more comments

1 answer

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2019-07-15T23:32:49+00:00

To avoid repeating button ids, concatene the variable $c PHP in your ids:

id="onoff<?php echo $c; ?>"

And the for of label also:

<label for="onoff<?php echo $c; ?>">

And you could do that, by taking the change of the buttons by the id that they all start the same with onoff*, thus: $("input[id^='onoff']"). Or if only these buttons have the class .toggle, can take by the class: $(".toggle"). But you can use jQuery syntax even in most code:

document.addEventListener("DOMContentLoaded", function(){ // aguarda o DOM ser carregado

   $("input[id^='onoff']").on("change", function(){

      var id = $(this).data('id');
      var estado = this.checked ? 'S' : 'N';
      var campo = $(this).closest("div").find(":hidden").val(estado);
      $.ajax({
         url: '<?php echo $caminhoAbsoluto; ?>/status.php',
         type: 'post',
         data: {
            id: id, // data-id
            estado: estado, // S ou N
            campo: campo[0].id //  id do input hidden
         },
         success: function(data) {
            console.log(data);
         }
      }).done(function(msg){
      });

   });

});

Example:

document.addEventListener("DOMContentLoaded", function(){
   
   $("input[id^='onoff']").on("change", function(){
      
      var id = $(this).data('id');
      var estado = this.checked ? 'S' : 'N';
      var campo = $(this).closest("div").find(":hidden").val(estado);
      $.ajax({
         url: '<?php echo $caminhoAbsoluto; ?>/status.php',
         type: 'post',
         data: {
            id: id, // data-id
            estado: estado, // S ou N
            campo: campo[0].id //  id do input hidden
         },
         success: function(data) {
            console.log(data);
         }
      }).done(function(msg){
      });
      
   });
   
});

.onoff input.toggle {
    display: none;
}

.onoff input.toggle + label {
    display: inline-block;
    position: relative;
    box-shadow: inset 0 0 0px 1px #d5d5d5;
    height: 30px;
    width: 70px;
    background: #DC143C;
    border-radius: 30px;
}

.onoff input.toggle + label:before {
    cursor: pointer;
    content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0  Não";
    display: block;
    color: #FFF;
    height: 30px;
    border-radius: 30px;
    background: rgba(19, 191, 17, 0);
    transition: 0.1s ease-in-out;
}

.onoff input.toggle + label:after {
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    top: 0;
    left: 0px;
    border-radius: 30px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: 0.1s ease-in-out;
}

.onoff input.toggle:checked + label:before {
    cursor: pointer;
    width: 70px;
    content: "\00a0 \00a0 \00a0 Sim";
    color: #FFF;
    font-family: 'Arial';
    background: #13bf11;
}
.onoff input.toggle:checked + label:after {
    left: 40px;
    box-shadow: inset 0 0 0 1px #13bf11, 0 2px 4px rgba(0, 0, 0, 0.2);
}
#estado{ font-size: 14px; font-weight: bold;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
 <thead>
   <tr>
     <td>Nome</td>
     <td>Ativo?</td>
   </tr>
  </thead>
  <tbody>
   <tr>
     <td>Nome1</td>
     <td>
       <div class="onoff">
         <input type="checkbox" data-id="123" class="toggle" id="onoff1">
         <label for="onoff1"></label>
         <input type="hidden" name="Avisar" id="campo1">
       </div>
    </td>
  </tr>
   <tr>
     <td>Nome2</td>
     <td>
       <div class="onoff">
         <input type="checkbox" data-id="456" class="toggle" id="onoff2">
         <label for="onoff2"></label>
         <input type="hidden" name="Avisar" id="campo2">
       </div>
    </td>
  </tr>
 </tbody>
</table>