Javascript — JS — Picker только первый работает

я использую Bootstrap Colorpicker 2.1 для отображения двух палитр цветов в форме.
Все работает нормально, используя один вход, однако, когда я добавляю второй, работает только первый. Возможно, потому что они разделяют тот же класс …

Любая идея, почему это происходит?

<form method="post">

<p><?php _e("Box 1: " ); ?>
<input
class="form-control demo"data-horizontal="true"id="demo_forceformat"placeholder="<?php echo $box1?>"type="text"name="box1"value="<?php echo $box1?>"size="20">
<?php _e(" Default: rgba(14,112,209,1)" ); ?></p>

<p><?php _e("Box 2 " ); ?>
<input
class="form-control demo"data-horizontal="true"id="demo_forceformat"placeholder="<?php echo $box2?>"type="text"name="box2"value="<?php echo $box2?>"size="20">
<?php _e(" Default: rgba(144,112,209,1)" ); ?></p>

0

Решение

это может быть связано с общим идентификатором.

идентификаторы должны быть уникальными для каждого элемента на странице.

менять id="demo_forceformat" в id="demo_forceformat2"или, что еще лучше, имеют те же значения для свойства id, что и свойство name. Общепринято использовать одинаковые значения идентификатора и имени для элементов формы.

0

Другие решения

Мне нужно было вызвать функцию с помощью

$(function(){
$('#demo_forceformat_2').colorpicker({
format: 'rgba', // force this format
horizontal: true
});
});
0