Saber que imagenes estan marcadas y enviar petición

[neodani]

Buenas,

Tengo un listado de imagenes/iconos que al ser pulsados se iluminan porque mediante un toggleclass les añado o quito una clase.

La idea que busco es que el usuario seleccione las imagenes pulsando encima y que luego pulsando un boton de enviar, envíe la información de que imagenes se han pulsado al servidor. Me sirve con el identificador de la imagen, ya que las imagenes que se muestran vienen de la base de datos.

Tengo la parte de marcar las imagenes, pero no consigo ver de qué forma puedo saber cuales quedan marcadas para que pulsando el botón enviar me las envíe al servidor.

Debo tener un <form> y un botón submit para poderlo hacer? es lo recomendable o puedo recopilar la info en alguna capa oculta y mediante ajax enviar la información al servidor?

¿Cómo lo haríais vosotros?

Dejo el codigo actual, que solo me muestra el total, y no el id de cada imagen que fue marcada...

Código Javascript:

$(document).ready(function() {
    $("li").click( function () {
        $(this).toggleClass('activo');
        var n = $('.activo').length;
        $("span.total").text("Hay " + n + " elementos seleccionados");
    });
});
 

Muchas gracias de antemano

[quike88]

Hola,

Para obtener los id de las imágenes, podrías usar each().

Código Javascript:

$(".activo").each(function(){
    $("span.total").append("id seleccionado: "+$(this).attr("id")+", ");
});
 

Ahora.. para enviar esta información, puedes hacer de las 2 formas que propones. Puedes tener un <form> con un campo oculto donde almacenes la info antes de enviarla, o bien enviar esta información por AJAX.

Saludos!

[neodani]

Gracias,

Tengo la siguiente lista, el identificador lo he colocado en el <li>, la forma que dices funciona va recopilando los id's, lo que pasa que te los va sumando.

<ul class="lista">
<li id="1"><img src="imagen1.png"/></li>
<li id="2"><img src="imagen2.png"/></li>
<li id="3"><img src="imagen3.png"/></li>
<li id="4"><img src="imagen4.png"/></li>
<li id="5"><img src="imagen5.png"/></li>
<li id="6"><img src="imagen6.png"/></li>
</ul>

Código Javascript:

$("li").click( function () {
        $(this).toggleClass('activo');
        $(".activo").each(function(){
            $("span.total").append($(this).attr("id")+", ");
        });
    });
 

Si selecciono el 1, 2 y 3, y desmarco el 2 por ej. me debería decir que tengo marcados el 1 y el 3. Sin embargo me muestra todo esto: 1, 1, 2, 1, 2, 3, 1, 3,

¿Se os oscurre alguna forma para que añada o quite elementos de forma correcta? :S

Muchas gracias de antemano

[quike88]

Hola,
Para el ejemplo que te dí, bastaría con borrar el contenido de <span>:

Código PHP:

$("li").click( function () {
        $(this).toggleClass('activo');
        $("span.total").empty();
        $(".activo").each(function(){
            $("span.total").append($(this).attr("id")+", ");
        });
    });
 

Saludos!

[neodani]

Gracias quike88! muy útil!

Estoy probándolo y parece que todo bien, se guarda una coma al final que no sé quitar, pero es un detalle menor, cuando reciba los datos ya la trataré.

Lo bueno es que diste en el clavo.

Un saludo

[neodani]

Una pregunta más!

Si el campo es cualquier elemento que no sea un formulario lo tengo, pero quiero guardarlo en un campo hidden de un formulario xD

¿Cómo guardo los valores en un hidden dentro del "value"?

Lo he probado dandole un id al input pero me los guarda despues del input, no dentro del campo value

Incluso se leer los datos de un campo
$("#nombrecampo").val();

Pero no escribir en él...

<input type="hidden" id="categorias" name="categorias" value="" />

Muchas gracias de antemano!

[neodani]

Lo he probado también intentando coger el valor del span... ya que el span tengo bien los valores e intentandolo meter en el value del campo hidden pero no lo consigo

Código Javascript:

$("span.total").empty();
            $("#suscripcion_categorias li.activo").each(function(){
                $("span.total").append($(this).attr("id")+", ");
                var value = $("span.total").val();
                $("#categorias").attr('value', value);
            });
 

[neodani]

Tenia un error al coger el valor del contenido del span, en lugar de .val() era .html()

Código Javascript:

$("span.total").empty();
            $("#suscripcion_categorias li.activo").each(function(){
                $("span.total").append($(this).attr("id")+", ");
                var value = $("span.total").html();
                $("#categorias").attr('value', value);
            });
 

Pero este metodo es un poco cutre tener que tener una capa span entre medias...

¿No se puede ir agrupando directamente los valores en el campo value del campo hidden?

Muchas gracias de antemano

[quike88]

Hola,

podrías guardar los valores en un array y luego volcarlos en el atributo value de tu input.

Código Javascript:

$("li").click( function () {
        var datos = new Array();
        var i = 0;
        $(this).toggleClass('activo');
        $(".activo").each(function(){
            datos[i] = $(this).attr("id");
             i++;
        });
        $("#categorias").attr('value', datos.join(','));
    });
 

Saludos!

[neodani]

Iniciado por quike88

Hola,

podrías guardar los valores en un array y luego volcarlos en el atributo value de tu input.

Código Javascript:

$("li").click( function () {
        var datos = new Array();
        var i = 0;
        $(this).toggleClass('activo');
        $(".activo").each(function(){
            datos[i] = $(this).attr("id");
             i++;
        });
        $("#categorias").attr('value', datos.join(','));
    });
 

Saludos!

Lo clavaste, funciona de 10!

Muchas gracias crack!