2

Передача значения методом POST из <div class="text_color" name ="text2_color"></div>

У меня есть код на Javascript который находит ближайший похожий цвет и мне нужно после того как он его найдет найти его базы данных MySQL. Я хотел это сделать методом POST, только у меня не получается передать значение class="text_color". Как мне это сделать? Помогите пожалуйста.

    <?php
$db = mysql_connect('localhost', 'php_color', '12345');
mysql_query("SET NAMES 'cp1251'");
mysql_select_db("shedow",$db);

//$result = mysql_query("SELECT * FROM color_name WHERE HEX = '$hex'  OR H ='$h_r'  ORDER BY H,S,V") or die(mysql_error());
/*$result = mysql_query("SELECT DISTINCT English_name,Russian_name,HEX,HEX,R,G,B,C,M,Y,K,H,S,V, abs(r-$r)^2+abs(g-$g)^2+abs(b-$b)^2 b FROM color_name ORDER BY R,G,B ASC") or die(mysql_error());*/
$result = mysql_query("SELECT HEX FROM color  ") or die(mysql_error());
$myrow = mysql_fetch_array($result);

/*$options = '';
 do {
 $options .= printf ("%s,", $myrow['HEX']);
}
while($myrow =  mysql_fetch_array($result));
echo "$options";*/
$arr = array();

while($rows = mysql_fetch_array($result)){

    $arr[] = $rows[0];

}

?>
<script>
var r,g,b,base_colors, index;
$(document).ready(function(){
    function getSimilarColors (color) {
         base_colors = <?php echo json_encode($arr); ?>

        //Преобразование RGB, в R, G, B
        var color_rgb = hex2rgb(color);
        var color_r = color_rgb.split(',')[0];
        var color_g = color_rgb.split(',')[1];
        var color_b = color_rgb.split(',')[2];

        //Создание пустого массива для разности между цветами
        var differenceArray=[];

        //Функция ищет наименьшее значение в массиве
        Array.min = function( array ){
               return Math.min.apply( Math, array );
        };

        //Преобразование цвета HEX в массиве  RGB цветов, разделив их запятыми по R-G-B,  узнаем разницу между "цвет" и цветов в массиве
        $.each(base_colors, function(index, value) { 
            var base_color_rgb = hex2rgb(value);
            var base_colors_r = base_color_rgb.split(',')[0];
            var base_colors_g = base_color_rgb.split(',')[1];
            var base_colors_b = base_color_rgb.split(',')[2];

            //Добавить разницу в differenceArray
            differenceArray.push(Math.sqrt((color_r-base_colors_r)*(color_r-base_colors_r)+(color_g-base_colors_g)*(color_g-base_colors_g)+(color_b-base_colors_b)*(color_b-base_colors_b)));
        });

        //Получить наименьшее количество из differenceArray
        var lowest = Array.min(differenceArray);

        //Получить номер index для  lowest 
         index = differenceArray.indexOf(lowest);

        //Функция для преобразования HEX в RGB
        function hex2rgb( colour ) {
            //var r,g,b;
            if ( colour.charAt(0) == '#' ) {
                colour = colour.substr(1);
            }

            r = colour.charAt(0) + colour.charAt(1);
            g = colour.charAt(2) + colour.charAt(3);
            b = colour.charAt(4) + colour.charAt(5);

            r = parseInt( r,16 );
            g = parseInt( g,16 );
            b = parseInt( b ,16);
            return r+','+g+','+b;

        }

        //Возвращение HEX кода
        return base_colors[index];

    }

    //Только для демонстрации
    $('button').click(function(){        
        $('.base_color').css('backgroundColor',$('input').val());
        $('.nearest_color').css('backgroundColor','#'+getSimilarColors($('input').val()));
         $('.text_color').text(getSimilarColors($('input').val()));
        return false;
    });

});
//document.write(base_colors[index]);
//document.write('#'+getSimilarColors($('input').val()));
</script>

<p>
    <!--<input type="text" value="#5D8AA8"/>-->

    <input  type="text" maxlength="6" size="15" id="colorpickerField1" value="00ff00" />

    <button>Get the closest color</button> 
</p>

<p>Base color:</p>
<div class="base_color"></div>

<p>Closest color:</p>
<div class="nearest_color"></div>
<form action='search_color.php' method='post' name='form_s' align='left'>
<div class="text_color" name ="text_color"></div><br>
<span class="text_color" name ="text_color"></span><br>
<input  name='text_color' type='text'  style='width: 10%;' id='hex' /><br>
<input name='submit_s' type='submit' style='width: 20%;'value='Показать информацию о цвете' />
</form>

1 ответ 1

2

Рядом с кодом

$('.text_color').text(getSimilarColors($('input').val()));

добавь

$('.text_color').value(getSimilarColors($('input').val()));

В форму добавь

<input name="Замени_на_другой_name" class="text_color" type="hidden"/>

Это создаст скрытое поле в форме, которое не будет видеть пользователь. Но оно, будет заполнятся твоим скриптом (так как он заполняет по классам и именно для этого поля добавили заполнение value).

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.