color handler changing CSS

Question

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.

_"to change the background color of pull quotes "_ What is "pull quotes" ? — guest271314, Nov 07 '15 at 22:31
a Pull Quote is a snippet of text that is displayed on the side in a box, and with larger text generally. It is a Jquery function. — Griehle, Nov 08 '15 at 22:07

score 0 · Accepted Answer · edited May 23 '17 at 12:23

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>

JSFIDDLE

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);
        }
    });
});

I was able to use this as a guide to get my project working as intended and your help was greatly appreciated! — Griehle, Nov 08 '15 at 03:21
I can get it to work in JSfiddle, but when I copy that code over to a live site, it says that color is not defined. I don't know why that is. I have even copied all the code straight over from the fiddle. — Griehle, Nov 08 '15 at 22:05
I did. I was using 1.11.0 and I tried that in fiddle. It worked, I tried updating to 2.x whatever you were using. I also have the draggable that the form is in. the draggable does not work in fiddle, does live. The color change does not work live, but does in fiddle. http://jsfiddle.net/Griehle/eet7cbuL/14/ — Griehle, Nov 08 '15 at 22:40
I tested it. It works fine but you really messed up the jQuery. Check my updated answer. — Kostas Mitsarakis, Nov 08 '15 at 23:06
You have to bind events in $(document).ready(function() {}); to take place. — Kostas Mitsarakis, Nov 08 '15 at 23:10

color handler changing CSS

1 Answers1