Select multiple input fields javascript

Question

I have made a HTML form with several input fields like these:

            <tr>
                <td>inputfield1</td>
                <td><input type="number" class="bestelformulier" name="inputfield1" onkeyup="validateForm()" min="1" max="999"></td>
            </tr>
            <tr>
                <td>inputfield2</td>
                <td><input type="number" class="bestelformulier" name="inputfield2" min="1" max="999"></td>
            </tr>
            <tr>
                <td>inputfield3</td>
                <td><input type="number" class="bestelformulier" name="inputfield3" min="1" max="999"></td>
            </tr>
            <tr>
                <td>inputfield4</td>
                <td><input type="number" class="bestelformulier" name="inputfield4" min="1" max="999"></td>
            </tr>

As you can see my input field 1 has an onkeyup event called 'validateForm()' which does the following:

function validateForm(){
        if(document.forms['form'].inputfield1.value == "")
        {
            document.forms[0].submit.disabled=true;
        }
        else {  
            document.forms[0].submit.disabled=false;
        }
    }

It disables the button if nothing is filled in inputfield1 but enables it if there is something in there.

This works just as it should.

But as you can see i have several inputfields which all need a function like that.

The button needs to be disabled when 0 out of 11 fields are filled but needs to be enabled if even 1 of them is filled (doesn't matter which one)

How do I make it so that if 1 of those 11 fields are filled the button will enable?

All help is grealy appreciated!

You will have to either store the state of all the other inputs and check each one every time you call validateForm. Otherwise, your best bet is to move the validateForm call to the form "onsubmit" event, and check all the fields then. — dan richardson
– dan richardson, Commented Jan 21, 2014 at 13:11
And what should i place in the validateform itself? since it will still only check input field1 — Déjà vu
– Déjà vu, Commented Jan 21, 2014 at 13:13

John Boker · Accepted Answer · 2014-01-21 13:12:29Z

1

Try something like this and add it to the keyup off all the input fields

function validateForm()
{

    var allEmpty = (document.forms['form'].inputfield1.value == "" &&
                    document.forms['form'].inputfield2.value == "" &&
                    document.forms['form'].inputfield3.value == "" &&
                    document.forms['form'].inputfield4.value == "");

    if(allEmpty) // if all are empty disable the button, else enable it.
    {
        document.forms[0].submit.disabled=true;
    }
    else {  
        document.forms[0].submit.disabled=false;
    }
}

answered Jan 21, 2014 at 13:12

John Boker

83.8k17 gold badges101 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nunners Over a year ago

Only problem with this is scaling, if he suddenly needs to add 10 more fields, or all the fields needed a name change, it could become annoying to maintain. Good solution overall :)

dan richardson Over a year ago

You're able to circumvent the min/max this way. You can also proceed with one of the inputs actually being empty

dan richardson Over a year ago

Actually sorry I misread the question, that is allowed. However you can still circumvent the min/max check

Déjà vu Over a year ago

@danrichardson what do you mean exactly?

dan richardson Over a year ago

checking for value == "" means that a value of "bob" would be valid, which it isn't, as the value (based on your code) needs to be a number between 1 and 999.

Hugo S. Mendes · Accepted Answer · 2014-01-21 13:18:27Z

0

var input = document.getElementsByTagName('bestelformulier'); //you can use another class if you want.. as 'required'
var cansubmit = false;
for (i=0; i<input.length; i++)
    if(input[i].value.trim() != "")
        cansubmit = true;

document.forms[0].submit.disabled = cansubmit;

Hope it helps.

answered Jan 21, 2014 at 13:18

Hugo S. Mendes

1,18611 silver badges23 bronze badges

1 Comment

Hugo S. Mendes Over a year ago

sorry about the brace in the end of "for" ... you can remove that.. I will edit it.

nrsharma · Accepted Answer · 2014-01-21 13:29:11Z

0

For achieving this you need to pass the Id of the element to the function.

Make the function call like this

  onkeyup="validateForm('inputfield1')";

apply this for all input fields and update function like below

Try this

function validateForm(eleId){
    var value = document.getElementById(eleId).value;
    if(value == "")
    {
        document.forms[0].submit.disabled=true;
    }
    else {  
        document.forms[0].submit.disabled=false;
    }
}

edited Jan 21, 2014 at 13:29

answered Jan 21, 2014 at 13:10

nrsharma

2,5724 gold badges21 silver badges36 bronze badges

2 Comments

Nunners Over a year ago

I'd doubt that would work as the eleId passed would be a string and not an element under document.forms[]

Déjà vu Over a year ago

I can't really tell if this one works aswell or not, but i used thetop answer and that one works for sure, thanks for the effort though!

dan richardson · Accepted Answer · 2014-01-21 13:34:04Z

Your javascript needs to check the validity of the value also (between 1 and 999). This will also check the form on submit, not just rely on the fields being edited. Full code.

<form name="form" onsubmit="return validateForm()">
    <tr>
            <td>inputfield1</td>
            <td><input type="text" class="bestelformulier" name="inputfield1" onkeyup="validateForm()" min="1" max="999"></td>
        </tr>
        <tr>
            <td>inputfield2</td>
            <td><input type="number" class="bestelformulier" name="inputfield2" onkeyup="validateForm()" min="1" max="999"></td>
        </tr>
        <tr>
            <td>inputfield3</td>
            <td><input type="number" class="bestelformulier" name="inputfield3" onkeyup="validateForm()" min="1" max="999"></td>
        </tr>
        <tr>
            <td>inputfield4</td>
            <td><input type="number" class="bestelformulier" name="inputfield4" onkeyup="validateForm()" min="1" max="999"></td>
        </tr>
        <input type="submit" disabled name="submit" />
</form>

<script type="text/javascript">
    function validateForm() {    
        var isValid = false;
        if (document.forms[0].inputfield1.value > 0 && document.forms[0].inputfield1.value < 1000) {
            isValid = true;
        }
        if (document.forms[0].inputfield2.value > 0 && document.forms[0].inputfield2.value < 1000) {
            isValid = true;
        }
        if (document.forms[0].inputfield3.value > 0 && document.forms[0].inputfield3.value < 1000) {
            isValid = true;
        }
        if (document.forms[0].inputfield4.value > 0 && document.forms[0].inputfield4.value < 1000) {
            isValid = true;
        }
        if (!isValid) {
            document.forms[0].submit.disabled = true;
        } else {
            document.forms[0].submit.disabled = false;
        }
        return isValid;
    }
</script>

Collectives™ on Stack Overflow

Select multiple input fields javascript

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related