Search code examples
javascriptphpjscolor

Get jscolor to work with many different inputs

I am using jscolor and I need it to change the color on 5 different inputs in the same code. The problem I am having it, when I change the color on one, it either changes it on all of them or it will just pick the last one.

They have instructions but I don't understand them. Any help would be great.

Here is some of my code:

For Input 1:

<input style="width:130px; font-size:14px; padding:5px;" class="jscolor {width:243, height:150, position:'right',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666', onFineChange:'update(this)'}" id="htcolor" name="htcolor" value="<?php echo $r['htcolor']?>">

For Input 2:

<input style="width:130px; font-size:14px; padding:5px;" class="jscolor {valueElement:'onecolor', width:243, height:150, position:'right',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666', onFineChange:'update(this)'}" id="onecolor" name="onecolor" value="<?php echo $r['onecolor']?>">

Here is the function code:

function update(jscolor) {

$(".htcolor").css("color", jscolor);

$(".onecolor").css("color", jscolor);

 }

I really need help with this. Thank you!

I ended up doing it this way and it works...

$('#htcolor').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".htcolor").css("color", valueSelected);
 });
Solution

  • Is that jQuery in use at the last part of your post? If so, should that not be:

    $("#htcolor").css("color", jscolor);
$("#onecolor").css("color", jscolor);

    ...to get the element IDs ?

    Also, what "instructions" were you viewing ... can you provide a link to the source?