Member Avatar for OmniX

Im looking for a piece of code that can be used to select all input text fields and then disable and enable them at will.

I was trying to work off this:

text = document.getElementsByTagName("input");

THEN when required:

text.disable = true;
text.disable = false;

Thanks, Regards X.

  • 2 Contributors
  • 4 Replies
  • 8K Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by OmniX

Dani AI

Generated

A couple of clarifications that will save you time:

  • The property is disabled (not disable), and getElementsByTagName returns a collection you must iterate. To target only text inputs cleanly, use a CSS selector.

Example wiring a single checkbox to disable/enable every text input on the page:

// Checkbox with id="toggle-all-text"
document.getElementById('toggle-all-text').addEventListener('change', function () {
  var inputs = document.querySelectorAll('input[type="text"]');
  inputs.forEach(function (el) { el.disabled = this.checked; }, this);
});

If you need to disable an entire section at once, placing inputs inside a <fieldset> and toggling fieldset.disabled will disable all descendants with one line, per the spec: document.querySelector('fieldset').disabled = true; See HTML spec behavior explained on MDN for fieldset disabled.

Preventing form submission reliably should be done on the submit event:

// Form with id="my-form"
document.getElementById('my-form').addEventListener('submit', function (e) {
  e.preventDefault(); // stops navigation and actual submit
  // your validation or messaging here
});

Notes:

  • Disabled controls are excluded from form submission by design (MDN: HTMLInputElement.disabled). If you want values submitted but not editable, prefer readOnly for text inputs (MDN: readOnly).
  • querySelectorAll('input[type="text"]') returns a static NodeList, so changes to the DOM later will not automatically be reflected (MDN: querySelectorAll). Iterate again after dynamic changes if needed.

Recommended Answers

All 4 Replies

Member Avatar for mellamokb

Im looking for a piece of code that can be used to select all input text fields and then disable and enable them at will.

Here is a javascript function that will enable or disable all input text fields:

function setInputTextEnabled(isEnabled)
{

    inputArray = document.getElementsByTagName("input");
    
    for (var index = 0; index < inputArray.length; index++)
        if (inputArray[index].type = 'text')
            inputArray[index].disabled = isEnabled;
        
}

You specify true or false for isEnabled depending on whether you want them all to be enabled or disabled. I've also checked that the type of input is 'text' as you said. If you want to affect all input's, remove the line that begins "if (inputArray...").

text = document.getElementsByTagName("input");

Note that the variable 'text' holds an array, not a single object, so you have to specify indices as I did in the code above in order to change individual properties, such as:

text = document.getElementsByTagName("input");
text[5].value = 'abcdef';

~ mellamokb

Member Avatar for OmniX

mellamokb my hero!

ya i came up with similar code but it is not working, at the moment im trying to use a checkbox to implement the enable or disable ALL checkboxes but its not working =( Also any ideas on my other post on trying to stop a submit button from working? (idea was return false but no go still goes to next page) =(

Ill try figure something out, keep you posted.

ps: good heads up on the text array i overlook easy things sometimes =(

Member Avatar for mellamokb

Here is full page source that works. I fixed a bug in the javascript I wrote, where I used a single equals where I should have used double equals for comparison:

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript">
        <!--
    
            function setInputTextEnabled(isEnabled)
            {

                inputArray = document.getElementsByTagName("input");
                
                for (var index = 0; index < inputArray.length; index++)
                    if (inputArray[index].type == 'text')
                        inputArray[index].disabled = isEnabled;
                    
            }        
        
        // -->
        </script>
    </head>
    <body>
        <input id="Text1" type="text" value="123" /><br />
        <input id="Text2" type="text" value="123asffdd" /><br />
        <input id="Text3" type="text" value="12353" /><br />
        <input id="Text4" type="text" value="12weaf3" /><br />
        <input id="Text5" type="text" value="12asgd3" /><br />
        <input id="Text6" type="text" value="12asdf3" /><br />
        <input id="Text7" type="text" value="12awef3" /><br />
        <input id="Text8" type="radio" name="r1" value="12awef3" /><br />
        <input id="Text9" type="radio" name="r1" value="12awef3" /><br />
        <input id="Text10" type="checkbox" value="12awef3" /><br /><br />
        
        Change Text Enabled: <input id="Text11" type="checkbox" onclick="setInputTextEnabled(this.checked);" value="12awef3" />
    </body>
</html>

~ mellamokb

Member Avatar for OmniX

~ mellamokb
Dont ask me what the problem was.
Ran your code worked perfectly, then ran mine and worked fine. Anyways beautiful work once again, you have helped me so much and gone that extra mile, THankyou =)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.