SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable text fields in a form?

    Hello

    I'm a absolute beginner in Javascript But have manage to create a script that disable one textfield when a checkbox is checked.

    Code:
    function disableTextField(form) {
        if (document.getElementById("notDone").checked == true) {
            document.getElementById("from").disabled = true;
            } else {
            document.getElementById("from").disabled = false;
        }
    }
    In the form I have this checkbox:
    Code:
    <input name="notDone" type="checkbox" id="notDone" value="X" onclick="disableTextField(this.form)">
    But how do I build on this so that I can have different numbers of text fields – and not have to name them in the script (I have about 30 forms - some with just 5 text fields and some with 10). Every form have also a text area which I don't want to disable.

    I have tried for-loops, but can't get it to work. Like this one:
    Code:
    function disableTextField(form) {
        if (document.getElementById("ejGjort").checked == true) {
            var form = document.getElementsByTagName('form');
            var fields = form.getElementsByTagName('input');
            for (var fields=0;fields<form.lenght;fields++) {
                document.(form.elements[i]).disabled=true;
                }
            }
    }
    All tips are welcome

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
            // forms[0] assumes you want the _first_ form in the html document
            var form = document.forms[0];
            // fields is an array of of html input element objects
            var fields = form.getElementsByTagName('input');
            for (var i=0; i<fields.length; i++) {
                fields[i].disabled = true;
            }

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot.
    I will try this in the weekend…

    Regards, Magnus

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked great

    Did I slight modification so that the checkbox and the submit button did not get disabled:

    Code:
    function disableTextField(form) {
        if (document.getElementById("notDone").checked == true) {
            // forms[0] assumes you want the _first_ form in the html document
            var form = document.forms[0];
            // fields is an array of of html input element objects
            var fields = form.getElementsByTagName('input');
            for (var i=0; i<fields.length; i++) {
                fields[i].disabled = true;
                fields[0].disabled = false;
            }
          document.getElementById("save").disabled = false;
        }
    Many thanks, Magnus

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the code above works perfect, but I have a little problem / question: Is it possible to target input tags of type "text" in this code:
    Code:
    var fields = form.getElementsByTagName('input');
    Maybe something like ('input.type == text') ?

    To the Javascript I have added
    Code:
    fields[i].value = "";
    So that, when the checkbox is ticked, the text fields is cleared. But that also clears some hidden fields in the form. Which I don't want

    Regards, Magnus

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah! I fixed it.

    For anyone with a similar question, here are the complete script:
    Code:
    function disableTextField(form) {
        if (document.getElementById("notDone").checked == true) {
            // forms[0] assumes you want the _first_ form in the html document
            var form = document.forms[0];
            // fields is an array of of html input element objects
            var fields = form.getElementsByTagName('input');
            for (var i=0; i<fields.length; i++) {
                if (fields[i].getAttribute('type') == "text") {
                fields[i].disabled = true;
                fields[i].value = "";
                }
            }
        }
        
        // activate fields again
        if (document.getElementById("notDone").checked == false) {
            // forms[0] assumes you want the _first_ form in the html document
            var form = document.forms[0];
            // fields is an array of of html input element objects
            var fields = form.getElementsByTagName('input');
            for (var i=0; i<fields.length; i++) {
                if (fields[i].getAttribute('readonly') != "true") {
                fields[i].disabled = false;
                }
            }
        }
    }
    The form have some Readonly fields, which I always wants to be Readonly

    //magnus


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •