Question

I have a section on a form where I need the validator to check the value of one input against the sum of two other inputs. I do not know how to write javascript syntax correctly, so I apologize if this is worded incorrectly.

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

I need to write a script that will confirm value(“ppl-number”) = value(“chicken”+”steak”). Not sure how to go about doing that? I’ve looked at several examples but can’t seem to get a script to function properly after several attempts.

Thanks in advance!

Answer 1

Use something like this:

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