1

For the creation of a paint manufacturer website, the product page is required to give the user the option of either entering a RAL colour code or choosing a colour using a colour selector.

To do this, I've used:

<p class="line-item-property__field">
  <label for="ral-colour-code">RAL Colour Code</label>
  <input required class="required" id="ral-colour-code" type="text" name="properties[RAL Colour Code]">
</p>

<p class="line-item-property__field">
  <label for="choose-a-colour">OR Choose a colour</label>
  <input  id="choose-a-colour" type="color" name="properties[Choose a colour]">
</p>

This achieves the main goal, in that the user's choice of colour is included in the confirmation order that the company receives. However, my concern is that in some cases a user may pick a colour using the selector, then input an accurate colour code - both of which will be included in the confirmation. I'd imagine the best practice would be to disable one input upon entry of text into the other input, however it would need to be clear to the user which of the two options were going to be the one applied to their order.

What' I've attempted: After doing a bit of digging I found a similar question answered here. So I attempted that:

jQuery(function ($) {
 var $inputs = $('properties[RAL Colour Code],properties[Choose a colour]');
  $inputs.on('input', function () {
// Set the required property of the other input to false if this input is not empty.
  $inputs.not(this).prop('required', !$(this).val().length);
 });
});

This returned the following error:

Error: Syntax error, unrecognized expression: properties[RAL Colour Code],properties[Choose a colour]

In addition to the error, I think this might not be the solution I'm looking for, as that simply removes the required tag, but presumably the user stil has the option to fill in both.

Sam Johnson
  • 742
  • 1
  • 8
  • 24

1 Answers1

3

Try this:

<input type="text" id="choose" />
<input type="text" id="write" />

and jQuery:

$("#choose, #write").keyup(function(){
  if($("#choose").val() != "") {
    $("#write").hide();
  }else if($("#write").val() != "") {
    $("#choose").hide();
  }else{
    $("#write").show();
    $("#choose").show();
  }
});

Here is working fiddle for you

New fiddle that covers your needs. Clear color button is added, your ids are used and event for input type="color" has changed to .change()

JSEvgeny
  • 2,550
  • 1
  • 24
  • 38
  • Thats embarrassing. I hit the wrong button. Sorry :) – Jamiec Jan 11 '18 at 10:23
  • @Jamiec it's ok :D Just wondered why and I'm happy to hear that it wasn't because of my mistake)) – JSEvgeny Jan 11 '18 at 10:25
  • I've tried what you suggested (the fiddle is exactly the functionality I'm after), but it doesn't work. It's not throwing any errors either. I've tried using `console.log('')` between each stage and they aren't showing up either. – Sam Johnson Jan 11 '18 at 10:26
  • @SamJohnson have you changed the id's to the ones you're using? (eg `#ral-colour-code` from `#choose`). – Jamiec Jan 11 '18 at 10:27
  • yeah - so the colour code box has `id='ral-colour-code write'` and the colour picker has `id='choose-a-colour choose'` – Sam Johnson Jan 11 '18 at 10:31
  • It's because for type="color" input you need to use .change() event, just a sec i'll make a new fiddle for you – JSEvgeny Jan 11 '18 at 10:34
  • Thanks a lot! So the second input box is disappearing when I enter something into the code entry box. However, the 'clear-color' isn't working. Obviously you had it as ` – Sam Johnson Jan 11 '18 at 10:51
  • There will be no issue with that, but you will need to add some styles so user would recognize that it's clickable. And can you please mark my answer as the correct one if it helped you, I'll appreciate that – JSEvgeny Jan 11 '18 at 10:57
  • Hmmm - it's not working. I've created a fiddle with what I have, as obviously I've tweaked your code to match the functionality I already have. https://jsfiddle.net/8dLkyncr/ - thanks again. – Sam Johnson Jan 11 '18 at 11:02
  • Your fiddle works well, I see no problems with it at all. – JSEvgeny Jan 11 '18 at 11:04
  • That's odd - the clear color button doesn't work for me at all? I've tested in Chrome and Firefox. – Sam Johnson Jan 11 '18 at 11:06
  • Your fiddle is working, try to put the button from a back to p and simply add some styles to p button element, also check that all the ids are correct. But the fiddle that u sent work perfectly. Try to change color from black to another one first, the text input will disappear and then press clear button and it will appear again – JSEvgeny Jan 11 '18 at 11:10
  • Ahh the issue was I was entering the code, then trying to clear it. But I've added that functionality now. Thanks for your time! – Sam Johnson Jan 11 '18 at 11:16