0

Using PHP and html i am trying to create a web page that has 4 number inputs that the user can use to place values in a certain order. My problem is that if the user selects one number I don't want the user to be able to select the same number again.

I cannot find a reference that allows this type of thing to be possible I can only find how to restrict min and max values.

  • Not a complete match, but [HTML text input allow only numeric input](https://stackoverflow.com/a/469419/1291879) will help to get you started. You can then loop through any previous values for a match. BTW, using the [`type="number"` option may not be what you want](https://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in). – Tigger Apr 08 '19 at 11:45

1 Answers1

1

As @Emma already mentioned you will need some type of JavaScript code on the client to check the user input. Usually I would go for jquery to simplify things a bit but it depends on your preference, i. e. which library or framework you want to work with.

Below is a very short example (MVP) in plain JavaScript, showing a possible approach for doing this kind of input check:

var num=document.getElementsByClassName('sequence');
for (var i=num.length;i--;) num[i].addEventListener('change',function(ev){
  for (var i=num.length;i--;) {
  if (ev.target!==num[i] && ev.target.value==num[i].value)
     console.log("illegal repetition of "+ev.target.value);
  }
})
<input type="number" name="num[]" class="sequence" value="1"/>
<input type="number" name="num[]" class="sequence" value="2"/>
<input type="number" name="num[]" class="sequence" value="3"/>
<input type="number" name="num[]" class="sequence" value="4"/>
Carsten Massmann
  • 26,510
  • 2
  • 22
  • 43