CODEWITHSUNDEEP
phpformslimit
pchees
pchees

Reputation: 43

Limiting the choice of number that can selected in a form to avoid prime numbers

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.

Upvotes: 0

Views: 42

Answers (1)

pchees
pchees

Reputation: 43

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!

Upvotes: 0

Related Questions