Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post

    Script to enable/disable input elements?

    Hi guys, it's been a while since I've been here

    Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button.

    I googled it but didn't find anything too useful except for this:

    http://www.codetoad.com/javascript/e...rm_element.asp

    but I'm not sure how to edit it for the toggle.

    Thanks!

  • #2
    Regular Coder Jazzo's Avatar
    Join Date
    Apr 2008
    Location
    New York City
    Posts
    164
    Thanks
    20
    Thanked 2 Times in 2 Posts
    To toggle you can use something like this.

    Code:
    if (input.disabled) {
      input.disabled = false;
    }
    else {
      input.disabled = true;
    }
    ~Julian
    14 y/o web developer, drummer, and Bridge player

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Here is something to get you started...

    PHP Code:
    <html>
    <
    body>
    <
    input>
    <
    Input type "radio" Name "r1" Value "NE">North East
    <Input type =  "radio" Name "r1" Value "NW">North West
    <Input type =  "radio" Name "r1" Value "SE">South East
    <Input type =  "radio" Name "r1" Value "SW">South West
    <Input type =  "radio" Name "r1" Value "midlands">Midlands
    <input type="checkbox" name="checkgroup" checked />
    <
    input type="checkbox" name="checkgroup" />
    <
    input type="checkbox" name="checkgroup" checked />
    <
    input type="textarea"></textarea>

    <
    script>
    =document.getElementsByTagName("INPUT")
    for(var 
    a.length;i--;)a[i].disabled=true;
    </script>
    </body>
    </html> 
    Last edited by DaveyErwin; 07-27-2011 at 12:42 AM.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo as a guide.

    Click the Disable/Enable button to enable/disable all the inputs.
    Code:
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                function toggleInputs(btnO){
                    var inpsO = document.getElementsByTagName('input');
                    var state = (btnO.toggle == 'Disable')? true : false;
                    for(i=0; i < inpsO.length; i++){
                        inpsO[i].disabled = state;
                    }
                    btnO.toggle = (btnO.toggle == 'Disable')? 'Enable' : 'Disable';
                    btnO.innerHTML = btnO.toggle + ' inputs';
                }
                window.onload=function(){
                    document.getElementById('btnToggle').toggle = 'Disable';
                    document.getElementById('btnToggle').onclick=function(){
                        toggleInputs(this);
                    }
                }
            </script>
        </head>
        <body>
            <div>
                <input type="text" name="txt1" />
                <input type="checkbox" name="chk1" />
            </div>
            <div>
                <button id="btnToggle">Disable inputs</button>
            </div>
        </body>
    </html>

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Lightbulb

    Similar to 'bullant' control button using 'DaveyErwin's code (expanded)...
    Code:
    <html>
    <body>
    <input>
    <br>
    <Input type = "radio" Name = "r1" Value = "NE">North East
    <Input type =  "radio" Name = "r1" Value = "NW">North West
    <Input type =  "radio" Name = "r1" Value = "SE">South East
    <Input type =  "radio" Name = "r1" Value = "SW">South West
    <Input type =  "radio" Name = "r1" Value = "midlands">Midlands
    <br>
    <input type="checkbox" name="checkgroup" checked id="master"
     onchange="alter(this.id)" />MASTER
    <input type="checkbox" name="checkgroup" />
    <input type="checkbox" name="checkgroup" checked />
    <br>
    <input type="textarea"></textarea>
    
    <script>
    function alter(IDS) {
      var flag = document.getElementById(IDS).checked;
      var a =document.getElementsByTagName("INPUT")
      for(var i = a.length;i--;) {
        if (a[i].id != 'master') { if (flag) { a[i].disabled=true; }
                                        else { a[i].disabled=false; }
        }
      }
    }
    window.onload = function() { alter('master'); }
    </script>
    
    </body>
    </html>

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by jmrker View Post
    Similar to 'bullant' control button using 'DaveyErwin's code (expanded)...
    My control button in the demo I posted doesn't use DaveyErwin's code and it doesn't use inline scripting either

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Arrow

    Quote Originally Posted by bullant View Post
    My control button in the demo I posted doesn't use DaveyErwin's code and it doesn't use inline scripting either
    I did not say is was the same, I said similar in that it reserves one of the elements to allow for changing the values of the other elements without locking-out the user from the initial settings.

    I don't care which code the OP uses, just gives some insight as to how the problem could be solved in alternative ways. I see nothing wrong with your code and the OP can make his/her own decision about the efficacy to suit their own needs.


  • #8
    Regular Coder
    Join Date
    Sep 2010
    Location
    Far far away
    Posts
    122
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Simple function is here:

    Code:
    /*
    
    This function toggles (enable/disable) all inputs on a page
    The 'toggler' argument points to the toggling element (checkbox, button, etc)
    It should not be disabled anyway
    
    */
    function toggleInputs(toggler)
    {
        // Toggle the general flag
        arguments.callee.disabled = ! arguments.callee.disabled;
    
        // Gather all inputs
        var inputs = document.getElementsByTagName('input');
    
        // Set the disabled attribute for all inputs
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].disabled = arguments.callee.disabled;
        }
    
        // toggler should be enabled always!!!
        var control = typeof toggler == 'string' ? document.getElementById(toggler) : toggler;
        control.disabled = false;
    };
    Last edited by siberia-man; 07-27-2011 at 03:57 PM.

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by jmrker View Post
    I did not say is was the same, .....
    ok, but your statement was at best ambiguous and so maybe punctuation in appropriate locations in future statements will make what you mean more clear .

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,314
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    jmrker - don't rise to the bait. This guy would go into an empty room and start an argument.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jmrker (07-28-2011)

  • #11
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the script for which I am looking since a long time. Cab somebody further reform and change the event handler from button to input button. I have tried but getting some runtime error.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,314
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    Looking at siberia-man's code:-

    Note that the 5th edition of ECMAScript forbids use of arguments.callee() in strict mode.
    Last edited by Philip M; 02-05-2012 at 02:25 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #13
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Bullant,
    Can you please change the event handler from button mode to input button.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,314
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    No use asking bullant! He has been banned from the forum.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #15
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Arrow

    Whoops, see next post ...

    Last edited by jmrker; 02-25-2012 at 09:34 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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