How to use checkbox to update information in mysql?

Question

How to use checkbox to update information in mysql?

Navigation

#1 by (0 votes)

0

I'm using Ajax to update the database, but I'm passing data by reference, it works and updates in the database, but clicking the button to disable it works but if I click to disable it and then activate , does not work unless you refresh the entire page, follow sample 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><divclass="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 stuck in jquery and ajax, but I think reference is not the solution in this case, but I still can not do it any other way, I wanted to leave the dynamic button.

jquery ajax

asked by anonymous 07.06.2017 / 19:10

1 answer

Long or Date in JSON Connect Flask Restless API to React (Admin-on-rest)

score 0 · Accepted Answer

I was able to make the button dynamically as follows. I added the value attribute to the active (1) or inactive (0) status from the database

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

If I reverse the value of value to be able to use it later, I pass by reference only the id and the value I use jquery to recover using $('id').attr('value'); and after insertion of the data in the dumb bank the value of value to the inverse value to that retrieved by attr() , if that retrieved by attr is 0 the new set value will be 1 and so successively leaving it dynamic, it 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><divclass="switch__container">
  <input id="21" class="switch switch--shadow" value="0" type="checkbox" checked onclick="att_user('21')">
  <label for="21"></label>
</div>