SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable all elements within <div>

    How can I disable all form elements within <div> at once?

    For example:

    Code:
    <div id='example'>
    <input type=text name='ex1'>
    <input type=text name='ex2'>
    <input type=text name='ex3'>
    </div>
    Thanks!

  2. #2
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
     
    <script type="text/javascript">
     
    function f(){
    var el=document.getElementById('example');
    var all=el.getElementsByTagName('input');
    alert(all[0].name); // ex1
    alert(all[1].name); // ex2
    alert(all[2].name); // ex3
     
     
    var inp, i=0;
    while(inp=all[i++]) {
    alert(inp.name);
    inp.disabled=true;
    }
    }
    </script>
    </head>
    <body>
    <input type="button" value="disable all elements" onclick="f()">
    <div id="example">
    <input type="text" name="ex1">
    <input type="text" name="ex2">
    <input type="text" name="ex3">
    </div>
    Last edited by muazzez; Sep 10, 2008 at 06:53. Reason: while loop
    The Time Through Ages. In the Name of Allah, Most Gracious, Most Merciful.
    1. By the Time, 2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    I had to stop and think about things in the code when I saw the while loop.

    Code that's easier to read and understand is:

    Code javascript:
    var el = document.getElementById('example'),
        all = el.getElementsByTagName('input'),
        i;
    for (i = 0; i < all.length; i++) {
        all[i].disabled = true;
    }

    It's also a good idea to give functions meaningful names, and to not embed javascript within the html.
    We can even take a leaf from best practices to speed up your web site and place the javascript at the end of the body.

    Code html4strict:
    <body>
    <input id="disableExample" type="button" value="disable all elements">
    <div id="example">
        <input type="text" name="ex1">
        <input type="text" name="ex2">
        <input type="text" name="ex3">
    </div>
    <script src="script.js"> </script>
    </body>

    Code javascript:
    function disableInputs(el) {
        var el = document.getElementById('example'),
            all = el.getElementsByTagName('input'),
            i;
        for (i = 0; i < all.length; i++) {
            all[i].disabled = true;
        }
    }
    document.getElementById('disableExample').onclick = function () {
        disableInputs('example');
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member SkinnyK's Avatar
    Join Date
    Sep 2008
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    We can even take a leaf from best practices to speed up your web site and place the javascript at the end of the body.
    Thank you for that resource.
    If you need someone to talk to, I'm always there to listen.

  5. #5
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57
    thanks for your codes and your help.
    The Time Through Ages. In the Name of Allah, Most Gracious, Most Merciful.
    1. By the Time, 2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the neat link and the code. I'll try it out.

    Would
    Code:
     all = el.getElementsByTagName('*')
    work if I have more than one type of form element in the list?
    and will this work on all browsers?

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks muazzez and pmw57. I tried and the code works perfectly.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by dpn View Post
    Would
    Code:
     all = el.getElementsByTagName('*')
    work if I have more than one type of form element in the list?
    and will this work on all browsers?
    It will work on most browsers except for IE7
    http://ejohn.org/blog/object-getelem...gname-ie7-bug/

    If you're wanting to attach an event to all elements, you're better off having only the one event at the top-level that monitors what happens below.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •