How to check some input according to the value of a json, jquery?

Question

How to check some input according to the value of a json, jquery?

Navigation

#1 by (0 votes)

0

Good morning, I currently generate a list of coupons dynamically in the following way:

var cupones_bienvenida = $('.cupones_bienvenida');
                        var tipoCupon ='';

                        $.each(response.data, function (i) {
                            if (response.data[i].Sub_Tipo == 1){
                                tipoCupon = "Cupón 1";
                            }
                            else if(response.data[i].Sub_Tipo == 2){
                                tipoCupon = "Cupón 2";
                            }
                            else{
                                tipoCupon = "Cupón 3";
                            }


                              $('<tr class="cupones"/>')
                                    .append($('<td/>').addClass('nuevo-td td-cuponera-costarica')
                                        .append($('<label/>').addClass('label-checkbox item-content').text(response.data[i].Nombre)))
                                    .append($('<td/>').addClass('label-cell nuevo-td').append($('<p class="td-parrafor-cupcostarica"/>').text(tipoCupon))
                                        .append($('<p class="td-parrafor-cupcostarica"/>').text("Descuento: "+response.data[i].Descuento)))


                                    .append('<div class="cod_cupon" style="display:none">' + response.data[i].Identificador + '</div>')
                                    .append('<div class="descuento_cupon" style="display:none">' + response.data[i].Descuento + '</div>')
                                    .append('<div class="tipo_cupon" style="display:none">' + response.data[i].Tipo_cupon + '</div>')
                                    .append('<div class="sub_tipo" style="display:none">' + response.data[i].Sub_Tipo + '</div>')
                                    .append('<div class="vencimiento" style="display:none">' + response.data[i].Fecha_vence + '</div>')

                                    .append($('<td/>').addClass('label-cell nuevo-td')
                                                .append($('<label/>').addClass('label-checkbox item-content')
                                                            .append('<input type="checkbox" name="cupon_check" class="cupon_check" value="' + response.data[i].Identificador + '"/>')
                                                            .append($('<span/>').addClass('item-media').append('<i class="icon icon-form-checkbox"></i>'))))
                                    .appendTo(cupones_bienvenida);
                             if (cantidad_llaves === 0) {
                                $('.cupon_check').prop('disabled', true)
                            }

                            });

$('.cupones_bienvenida').on('click','.cupon_check', function(e){
        //Aca obtengo los valores del listado dinamico
    });

It turns out that when selecting the checkboxes

Everything works well for me, the detail arises when I make a change of sight, for example I am in 'pagina / coupons.html' and then when I go to another view as 'pagina / principal.html', when returning to coupons.html the selected information has been deleted.

Then I intend to generate a json with the information of the coupons list. But I have the doubt as to how this json should be structured and then how to reload this json to the list so that the information is not affected, that is, it is only temporarily saved.

jquery json

asked by JG_GJ 26.09.2018 в 18:01

source

1 answer

PHP - Twitter reverse auth credentials Javascript is not updated instantly on my website

score 0 · Answer 1

You can use the localStorage property to store the value of your inputs and set them each time you load your html.

In this way, to save the value of your checksbox:

function guardar(){
    var checkbox1 = document.getElementById('checkbox1');
    var checkbox2 = document.getElementById('checkbox2');
    //...
    if(checkbox1.checked) {
        localStorage.setItem('checkbox1', 1);
    }
    if(checkbox2.checked){
        localStorage.setItem('checkbox2', 1);
    }
    //...
}

to set them again in the HTML:

function leer(){    
    var checkbox1 = JSON.parse(localStorage.getItem('checkbox1'));
    var checkbox2 = JSON.parse(localStorage.getItem('checkbox2'));

    if (checkbox1 == "1") {
        document.getElementById("checkbox1").setAttribute('checked','checked');
    }
    if (checkbox2 == "1") {
        document.getElementById("checkbox2").setAttribute('checked','checked');
    }
}

Then, when moving between views executed guardar() to save the current state of the checkboxes and leer() to set them every time an HTML is loaded. It may look something like this:

<html>
<script>

function guardar(){
        var checkbox1 = document.getElementById('checkbox1');
        var checkbox2 = document.getElementById('checkbox2');
        //...
        if(checkbox1.checked) {
            localStorage.setItem('checkbox1', 1);
        }
        if(checkbox2.checked){
            localStorage.setItem('checkbox2', 1);
        }
        //...
    }
}
function leer(){    
        var checkbox1 = JSON.parse(localStorage.getItem('checkbox1'));
        var checkbox2 = JSON.parse(localStorage.getItem('checkbox2'));

        if (checkbox1 == "1") {
            document.getElementById("checkbox1").setAttribute('checked','checked');
        }
        if (checkbox2 == "1") {
            document.getElementById("checkbox2").setAttribute('checked','checked');
        }
    }
function pasarAOtroTab(){
    guardar();
    window.location.assign("otraPagina.html");
}

function destroy(){
location.reload();
localStorage.clear();
}

</script>

<body onload="leer();">

<input type="checkbox" id="checkbox1">1e film van de dag</input>
<input type="checkbox" id="checkbox2">1e film van de dag</input>
<button onclick="pasarAOtroTab();">Otro Tab</button>
<button onclick="destroy();">Limpiar localStorage</button>
</body>

</html>

There are more direct ways to do this control, but I leave it as simple as possible so that it is understood more quickly.