I have a form that a customer fills in. One of the options is to choose the number of blocks to purchase. This is restricted at the moment from 1 to 49, but I want to restrict the user further to numbers that are not prime and "grey" out any number that is a prime number so that they can't select it.
At the moment I am doing a check after the form is submitted and an error message is generated. To make it more usable I would like to restrict the numbers as the user is selecting them by scrolling through the counter.
The code for the counter is:
<div class="row itemlabel">
<div class="col-lg-7">
Blocks [ Size : 10 pixels X 10 pixels : Min 1 - Max 49 : No Prime Numbers Please]
</div>
<div class="col-lg-2">
<input class="form-control" type="number" value="1" min="1" max="49" id="blockCount"/>
</div>
<div class="col-lg-3"></div>
</div>
I have found answers for limiting checkbox options etc but not a counter. Not sure if it's possible.
Ok
So I created some test code based on the suggestions given. I discovered that the "oninput" event was the correct event type.
The code is as follows:
<!DOCTYPE html>
<html>
<body>
<p>Blocks [ Size : 10 pixels X 10 pixels : Min 1 - Max 49 : No Prime Numbers Please]</p>
<input type="number" value="1" min="1" max="49" id="blockcount" oninput="primenotest()"/>
<p id="demo"></p>
<script>
function primenotest() {
var x = document.getElementById("blockcount").value;
/** check if X is a prime number between 1 and 49 **/
if(x == 3 || x == 5 || x == 7 || x == 11 || x == 13 || x == 17 || x == 19 || x == 23 || x == 29 || x == 31 || x == 37 || x == 41 || x == 43 || x == 47)
{
document.getElementById("demo").innerHTML = "That's PRIME NUMBER. Choose Again!";
}
else
{
document.getElementById("demo").innerHTML = "";
}
}
</script>
</body>
</html>
This works fine and I will incorporate it into my main code.
Thank you!