Imprimí en la pantalla 16 iconos (pequeñas imágenes).

Ahora quiero poder seleccionar iconos, y cuando presiono un botón, los ID de los iconos seleccionados se enviarán en un formulario.

Vi en la red solo casillas de verificación y listas de selección múltiple, ¿cuál es la mejor manera de hacer esto?

(Soy bastante nueva en diseño web)

Gracias por delante!

1
Blank6 24 jul. 2011 a las 01:14

2 respuestas

La mejor respuesta

Esta podría ser una forma de usar Javascript o jQuery. Prefiero la versión jQuery, ya que separa el controlador de clic del marcado, en lugar de usar controladores en línea onclick, que en general se desaconsejan.

Lo que esto hace es usar una matriz de elementos input, que puede crear agregando [] al nombre del elemento. Esta misma técnica se puede usar en SELECT sy otros elementos, ya que le indica al servidor que se ha enviado una matriz, a diferencia del valor conocido por una sola clave.

<html>
<head>
<style type="text/css">
div img {
    cursor: pointer;
    border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
    if (id != '' && !document.getElementById('input_'+id)) {
        var img = document.createElement('input');
        img.type = 'text';
        img.id = 'input_'+id;
        img.name = 'images[]';
        img.value = id;

        document.imageSubmit.appendChild(img);
    }
}
$(document).ready(function(){
    $('#jqueryimages img').click(function(){
        setFormImage(this.id);
    });
});
</script>
</head>
<body>
<pre><?php 

if (count($_GET['images'])) {
    print_r($_GET['images']);
}

?></pre>
<div style="float: left; width: 49%;">
    <h1>Plain ol' HTML</h1>
    1. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-1" onclick="setFormImage(this.id)"/>
    <br/>
    2. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-2" onclick="setFormImage(this.id)"/>
    <br/>
    3. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-3" onclick="setFormImage(this.id)"/>
    <br/>
    4. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-4" onclick="setFormImage(this.id)"/>
</div>
<div id="jqueryimages" style="float: left; width: 49%;">
    <h1>jQuery</h1>
    5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-5"/>
    <br/>
    6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-6"/>
    <br/>
    7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-7"/>
    <br/>
    8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-8"/>
</div>
<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
    <input type="submit" value="View Selected"/>
</form>
</body>
</html>
0
Jared Farrish 26 nov. 2019 a las 15:08

Probar esto

var idArray = [];
$("#container-id img").each(function(index,value){
idArray.push($(value).attr("id"));
});
//do anything with the array
0
Parv Sharma 23 jul. 2011 a las 21:22