[SOLUCIONADO] Pasando un valor con una función javascript para filtro

[Novato2013]

Buenas estoy intentando poner un evento onclick para seleccionar una banderita y que me busque los elementos de ese pais.
Con los colores lo he conseguido pero ahora me he pillado con las banderas, en teoría es lo mismo pero no consigo pasarle el valor adecuado a la función. Pego código para que se entienda mejor, pongo primero el ejemplo de la tabla de colores que funciona:

Este es mi filtro del color, q aunque es PHP mi duda está en la parte de javascript por eso lo he puesto en esta parte del foro:

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 = ''; 
}
 

Esta es la parte del código donde creo la tabla de colores y la muestro por pantalla para que el usuario pueda clickear en el color que quiera:

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" id="selected-color" 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++;
                                        }
                                    ?>  
                                    </tr>
                                </table>                        
                                <input type="hidden" id="colorcar" name="colorcar" value="" />
 

Y esta es la función javascritp que me permite clickear con el evento onclick y cambia algunas características de la celda seleccionada, como el borde para que dé sensación d que estás seleccionando:

Código Javascript:

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 si no me equivoco con la última parte de la función press en value le pasa el valor de la celda que en este caso es un color.

Bueno pues he intentado lo mismo para las banderitas de los paises, pero esta vez en vez d celdas con imágenes y no me funciona muy bien. Pego código a ver si veis donde me estoy equivocando, yo tengo una ligera idea.

Esta es la parte del filtro de paises:

Código PHP:

//Country
$DataFilter='';
$CountryFilter='';
 
if (isset ($_POST['CountryCar'])) {
    $CountryInput = $_POST['CountryCar'];
} elseif (isset( $_SESSION['filter']['CountryCar'] )) {
    $CountryInput = $_SESSION['filter']['CountryCar'];
} else {// Nothing
}
 
if (isset($CountryInput)) {
    
    if ($CountryInput !=''){
        $_SESSION['filter']['CountryCar'] = $CountryInput;
        if($DataFilter!="") {
            $DataFilter .= " AND ";
        }
        
        foreach ($arrCountry as $CarCountry) {
            if ($CarCountry["ClassCountry"] == $CountryInput) {
                $CountryFilter = $CarCountry["CountryCodePK"];
            }
        }
        $DataFilter .= "Previous_ownerCountry = '" . $CountryFilter ."' ";
    }   
} else {
    $CountryInput = ''; 
}
 

Esto donde muestro por pantallla las banderas para que el usuario elija:

Código PHP:

<label for="CountryInput"><?php echo $arrMainPage[$MainPageCountry]["TextHeader"]; ?></label>
                                <div name="CountryInput" id="CountriesFlags">
                                <?php
                                    foreach ($arrCountry as $Country){
                                        if ($Country["CountryCodePK"] == $CountryFilter ) {
                                ?>          <img onclick="choose(this)" name="CountryInput" id="selected-country" value="<?php echo $Country["CountryCodePK"]; ?>" class="HeightFlags" title="<?php echo $Country["CountryDescription"]; ?>" src="<?php echo $Country["ClassCountry"]; ?>">
                                <?php   } else {
                                ?>          <img onclick="choose(this)" name="CountryInput" value="<?php echo $Country["CountryCodePK"]; ?>" class="HeightFlags" title="<?php echo $Country["CountryDescription"]; ?>" src="<?php echo $Country["ClassCountry"]; ?>">
                                <?php   }   
                                    }
                                ?>  
                                </div>                      
                                <input type="hidden" id="CountryCar" name="CountryCar" value="" />
 

Y esta es la función de javascript que es la parte que peor domino y es donde creo que la estoy liando:

Código Javascript:

//Select a flag
            var flag = document.getElementById('selected-country');
            if(flag) {
                choose(flag);
            }
            
            function choose(obj) {
                obj.style.border = '3px solid #006DCC';
                if (flag != null && flag != obj){
                    flag.style.border = '';
                }
                flag = obj;
                $("#CountryCar").attr({
                    value: flag.value
                    //value: flag.valueName
                    //value: flag.className
                    //value: flag.src
                    //value: flag.srcName
                    //value: flag
                    //value: flag.()
                })
            }
 

Quizás tenga que cambiar lo de attr. que no sé muy bien como funciona sólo sé que para el anterior si que me funcionó pero era una clase, ahora le tengo que pasar el valor que viene dentro de value -> value="<?php echo $Country["CountryCodePK"]; ?> creo, pero no lo consigo.
Cuando pongo lo mismo que para los colores, es decir uso flag.className e imprimo por pantalla el valor de $CountryInput para ver que está cogiendo me sale que coge la clase HeightFlags.

Alguien me ayuda??

Muchas gracias.

Saludos.

[andinog]

Hola, hay algo que no entiendo, ¿estas usando jQuery?

Lo digo porque en una linea pones:

Código Javascript:

var cell = document.getElementById('selected-color');
 

y en otra linea pones

Código Javascript:

$("#colorcar").attr({
                    value: cell.className
                })
 

En caso de que utilices jQuery, la forma de asignar un valor es

Código Javascript:

$('#colorcar').val(      valor     );
 

Saludos

[Novato2013]

Iniciado por andinog

Hola, hay algo que no entiendo, ¿estas usando jQuery?

Lo digo porque en una linea pones:

Código Javascript:

var cell = document.getElementById('selected-color');
 

y en otra linea pones

Código Javascript:

$("#colorcar").attr({
                    value: cell.className
                })
 

En caso de que utilices jQuery, la forma de asignar un valor es

Código Javascript:

$('#colorcar').val(      valor     );
 

Saludos

Hola Andinog, gracias por responder.

En cuanto a tu pregunta: en esa parte no estoy usando jquery, lo que hago en la primera sentencia es detectar si ha presionado la celda y recoger el valor de la celda presionada y luego lo paso a mi filtro para que entre en la base de datos con ese valor. De todas formas la parte del color funciona perfectamente, la había puesto como ejemplo por si servía de algo.

Ya he conseguido que me funcione la parte de las banderas tb, ahora sólo necesito que cuando se clickee en una que ya está seleccionada se deseleccione.

Pego la solución d lo que preguntaba.

Esta es la parte del filtro de país:

Código PHP:

//Country
$DataFilter='';
$CountryFilter='';
 
if (isset ($_POST['CountryCar'])) {
    $CountryInput = $_POST['CountryCar'];
} elseif (isset( $_SESSION['filter']['CountryCar'] )) {
    $CountryInput = $_SESSION['filter']['CountryCar'];
} else {// Nothing
}
 
if (isset($CountryInput)) {
    
    if ($CountryInput !=''){
        $_SESSION['filter']['CountryCar'] = $CountryInput;
        if($DataFilter!="") {
            $DataFilter .= " AND ";
        }
        
        foreach ($arrCountry as $CarCountry) {
            if ($CarCountry["ClassCountry"] == substr($CountryInput,-1*strlen($CarCountry["ClassCountry"]))) {
                $CountryFilter = $CarCountry["CountryCodePK"];
            }
        }
        $DataFilter .= "Previous_ownerCountry = '" . $CountryFilter ."' ";
    }   
} else {
    $CountryInput = ''; 
}
 

Esta es la parte donde muestro las banderas por pantalla, que he pegado en el anterior post pero ahora está cambiado el código:

Código PHP:

<label for="CountryInput"><?php echo $arrMainPage[$MainPageCountry]["TextHeader"]; ?></label>
                                <div name="CountryInput" id="CountriesFlags">
                                <?php
                                    foreach ($arrCountry as $Country){
                                        if ($Country["ClassCountry"] == substr($CountryInput, -1*strlen($Country["ClassCountry"]))) {
                                ?>          <img onclick="choose(this)" name="CountryInput" id="selected-country" class="HeightFlags" title="<?php echo $Country["CountryDescription"]; ?>" src="<?php echo $Country["ClassCountry"]; ?>">
                                <?php   } else {
                                ?>          <img onclick="choose(this)" name="CountryInput" class="HeightFlags" title="<?php echo $Country["CountryDescription"]; ?>" src="<?php echo $Country["ClassCountry"]; ?>">
                                <?php   }   
                                    }
                                ?>  
                                </div>                      
                                <input type="hidden" id="CountryCar" name="CountryCar" value="" />
 

Y esta es la parte de javascript que me permite seleccionar la bandera:

Código Javascript:

//Select a flag
            var flag = document.getElementById('selected-country');
            if(flag) {
                choose(flag);
            }
            
            function choose(obj) {
                obj.style.border = '3px solid #006DCC';
                if (flag != null && flag != obj){
                    flag.style.border = '';
                }
                flag = obj;
                $("#CountryCar").attr({
                    value: flag.src
                })
            }
 

Si os fijais en el value al final he puesto flag.src que es lo lógico ya que es una imagen, lo único que no me funcionaba porque me cogí toda la dirección de la imagen pero lo he solucionado con substr.

Espero que sirva a alguien.

Si a alguien se le ocurre cómo sería para clickear otra vez sobre el color o la bandera seleccionada y que se borre los bordes así como el valor pasado a SESSION si no es la primera búsqueda, estaría bien saberlo.

Muchas gracias.

[Novato2013]

Ya lo he averiguado, dejo la solución por si le sirve a alguien:

Código Javascript:

//Select a flag
            var flag = null;
            var selectedFlag = document.getElementById('selected-country');
            if(selectedFlag) {
                choose(selectedFlag);
            }
            
            function choose(obj) {
                if (obj == flag){
                    obj.style.border = '';
                    flag = null;
                    $("#CountryCar").attr({
                        value: ''
                    })
                } else {
                    obj.style.border = '3px solid #006DCC';
                    if (flag != null && flag != obj){
                        flag.style.border = '';
                    }
                    flag = obj;
                    $("#CountryCar").attr({
                        value: flag.src
                    })
                }   
            }
 

Saludos.