Search code examples
phpformslimit

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.


Solution

  • 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!