How do I use checkbox to update information in mysql?

Question

I’m using the Ajax to update the database, but I am passing data by reference, it works and updates in the database, but if you click the button to disable it works but if I click to disable and then on, it doesn’t work unless you update the whole page, follows example code.

function att_user(id, valor) {  
  alert('Desativando');
        $.ajax({
            type: "POST",
            url: "#",
            data: {
                id: id,
                valor: valor
            },
            success: function (result) {
                //$('body').text(result);
                alert('Success!');
            }
        });
    }

.switch__container {
        margin: 5px auto;
        width: 60px;
    }

    .switch {
        visibility: hidden;
        position: absolute;
        margin-left: -9999px;
    }

    .switch + label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        user-select: none;
    }

    .switch--shadow + label {
        padding: 2px;
        width: 60px;
        height: 30px;
        background-color: #dddddd;
        border-radius: 30px;
    }
    .switch--shadow + label:before,
    .switch--shadow + label:after {
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        bottom: 1px;
        content: "";
    }
    .switch--shadow + label:before {
        right: 1px;
        background-color: #d43f3a;
        border-radius: 30px;
        transition: background 0.4s;
    }
    .switch--shadow + label:after {
        width: 31px;
        background-color: #fff;
        border-radius: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transition: all 0.4s;
    }
    .switch--shadow:checked + label:before {
        background-color: #8ce196;
    }
    .switch--shadow:checked + label:after {
        transform: translateX(30px);
    }

    /* Estilo Flat */
    .switch--flat + label {
        padding: 2px;
        width: 60px;
        height: 30px;
        background-color: #dddddd;
        border-radius: 30px;
        transition: background 0.4s;
    }
    .switch--flat + label:before,
    .switch--flat + label:after {
        display: block;
        position: absolute;
        content: "";
    }
    .switch--flat + label:before {
        top: 2px;
        left: 2px;
        bottom: 2px;
        right: 2px;
        background-color: #fff;
        border-radius: 30px;
        transition: background 0.4s;
    }
    .switch--flat + label:after {
        top: 4px;
        left: 4px;
        bottom: 4px;
        width: 56px;
        background-color: #dddddd;
        border-radius: 52px;
        transition: margin 0.4s, background 0.4s;
    }
    .switch--flat:checked + label {
        background-color: #8ce196;
    }
    .switch--flat:checked + label:after {
        margin-left: 60px;
        background-color: #8ce196;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch__container">
  <input id="21" class="switch switch--shadow" type="checkbox" checked onclick="att_user('21', '0')">
  <label for="21"></label>
</div>

I’m still crawling in jquery and ajax, but I believe reference is not the solution in this case, but I still could not do otherwise, I wanted to leave the dynamic button.

Answer 1

I managed to make the button dynamic, as follows. added the attribute value with active (1) or inactive (0) status value coming from the database

<input type="checkbox" value="0" /> <!-- se inativo value 1, ativo value 0 -->

Yes I reverse the value of value to be able to use it later, and pass by reference only the id and the value I use jquery to recover using $('id').attr('value'); and after insertion of the data into the silent database the value of the value for the inverse value to that recovered by attr(), if the recovery by attr is 0 the new set value will be 1 and so successively leaving it dynamic, is not a correct alternative, but it was the one that solved the problem at the time.

function att_user(id) {  
var valor = $('#21').attr('value');  
        $.ajax({
            type: "POST",
            url: "#",
            data: {
                id: id,
                valor: valor
            },
            success: function (result) {
                if(valor == 1){
                    $('#func'+id).val(0);
                    alert('Ativado');
                }else if(valor == 0){
                    $('#func'+id).val(1);
                     alert('Desativado');
                }
               
            }
        });
    }

.switch__container {
        margin: 5px auto;
        width: 60px;
    }

    .switch {
        visibility: hidden;
        position: absolute;
        margin-left: -9999px;
    }

    .switch + label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        user-select: none;
    }

    .switch--shadow + label {
        padding: 2px;
        width: 60px;
        height: 30px;
        background-color: #dddddd;
        border-radius: 30px;
    }
    .switch--shadow + label:before,
    .switch--shadow + label:after {
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        bottom: 1px;
        content: "";
    }
    .switch--shadow + label:before {
        right: 1px;
        background-color: #d43f3a;
        border-radius: 30px;
        transition: background 0.4s;
    }
    .switch--shadow + label:after {
        width: 31px;
        background-color: #fff;
        border-radius: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transition: all 0.4s;
    }
    .switch--shadow:checked + label:before {
        background-color: #8ce196;
    }
    .switch--shadow:checked + label:after {
        transform: translateX(30px);
    }

    /* Estilo Flat */
    .switch--flat + label {
        padding: 2px;
        width: 60px;
        height: 30px;
        background-color: #dddddd;
        border-radius: 30px;
        transition: background 0.4s;
    }
    .switch--flat + label:before,
    .switch--flat + label:after {
        display: block;
        position: absolute;
        content: "";
    }
    .switch--flat + label:before {
        top: 2px;
        left: 2px;
        bottom: 2px;
        right: 2px;
        background-color: #fff;
        border-radius: 30px;
        transition: background 0.4s;
    }
    .switch--flat + label:after {
        top: 4px;
        left: 4px;
        bottom: 4px;
        width: 56px;
        background-color: #dddddd;
        border-radius: 52px;
        transition: margin 0.4s, background 0.4s;
    }
    .switch--flat:checked + label {
        background-color: #8ce196;
    }
    .switch--flat:checked + label:after {
        margin-left: 60px;
        background-color: #8ce196;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch__container">
  <input id="21" class="switch switch--shadow" value="0" type="checkbox" checked onclick="att_user('21')">
  <label for="21"></label>
</div>