I am trying to make it possible to change the background color of pull quotes by using the input type="color" tag in a form. my HTML is as follows
<form action="change.php" method="post">
name: <input type="text"><br/>
email: <input type="email" id="email"><br/>
<label for="background-color">Choose a color for background :</label>
color: <input type="color" name="bgcolor"><br/>
<input type="submit" name="submit" value="Submit">
</form>
You see I was trying to do it in PHP by getting the color value from a POST , but I would reay like to solve this question in Jquery if possible.
You can achieve this with something like the following. You need an id attribute for you input. Then on blur event you will change the div background color with the input value if it is valid.
Also, you have to include jQuery in html <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
HTML:
<input type="text" name="bgcolor" id="bgcolor" maxlength="6" placeholder="Hex representation of the color">
JQuery:
$(document).ready(function() {
$('#bgcolor').on('change', function() {
var color = $(this).val();
var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#'+color)
if (isOk) { //If input is a valid representation of a color
$('#your_div_id').css('background-color', '#'+color);
}
});
});
isOk regex from here.
Or using type="color":
HTML:
<input type="color" name="bgcolor" id="bgcolor" value="">
JQuery:
$(document).ready(function() {
$('#bgcolor').on('change', function() {
var color = $(this).val();
$('#your_div_id').css('background-color', color);
});
});
UPDATE:
Move the following inside $(document).ready(function () { like this:
$(document).ready(function () {
$('span.pq').each(function () {
var quote = $(this).clone();
quote.removeClass('pq');
quote.addClass('pullquote');
$(this).before(quote);
}); //end each
$('#note').draggable();
$('#bgcolor1').on('change', function () {
var color = $(this).val();
$('#id1').css('background-color', color);
});
$('#bgcolor2').on('change', function () {
var color = $(this).val();
var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#' + color)
if (isOk) { //If input is a valid representation of a color
$('#id1').css('background-color', '#' + color);
}
});
});