Hi this works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="color-picker" value='#276cb8' />
<script>
$(document).ready(function(){
$('#color-picker').spectrum({
type: "flat",
showPaletteOnly: true,
togglePaletteOnly: true,
hideAfterPaletteSelect: true,
showInput: true,
showInitial: true,
clickoutFiresChange: false, //Important
change: function(color) {
console.log(color);
alert(color);
}
});
});
</script>
</body>
</html>
One of the options you set breaks the plugin and I can't remember offhand. I hope you can use this to figure it out, but the code above only alerts when inside the color picker.
Jim
Update:
I was able to get most of your original code to run correctly:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="color-picker" value='#276cb8' />
<script>
$(document).ready(function(){
$('#color-picker').spectrum({
type: "flat",
flat: true,
showInput: true,
preferredFormat: "hex",
showPalette: false,
allowEmpty: true,
showAlpha: false,
clickoutFiresChange: false,
change: function(color) {
var prmColor;
try {
prmColor = color.toHexString(); // #ff0000
}
catch(err) {
console.log(err);
return false;
}
console.log(color);
alert(color);
alert(prmColor);
}
});
});
</script>
</body>
</html>
I can tell you initially I had the same problem but when I just tested it with your code it ran fine.
// frmEmailTmpl.accentColor.value = prmColor;
// console.log("Color: " + frmEmailTmpl.accentColor.value);