HTML Form Number Type Unique User Input

Question

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)

<form id="form1" name="form1" method="post" action="">
<input type="number" name="cake" id="cake" required="required" max="3" min="1"/>Cake     <br />
<input type="number" name="twizlers" id="twizlers"required="required" max="3" min="1"/>Twizlers <br />
<input type="number" name="taffy" id="taffy" required="required" max="3" min="1"/>Taffy <br /><br />
<input type="submit" name="button" id="button" value="Submit" />
</form>

I am using HTML 5 coding to make sure that they only use numbers 1,2, and 3 but how can I make sure they do not use the same number twice? Is there an HTML input code that I can use or is there some javascript code needed? If javascript is needed, what do you suggest?

Answer 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.

Answer 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.