SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamically enabling\disabling form elements

    Hi All

    I want to build a form which conists of several sections. I would like to use radio buttons to selectively enable/disable these different sections. For example if the first radio button is clicked, all the form elements in that section are enabled and all the elements in the other sections become greyed out (disabled).

    How can I do this? The following is a simple form and script I wrote. Can someone please tell me if I am on the right track? How does one enable/disable an object using JS?

    Many thanks, Ben
    --------------
    FORM:

    <form name="form1" method="post" action="">
    <input type="radio" name="radiobutton" value="1" onclick="test(1); return false">
    <select name="select">
    </select>
    <input type="radio" name="radiobutton" value="2" onclick="test(2);">
    <input type="text" name="text">
    </form>

    ---------------
    SCRIPT:

    function test (temp) {
    switch (temp) {
    case 1:
    alert('One');
    document.all.select.enable = true;
    document.all.text.enable = false;
    break;
    case 2:
    alert('Two');
    document.all.select.enable = false;
    document.all.text.enable = true;
    break;
    default:
    alert('What to do?');
    }
    }

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't link to elements in a form by using document.all

    your form is in an array so

    document.form[0]

    would slect the first form, this is the same as the other elements.

    also to enable and disable elements

    its like so

    document.form1.txt.disabled = true;

    hope that helps


    PHP Code:

    <script type="text/javascript">

    function 
    test (temp)

        switch (
    temp)
        {
            case 
    1    :
                    
    document.form1.selectable.disabled true;
                    
    document.form1.txt.disabled        false
                    break;
            case 
    2    :
                    
    document.form1.selectable.disabled false;
                    
    document.form1.txt.disabled        true
                    break; 
            default    :
                    
    alert('What to do?'); 
        }
    }

    </script>


    <form name="form1" method="post" action="">
      enable <input type="radio" name="radiobutton" value="1" onclick="test(1);">
      disable<input type="radio" name="radiobutton" value="2" onclick="test(2);"> 

      <select name="selectable">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>

      <input type="text" name="txt" value="blah"> 
    </form> 


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
  •