Two colours from a colour picker

JavaScript
1

I have modified the code below from the jquery Mini colors demo and it seems to work - passes the colour selected to a php page. I do not have to use the Mini colors code if there is a better option.

I have now moved on a bit and I would like to select two colours and send them to the php page and I assume they will be in an array. How can I stop the first colour being sent until the second is picked?

EDIT: I might also set it up so the user can also input the colour directly. One other problem is when you select the colour range on the tall side image that is sent before you can pick it on the square detail image.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery MiniColors</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <!-- MiniColors -->
  <script src="../MiniColors/jquery.minicolors.js"></script>
  <link rel="stylesheet" href="../MiniColors/jquery.minicolors.css">

  <script>
    $(document).ready( function() {

      $('.demo').each( function() {

        $(this).minicolors({
          control: $(this).attr('data-control') || 'hue',
          defaultValue: $(this).attr('data-defaultValue') || '',
          format: $(this).attr('data-format') || 'hex',
          keywords: $(this).attr('data-keywords') || '',
          inline: $(this).attr('data-inline') === 'true',
          letterCase: $(this).attr('data-letterCase') || 'lowercase',
          opacity: $(this).attr('data-opacity'),
          position: $(this).attr('data-position') || 'bottom left',
          swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
          change: function(value, opacity) {
            if( !value ) return;
            if( opacity ) value += ', ' + opacity;
            if( typeof console === 'object' ) {
              console.log(value);
			  $.post("output.php", {"colour1": value},
			  function(data){console.log(data);
			});;
            }
          },
		  
        });

      });

    });
	
  </script>		 
</head>
<body>
            <div class="form-group">
              <label for="inline">Inline</label>
              <br>
              <input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db">
            </div>
          
</body>
</html>
2

Hey Rubble,

I’m sure we can sort this out. Frst question:

Could you use <input type="color"> ?

3

Thank you for the idea Pullo but I was worried about browser support. It appears to work OK in Chrome and Firefox but not IE - as stated on the web anyway. Currently I can not try Edge as I do not have it installed on this PC or Safari. Looking at browser stats the biggest and latest browsers support it

It looks a nice method as the colour picker does not register the colour until the OK button is pressed.

Yes I think I would be happy giving it a go.

4

Ok, cool.

So you want to pick two colors and pass them on to a PHP script. Would it be ok to have two separate color pickers for this purpose, or do you need to use the same input for both colors.

5

I think two separate ones would be better as the user could see what their first choice was. Also they could change it if they wanted to before submission?

6

Yup, my thoughts exactly. In this case, when should the info be submitted to the PHP script?

One possibility is that it happens via Ajax when both fields have a value. Another possibility would be to use a simple form.

7

The automatic method is nice but if we have a simple form with a submit button that will allow the user to check they have selected the correct colours and change one if required.

8

So the form submission should be via Ajax?

9

The colours will be sent to a php page along with a image path ( I had forgot this as I am testing with hardcoded values ). The image will be modified and the modified image is to be displayed on the original page; so we defiantly need a form to hold the image path as well as the two colours. So this means using Ajax?

We worked on this site a few years ago if you remember. I am updating it a bit and trying to remember how everything worked.

10

Ok, I’m tied up right now but I’ll have a look at this soon and post back here.

I do. Time flies, eh?

11

Hey man, I’d do it like this.
I’ve left it a bit bare bones, for you to fill in the gaps with whatever you need, but I’ll be happy to help further.


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Color pickers</title>
  </head>
  <body>
    <form>
      <div class="form-group">
        <label for="color-1">Color 1</label><br>
        <input type="color" id="color-1">
        <div></div>
      </div>
      <div class="form-group">
        <label for="color-2">Color 2</label><br>
        <input type="color" id="color-2">
        <div></div>
      </div>

      <button>Submit</button>
    </form>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
      var colorInputs = $("input[type='color']");
      colorInputs.on("change", function(){
        $(this).next().text(this.value)
      });

      $("form").on("submit", function(e){
        e.preventDefault();
        $.ajax({
          url: '/path/to/file',
          type: 'POST',
          data: {
            color1: colorInputs[0].value,
            color1: colorInputs[1].value,
          },
        })
        .done(function() {
          console.log("success");
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
      });

      colorInputs.trigger("change");
    </script>
  </body>
</html>
12

Thank you very much @James_Hibbard

All works well after one minor change; you had “color1: colorInputs[0].value,” twice and no color2

Onto the next stage now of adding an image to the form and displaying the result on the same page.

The colour pickers are interesting as the Edge browser has three sliders and will not work unless you set each slider. The Firefox one will not work on the large image you have to select a square colour swatch.

EDIT: Not trying to pick fault but for other people that may view this there is a missing ] here: $(“input[type=‘color’”); The code still worked without it.

13

No worries. I’ll get the post updated to remove the typo :slight_smile:

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.