Javascript Disable button until 3 or more input fields have a value

Question

I have 6 input fields in my html page like so:

<div class='inputBox'>
        <form action="/" method="post">
            <div>
                <label>Angle of A = </label>
                <input class='field' autocomplete="off" autofocus name="A" type="number">
            </div>
            <div>
                <label>Angle of B = </label>
                <input class='field' autocomplete="off" autofocus name="B" type="text">
            </div>
            <div>
                <label>Angle of C = </label>
                <input class='field' autocomplete="off" autofocus name="C" type="text">
            </div>
            <div>
                <label>Side Length of a = </label>
                <input class='field' autocomplete="off" autofocus name="a" type="text">
            </div>
            <div>
                <label>Side Length of b = </label>
                <input class='field' autocomplete="off" autofocus name="b" type="text">
            </div>
            <div>
                <label>Side Length of c = </label>
                <input class='field' autocomplete="off" autofocus name="c" type="text">
            </div>

            <div>
                <button id='calculate' disabled="true" class='field' type="submit">Calculate</button>
            </div>
        </form>
</div>

I would like the button to be disabled until any 3 out of the 6 fields have a value. Here is my javascript code:

        function enableButton()
        {
            var filled = 0;
            var fields = [...document.getElementsByClassName("field")];
            for (var i = 0; i < 6; i++)
            {
                if (fields[i].length() > 0)
                {
                    filled += 1;
                }
            }
            if (filled >= 3)
            {
                document.getElementById("calculate").disabled = false;
            }
            else
            {
                document.getElementById("calculate").disabled = true;
            }
        }

Unfortunately the button stays disabled despite the number of fields that have a value.

Answer 1

Try using a change event to the input fields, I have used onkeyup function to invoke the enableButton function. Instead of checking fields[i].length() try to check whether fields[i].value exist or not. Here is a working sample.

 function enableButton() { var filled = 0; var fields = [...document.getElementsByClassName("field")]; for (var i = 0; i < 6; i++) { if (fields[i].value) { filled += 1; } } if (filled >= 3) { document.getElementById("calculate").disabled = false; } else { document.getElementById("calculate").disabled = true; } }

 <div class='inputBox'> <form action="/" method="post"> <div> <label>Angle of A = </label> <input class='field' autocomplete="off" autofocus name="A" type="number" onkeyup="enableButton()"> </div> <div> <label>Angle of B = </label> <input class='field' autocomplete="off" autofocus name="B" type="text" onkeyup="enableButton()"> </div> <div> <label>Angle of C = </label> <input class='field' autocomplete="off" autofocus name="C" type="text" onkeyup="enableButton()"> </div> <div> <label>Side Length of a = </label> <input class='field' autocomplete="off" autofocus name="a" type="text" onkeyup="enableButton()"> </div> <div> <label>Side Length of b = </label> <input class='field' autocomplete="off" autofocus name="b" type="text" onkeyup="enableButton()"> </div> <div> <label>Side Length of c = </label> <input class='field' autocomplete="off" autofocus name="c" type="text" onkeyup="enableButton()"> </div> <div> <button id='calculate' disabled="true" class='field' type="submit">Calculate</button> </div> </form> </div>

Answer 2

that ?

I just added an id on the form element, and transformed the Id attribute of the button into name, so that I only have the for to declare as const

and also remove all unnecessary divs in the form, light code is always easier to read

 const myForm = document.getElementById('my-form') , inFields = [...myForm.querySelectorAll('input.field')] ; myForm.oninput=()=> { let count = inFields.reduce((a,c)=>a+=(c.value.trim().length >0)?1:0,0) myForm.calculate.disabled = (count <3) } myForm.onreset=()=> { myForm.calculate.disabled = true }

 label, input, button { display: block; float: left; margin: .3em; } label, button:first-of-type { clear: both; } label { width: 10em; line-height: 2.3em; text-align: right; }

 <form action="/" method="post" id="my-form"> <label>Angle of A = </label> <input class='field' autocomplete="off" autofocus name="A" type="number"> <label>Angle of B = </label> <input class='field' autocomplete="off" autofocus name="B" type="text"> <label>Angle of C = </label> <input class='field' autocomplete="off" autofocus name="C" type="text"> <label>Side Length of a = </label> <input class='field' autocomplete="off" autofocus name="a" type="text"> <label>Side Length of b = </label> <input class='field' autocomplete="off" autofocus name="b" type="text"> <label>Side Length of c = </label> <input class='field' autocomplete="off" autofocus name="c" type="text"> <button type="reset">reset</button> <button name='calculate' disabled="true" class='field' type="submit">Calculate</button> </form>

Answer 3

You might've had a few problems with that function, but the main problem is that you never call the enableButton function. The code below calls it whenever one of the fields are changed.

 function enableButton() { let filled = 0; let fields = document.getElementsByClassName("field"); for (let i = 0; i < fields.length; i++) { if (fields[i].value != "") { filled++; } } if (filled > 2) { document.getElementById("calculate").removeAttribute("disabled"); } else { document.getElementById("calculate").setAttribute("disabled", ""); } }

 <div class='inputBox'> <form action="/" method="post"> <div> <label>Angle of A = </label> <input class='field' autocomplete="off" autofocus name="A" type="number" onchange="enableButton()"> </div> <div> <label>Angle of B = </label> <input class='field' autocomplete="off" autofocus name="B" type="text" onchange="enableButton()"> </div> <div> <label>Angle of C = </label> <input class='field' autocomplete="off" autofocus name="C" type="text" onchange="enableButton()"> </div> <div> <label>Side Length of a = </label> <input class='field' autocomplete="off" autofocus name="a" type="text" onchange="enableButton()"> </div> <div> <label>Side Length of b = </label> <input class='field' autocomplete="off" autofocus name="b" type="text" onchange="enableButton()"> </div> <div> <label>Side Length of c = </label> <input class='field' autocomplete="off" autofocus name="c" type="text" onchange="enableButton()"> </div> <div> <button id='calculate' type="submit" disabled>Calculate</button> </div> </form> </div>

Answer 4

How did you call the function , also put a console log to check if the function is getting called. also as @certainPerformance told .length is a property not an function