How do I write JavaScript that validates input across multiple forms?

Question

I am attempting to write JavaScript that traverses multiple HTML forms, checks an input for a given value on edit, then enables/disables the submit button for that form based on the input value.

I have a very simple example script, which overrides the onclick function of checkboxes, to test the flow of my code.

<form>
    <input type="checkbox" />
    <input type="submit" disabled="disabled" />
</form>
<form>
    <input type="checkbox" />
    <input type="submit" disabled="disabled" />
</form>
<form>
    <input type="checkbox" />
    <input type="submit" disabled="disabled" />
</form>
<form>
    <input type="checkbox" />
    <input type="submit" disabled="disabled" />
</form>
<form>
    <input type="checkbox" />
    <input type="submit" disabled="disabled" />
</form>
<script type="text/javascript">
    forms = document.getElementsByTagName("form");
    for(i=0; i<forms.length; i++)
    {
        inputs = forms.item(i).getElementsByTagName("input");
        inputs.item(0).onclick = function()
        {
            if(this.checked)
                inputs.item(1).removeAttribute("disabled");
            else
                inputs.item(1).setAttribute("disabled","disabled");
        }
    }
</script>

What I expect to happen: the checkboxes change the value of the submit button in the same form.

What actually happens: all the checkboxes change the value of the submit button in the last form.

The actual code will be somewhat smarter, but I want to understand the flow of JavaScript code before progressing onto something more complex.

Thanks in advance!

Niet the Dark Absol · Accepted Answer · 2014-03-24 10:27:06Z

2

Try something like this:

document.body.onchange = function(e) {
    // this delegates all the way to the body - if you have a more specific
    // container, prefer using that instead.
    e = e || window.event;
    var t = e.srcElement || e.target;
    if( t.nodeName == "INPUT" && t.type == "checkbox") {
        // may want to add a className to the checkboxes for more specificity
        t.parentNode.getElementsByTagName('input')[1].disabled = !t.checked;
    }
};

The reason you are seeing the behaviour you're getting is because inputs' value is not fixed, you are repeatedly re-assigning it to the next form's elements, ultimately resulting in the last one.

answered Mar 24, 2014 at 10:27

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

Collectives™ on Stack Overflow

How do I write JavaScript that validates input across multiple forms?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related