Получить значение Colorpicker
Доброго времени суток :)
Использую библиотеку Bootstrap Colorpicker 2.2! Необходимо получить значение поля, если делать:
var color_tag = $("#color_tag").val();
то, получаю стандартное значение, так как value не меняется! Как получить код цвета, чтобы отправить его в ajax? |
А документация о чем гласит?
.colorpicker('getValue', defaultValue) Gets the value from the input or the data attribute (if has no input), otherwise returns the default value, which defaults to #000000 if not specified. |
Я не очень знаю JS, в документации я это видел, но не пойму как использовать это :)
|
BMW M6,
var color_tag = $("#color_tag").colorpicker('getValue')
|
Цитата:
|
Код поля формы:
<div id="color_tag_form" class="form-group color_tag">
<label class="col-md-4 control-label">Цвет приставки*</label>
<div class="col-md-4">
<div class="input-group">
<input id="color_tag" value="#ff001f" type="text" class="form-control">
<div class="input-group-addon"><i></i></div>
</div>
</div>
</div>
И такой JS код:
$('#color_tag').change(function(){
var color_tag = $("#color_tag").colorpicker('getValue');
$("#color_tag_form").removeClass("has-success has-error");
if(!color_tag == '') {
if(validateHex(color_tag)) {
$("#color_tag_form").addClass("has-success");
$('#color_tag_result').text(color_tag);
} else {
$("#color_tag_form").addClass("has-error");
}
} else {
$("#color_tag_form").addClass("has-success");
$('#color_tag_result').text('#ff001f');
}
});
|
P.S. Ошибка -> Uncaught TypeError: Cannot read property 'getValue' of undefined
|
BMW M6,
а где сначала?
$(function(){
$('#color_tag').colorpicker();
});
|
BMW M6, условие сами добавьте
$(function(){
$('#color_tag').colorpicker()
.on('changeColor.colorpicker', function(event){
var color_tag = event.color.toHex()
$("#color_tag_form").addClass("has-success");
$('#color_tag_result').text(color_tag );
});
});
|
Заменил на ваш код и не стал делать правки, всё ровно не работает.
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<base href="http://mjolnic.com/bootstrap-colorpicker/" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<link href="src/css/docs.css" rel="stylesheet">
</head>
<body>
<div id="color_tag_form" class="form-group color_tag">
<label class="col-md-4 control-label">Цвет приставки*</label>
<div class="col-md-4">
<div class="input-group">
<input id="color_tag" value="#ff001f" type="text" class="form-control">
<div class="input-group-addon"><i></i></div>
</div>
</div>
</div>
<h1 id="color_tag_result"></h1>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-colorpicker.js"></script>
<script>
$(function(){
$('#color_tag').colorpicker()
.on('changeColor.colorpicker', function(event){
$("#color_tag_form").addClass("has-success");
$('#color_tag_result').text(event.color.toHex());
});
});
</script>
</body>
</html>
|
Значит сейчас буду изучать :)
Спасибо за пример! |
| Часовой пояс GMT +3, время: 08:26. |