[SOLUCIONADO] Recoger el color de la celda seleccionada por el usuario con php

[Novato2013]

Buenas tardes,

He creado unos filtros para una búsqueda, de tal manera que el usuario entra y puede seleccionar el país con un select desplegable donde aparecen los distintos paises y así para varias cosas como categoría, año, color, etc. Una vez que he conseguido los filtros y recibir la opción que marca el usuario para luego buscar en la base de datos con la entrada del usuario, quiero ponerlo más bonito, que no sea un simple select para todo, sino cambiar algunos. De tal manera que para los años he creado un slider el cual funciona perfectamente y ahora para los colores quería crear una tabla de colores para sustituir el select, de tal manera que el usuario pueda marcar la casilla del color q vea y yo poder saber qué casilla ha marcado.

Lo primero que se me ocurrió, es pensar en extrapolar el select a la tabla es decir, el <select> es a <table> como el <option> del select puede ser a <td> de la tabla , pero nada no me funcionó, este es el código inicial q tenía cuando buscaba el color con el select y el cual funciona perfectamente:

Código PHP:

if (isset ($_POST['ColorInput'])) {
    $ColorInput = $_POST['ColorInput'];
    if ($ColorInput !=''){
        if($DataFilter!="") {
            $DataFilter .= " AND ";
        }
        $DataFilter .= "Body_colorgroup_id = " . $ColorInput ." ";
    }
} else {
    $ColorInput = ''; 
}
 

Este if comprueba si el usuario ha seleccionado algún color y si es asi busca en la base de datos usando la variable $DataFilter

Y esta segunda parte, aparte de recoger el color marcado por el usuario lo mantiene en pantalla a pesar de que se recargue la página, de tal manera que cuando se muestren los resultados se muestre tb el color q se seleccionó y no se quede vacío el select.

Código PHP:

<label for="ColorInput"><?php echo $arrMainPage[$MainPageColor]["TextHeader"]; ?></label>
                                    <select name="ColorInput">
                                        <option></option>
                                        <?php 
                                        $rcscolor = $cardata->query($qrycolor);
        
                                        while ($row = $rcscolor->fetch_array(MYSQLI_BOTH)) {
                                            
                                            if ($row["body_colorgroup_id"] == $ColorInput) {
                                                $ColorSelected = "selected";
                                            } else {
                                                $ColorSelected = "";
                                            }
                                            
                                            ?><Option  <?php echo $ColorSelected; ?> value="<?php echo $row["body_colorgroup_id"]; ?>"><?php echo $row["colorDescription"]; ?></option>
                                        <?php
                                        }
                                        
                                        echo "</select>"
                                        ?>                      
                                    </select>
 

Bien, una vez visto que me funcionaba al igual q con otros filtros, he querido ponerlo más bonito como he dicho, y lo primero que hice es lo q he contado simplemente cambiar table por select y option por td, aparte de construir la tabla. Este código no me funcionaba así q no lo posteo más q nada porque ya lo he ido mejorando y no lo tengo tal cual. Ademas no sé si será una burrada lo q intenté pero para mi tiene mucha lógica, ya que una tabla es un menu al igual q el select simplemente q lo muestra en celdas directamente sin ser desplegable, pero bueno, no funciona o no he sabido hacer que funcione.

Luego he usado

Código HTML:

type="hidden"
 

que se supone que es para opciones ocultas al usuario pero no lo pillo muy bien y no sé si me sirve para lo busco, tampoco he conseguido que funcione.

Por último tengo un script que doy la sensación de que se marca la celda, por lo menos el usuario ya sabe que está la celda marcada, pero ahora no sé cómo recoger la celda q ha marcado. el script q he usado es este:

Código Javascript:

<script type="text/javascript">
            var cell = null;
            function press(obj) {
              obj.style.border = '1px solid #46FB04';
              //obj.style.background = 'rgba(70,251,4,0.1)';
              //.trans{ background:rgba(255,255,255,0.6);}
              if (cell != null && cell != obj)
                cell.style.border = '';
              cell = obj;
            }
        </script>
 

Lo he intentado con background pero no consigo q se vea el color marcado asi q lo mejor es cambiar el borde un poco, lo he kerido poner más grueso el borde con más px pero me cambiar el tamaño de las celdas haciendo estás irregulares, así q lo he dejado en 1px, q aunq no se nota mucho pero bueno, lo más importante es poder coger el background para asi tener el color q ha marcado.

El código final que tengo es este:

Código PHP:

<label for="ColorInput"><?php echo $arrMainPage[$MainPageColor]["TextHeader"]; ?></label>
                                <table name="ColorInput" id="ColorsTable" >
                                    <?php 
                                    $arrcolorDescription = array();
                                    
                                    $rcscolor = $cardata->query($qrycolor);
                                    
                                    while ($row = $rcscolor->fetch_array(MYSQLI_BOTH)) {
                                            switch ($row["StructurePK"]) {
                                                case 'Color';
                                                    $arrColor[] = $row;
                                                    break;
                                            }
                                            if ($row["body_colorgroup_id"] == $ColorInput) {
                                                $ColorSelected = "selected";
                                            } else {
                                                $ColorSelected = "";
                                            }
                                    } 
                                    ?>      
                                        <tr>
                                    <?php   
                                            $intCount = 1;
                                            $intHalf =  count($arrColor)/2;
                                            
                                            foreach ($arrColor as $Color => $valueArray){
                                    ?>              <td onclick="press(this)" type="hidden" name="ColorInput" <?php echo $ColorSelected; ?> value="<?php echo $row["body_colorgroup_id"]; ?>" class="<?php echo $valueArray["ClassColor"]; ?>" title="<?php echo $valueArray["colorDescription"]; ?>"> </td>
                                    <?php   
                                                    if ($intCount >= $intHalf) {
                                    ?>
                                                        </tr>
                                                        <tr>
                                    <?php               $intHalf = $intHalf*2;
                                                    }   
 
                                                    $intCount++;
                                                }
                                            unset($valueArray);
                                    ?>  </tr>
                                    
                                </table>
 

Me marca la celda con el evento onclick y el script q he puesto más arriba, pero no me recoge la información.

Si alguien se le ocurre algo, estaría muy agradecido.

Muchas gracias.

Saludos.

[Novato2013]

AVANZANDO...

Poniendo esta nueva línea dentro del script:

Código Javascript:

$(#colorelement).value = obj.class.name;
 

De tal manera que me quedaría así el script:

Código Javascript:

//Select a cell of the table colors
            var cell = null;
            function press(obj) {
              obj.style.border = '3px solid #006DCC';
              $(#colorelement).value = obj.class.name;
              //obj.style.background = 'rgba(70,251,4,0.1)';
              //.trans{ background:rgba(255,255,255,0.6);}
              if (cell != null && cell != obj) {
                cell.style.border = '';
                cell = obj;
              }
            }
 

Y poniendo un input con un hidden después de la tabla de colores que posteé más arriba:

Código HTML:

...</table>                     
                                <input type="hidden" id="colorelement" name="colorelement" value="" />
 

Creo que recojo la información de la celda, pero me está fallando un faltando algo para que termine de funcionar... no termino de entender bien la funcionalidad del hidden, es un input sin más, no sé si es q me falta algo ahí para que funcione bien...

Postearé más cuando avance. Si alguien ve algo se lo agradecería. Gracias.

P.D.: ya pude poner más grueso el borde de la celda (3px) como podeis ver, lo arreglé fijando el tamaño de la celda con una nueva clase aparte.

[Novato2013]

CASI ACABADO

Ya he conseguido recoger el color y marcar la celda correcta y que después de buscar los elementos se me quede la celda marcada, pero si a partir de ahí quiere el usuario realizar una nueva búsqueda al marcar otro color(otra celda) se queda marcada la anterior a no ser que clickees sobre la anterior y entonces ya se desmarca. Creo que es por el comando $_SESSION que guarda el valor de la anterior celda marcada aunque en teoría la parte de clickear es de java y debería de deseleccionarse automaticamente en el primer clickeo en otra celda, pongo el código nuevo:

La parte del filtro del color ahora es así:

Código PHP:

//Color
$ColorFilter='';
 
if (isset ($_POST['colorcar'])) {
    $ColorInput = $_POST['colorcar'];
} elseif (isset( $_SESSION['filter']['colorcar'] )) {
    $ColorInput = $_SESSION['filter']['colorcar'];
} else {// Nothing
}
 
if (isset($ColorInput)) {
        
    if ($ColorInput !=''){
        $_SESSION['filter']['colorcar'] = $ColorInput;
        if($DataFilter!="") {
            $DataFilter .= " AND ";
        }
        
        foreach ($arrColor as $CarColor) {
            if ($CarColor["ClassColor"] == $ColorInput) {
                $ColorFilter = $CarColor["body_colorgroup_id"];
            }
        }
        $DataFilter .= "Body_colorgroup_id = " . $ColorFilter ." ";
    }
}else {
    $ColorInput = ''; 
}
 

Mientras que la que está dentro del form para mostrar al usuario por pantalla la tabla de colores es así:

Código PHP:

<label for="ColorInput"><?php echo $arrMainPage[$MainPageColor]["TextHeader"]; ?></label>
                                <table name="ColorInput" id="ColorsTable" >
                                    <tr>
                                    <?php   
                                        $intCount = 1;
                                        $intHalf =  count($arrColor)/2;
                                            
                                        foreach ($arrColor as $Color){
                                            
                                            if ($Color["body_colorgroup_id"] == $ColorFilter ) {
                                    ?>          <td onclick="press(this)" name="ColorInput" style ="border:3px solid black"  value="<?php echo $Color["body_colorgroup_id"]; ?>" class="<?php echo $Color["ClassColor"]; ?>" title="<?php echo $Color["colorDescription"]; ?>"></td>
                                    <?php   } else {
                                    ?>          <td onclick="press(this)" name="ColorInput"  value="<?php echo $Color["body_colorgroup_id"]; ?>" class="<?php echo $Color["ClassColor"]; ?>" title="<?php echo $Color["colorDescription"]; ?>"></td>
                                    <?php   }   
                                            if ($intCount >= $intHalf) {
                                    ?>
                                    </tr>
                                    <tr>
                                    <?php       $intHalf = $intHalf*2;
                                            }   
                                            $intCount++;
                                        }
                                        /*press(<?php echo $ColorFilter; ?>);*/
                                    ?>  
                                    </tr>
                                </table>                        
                                <input type="hidden" id="colorcar" name="colorcar" value="" />
 

Si os fijais, esta línea dle if:

Código PHP:

if ($Color["body_colorgroup_id"] == $ColorFilter ) {
                                    ?>          <td onclick="press(this)" name="ColorInput" style ="border:3px solid black"  value="<?php echo $Color["body_colorgroup_id"]; ?>" class="<?php echo $Color["ClassColor"]; ?>" title="<?php echo $Color["colorDescription"]; ?>"></td>
 

Es donde le digo que cambie el borde de color si $Color["body_colorgroup_id"] == $ColorFilter , creo que debería ser en esa zona a lo mejor dónde debería de añadir más código para recoger tb la opcion de q el usuario marca un segundo color en la siguiente busqueda elimnandose d la seleccion el primer color seleccionado.

Y este es el javascript que me selecciona la celda de la tabla al hacer click y me cambia el borde de grosor para que el usuario sepa que color está seleccionando:

Código Javascript:

<script type="text/javascript">     
//Select a cell of the table colors
            var cell = null;
            function press(obj) {
                obj.style.border = '3px solid black';
                if (cell != null && cell != obj){
                    cell.style.border = '';
                }
                cell = obj;
                $("#colorcar").attr({
                    value: cell.className
                })
            }
</script>
 

Con todo esto el único detallito que queda es q se desmarque automáticamente la celda marcada cuando el usuario clicke en otro color y no se marquen los dos, pero no sé muy bien como hacerlo.

Thanks

[Novato2013]

Ya lo he arreglado, comparto:

He añadido a la primera condición de mi if de la tabla este ID: "selected-color" q he introducido en el principio de mi script de tal manera que queda asi:

Código Javascript:

//Select a cell of the table colors
            var cell = document.getElementById('selected-color');
            if (cell) {
                press(cell);
            }
            
            function press(obj) {
                obj.style.border = '3px solid black';
                if (cell != null && cell != obj){
                    cell.style.border = '';
                }
                cell = obj;
                $("#colorcar").attr({
                    value: cell.className
                })
            }
 

Y he colocado mi script al final del código para que funcione correctamente en vez de en el head donde estaba antes.

Espero que sirva.

Salu2.