HTML 表单编号类型唯一用户输入

Question

我正在使用下面的代码要求用户对他们最喜欢的糖果进行排名（优先排序）。用户需要从 1-3 排名（1 为最佳）

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

我正在使用 HTML 5 编码来确保它们只使用数字 1、2 和 3，但我如何才能确保它们不会使用相同的数字两次？是否有我可以使用的 HTML 输入代码，或者是否需要一些 javascript 代码？如果需要javascript，你有什么建议？

Answer 1

您可以使用 JS 检查用户只对具有单个值的 1 个项目进行排名并且不能再次对该项目进行排名。您可以使用 JS 为您的输入字段做 this.Insert 一个 ID，然后

    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;
     }
    }

因此检查这三个项目。

Answer 2

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

这会起作用，否则您可以使用单选按钮。

HTML 表单编号类型唯一用户输入

HTML Form Number Type Unique User Input

html

javascript

forms

numbers

unique