Question

我在表单上有一个部分，我需要验证器检查一个输入的值与另外两个输入的总和。我不知道如何正确编写javascript语法，所以如果措辞错误，我会道歉。

<form id="RSVP-form">

<label> Number of Guests </label>
<input type="number" name="ppl-number" required="required" size="4" maxlength="2" />

<label> Chicken Marsala </label>
<input type="range" name="chicken" min="0" max="10" value="0" />

<label> Steak and Salmon </label>
<input type="range" name="steak" min="0" max="10" value="0" />

<button type="submit">Submit RSVP</button>

</form>

我需要编写一个确认值（“ppl-number”）= value（“chicken”+“steak”）的脚本。不确定如何去做？我已经看了几个例子，但似乎无法在多次尝试后让脚本正常运行。

提前致谢！

Answer 1

只需将事件监听器附加到提交事件并比较这些数字即可。不要忘记，即使您可以将输入类型指定为数字，也会返回一个字符串，需要先将其解析为数字，然后才能进行数学运算。

document.getElementById("RSVP-form").addEventListener("submit", function (e) {
    var form = this,
        amountChicken = parseInt(form.elements.["chicken"].value, 10),
        amountSteak = parseInt(form.elements.["steak"].value, 10),
        peopleCount = parseInt(form.elements.["ppl-number"].value, 10);

    if (amountChicken + amountSteak !=== peopleCount) {
        alert("Portions and people don't match!");
        return false;
    };
});

Answer 2

使用类似的东西：

<script>
function validatecount()
{
    var chicken_count = document.getElementById("chicken").value;
    var steak_count = document.getElementById("steak").value;
    var total = document.getElementById("ppl-number").value;
    var sum = parseInt(chicken_count) + parseInt(steak_count);
    alert(sum);
    alert(total);
    if (sum == total)
    {
    document.RSVP-form.submit();
    } else {
        alert("Error Message!");
    }
}
</script>
<form id="RSVP-form">

    <label> Number of Guests </label>
    <input type="number" name="ppl-number" id="ppl-number"
           required="required" size="4" maxlength="2" />

    <label> Chicken Marsala </label>
    <input type="range" name="chicken" id="chicken" min="0" max="10" value="0" />

    <label> Steak and Salmon </label>
    <input type="range" name="steak" id="steak" min="0" max="10" value="0" />

    <button type="submit" onclick="validatecount()">Submit RSVP</button>

</form>

需要帮助在验证器中添加值

2 个答案: