HTML Form Number Type Unique User Input

I am using the code below to ask users to rank (prioritize) which sweets they like the best. The users need to rank from 1-3 (1 being the best)

Solution 1:

<script type="text/javascript">
    function item() {
        cake = Number(document.getElementById('cake').value);
        twizlers = Number(document.getElementById('twizlers').value);
        taffy = Number(document.getElementById('taffy').value);
        if (cake == twizlers) {
            alert("Some alert cake or twizlers");
            return false;
        } else if (twizlers == taffy) {
            alert("Some alert taffy or twizlers");
            return false;
        } else if (taffy == cake) {
            alert("Some alert taffy or cake");
            return false;
        } else {
            return true;
        }
    }
</script>

This will work, otherwise you can use radio button.

Solution 2:

You can go with a JS check that the user only rank 1 item with a single value and cant rank that item again. You can use JS to do this.Insert an ID for your input field and then

    document.getElementById("your_id").disabled = false;
    document.getElementById("your_id").disabled = false;
    document.getElementById("your_id").disabled = false;

    var var1 = document.getElementById("your_id");
    var1.onchange = function () {
    if (this.disabled == true) {
     document.getElementById("your_id").disabled = true;
     }
    }

Thus check this for three items.

Share