Correct way to add multiple attributes

JavaScript
1

Is this a correct way to make two attributes available while generating the option tag:

function colorInfo(data) {
    console.log("Color Info");
    console.log(data);
    let colorData = JSON.parse(data);

    console.log(colorData);

    $.each(colorData, function (key, value) {
      console.log("Key = "+key);
      console.log("Value = "+value);
      $("#lineupColors").append(
        $("<option></option>")
          .attr("value", value.colorId+" | "+value.colorCode)
          .text(value.colorName)
      );
    });
  }

And it shows it like this in the HTML:

<select id="lineupColors" name="lineupColors">
      <option value="-">--Please select a color--</option>
      <option value="1 | #0000FF   ">Blue      </option><option value="2 | #FFA500   ">Orange    </option><option value="3 | #FF0000   ">Red       </option><option value="4 | #008000   ">Green     </option><option value="5 | #6C0BA9   ">Purple    </option><option value="6 | #7C4700   ">Brown     </option><option value="7 | #000000   ">Black     </option><option value="8 | #FF00FF   ">Magenta   </option></select>

So my goal is to use the hex code in the front end code to handle colors and use the numerical value to store it in the database.

2

Maybe I got your question wrong, but why not use CSS variables instead? A micro database sort of…

3

I would just… use the hex as the value (because you want to use it immediately), and when it comes time to store it in the database, translate the hex for storage. (or for that matter… just store the value. an INT field holding 1 2 3 4 or 5 is the same as an INT field holding 16777215 (FFFFFF).

1 Like
4

Hi @Jack_Tauson_Sr, if the hex value is being used in the frontend only, you might store it on a data-* attribute (say data-color) instead. This way it won’t get submitted with the form (or included in form data to be sent with AJAX) and you don’t need to preprocess the actual value to only submit the numerical part.

But as @m_hutley noted, why store it in the database with an entirely different value in the first place… just convert hex to int and vice versa.

5

As already set. Remove the id column in your database and make the color code column the primary key. It makes no sense to have the same color two times in the db, so it’s a perfect primary index to use the color code.

6

The backswing of this of course is that you will need to validate the data received from the form, regardless of the method used.

You’re giving a defined set of options (Blue, Red, etc) to the user; the color space contains 16 million values, so you’d need to validate that the form input is one of the colors you accept. (You would have to do this even if using 1,2,3…, because a user could send 0, or 100).

7

Thanks. I went with this option so that I could grab the value to store it in database and use the code to use in the UI wherever necessary.

function colorInfo(data) {
    let colorData = JSON.parse(data);

    $.each(colorData, function (key, value) {
      const colorObject = {
        colorId: value.colorId,
        colorCode: value.colorCode,
      };
      $("#lineupColors").append(
        $("<option></option>")
          .attr("value", JSON.stringify(colorObject))
          .text(value.colorName)
      );
    });
  }

But thinking about using the hex value or data-* attribute as suggested in this thread.

Also, there are only going to be 8 colors in my scenario that user could choose.

8

This is a list of valid web colour/color names.

If these include the exact colours you want e.g. blue, which is #0000FF, then I would have thought just a data-colour=‘blue’ or data-colour=‘magenta’ should suffice.

If they don’t match what you are after, then couldn’t you pass in the colour names and use a lookup table of your own?

e.g. something like this

$colours = {
  'blue' => '#0000FF',
  'magenta' => '#FF00FF',
  ...
}

$colours[$colour]