www.webdeveloper.com
Results 1 to 4 of 4

Thread: Disable form elements

  1. #1
    Join Date
    May 2010
    Posts
    24

    Disable form elements

    Hi,

    I have a javascript that shows and hides a div.

    In the div is a form.
    I would like to add to the Javascript that if the div is closed the fields should be disabled.

    I have the Javascript that does that only I don't know how to implement that.
    I hope someone would assist me here:

    This is the code for the div
    Code:
     <script>
    function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
    document.getElementById(elementid).style.display = '';
    } 
    else {
    document.getElementById(elementid).disabled=true.style.display = 'none';
    }
    }
    </script>
    <a href="javascript:showHide('details')">Click to show</a>
    <div id="details" style="display:none">
    <fieldset>
    <p>
    <input type="text" class="appartment" size="20" name="appartment[]" value="" placeholder="Subindex" />
    </p>
    </fieldset> 
    </div>
    This is the Javascript that should disable the form elements.
    Code:
    document.getElementById('element_id').disabled = true;

    M.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    
    <script>
    function showHide(elementid){
     var obj=document.getElementById(elementid),frm=obj.getElementsByTagName('FORM')[0],els=frm.elements,z0=0;
     if (obj.style.display == 'none'){
      obj.style.display = '';
      obj.removeAttribute('disabled');
     }
     else {
      obj.style.display = 'none';
     }
     for (;z0<els.length;z0++){
      els[z0].removeAttribute('disabled');
      if (obj.style.display == 'none'){
       els[z0].disabled='disabled';
      }
     }
    }
    </script>
    </head>
    <body>
    <a href="javascript:showHide('details')">Click to show</a>
    <div id="details" style="display:none">
    <form>
    <fieldset>
    <p>
    <input type="text" class="appartment" size="20" name="appartment[]" value="" placeholder="Subindex" />
    </p>
    </fieldset>
    </form>
    </div></head>
    
    <body>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    May 2010
    Posts
    24
    Vic Thnx for your reply,

    I implemented this but it doesn't work.
    I don't get an error message but it still saves the empty field.

    I'll look in to it some more, maybe I just didn't implement it good

    M.
    Last edited by Interactive1984; 10-05-2012 at 02:37 AM.

  4. #4
    Join Date
    May 2010
    Posts
    24
    I've got it working.

    I had to add disabled="disabled" to the input field.
    That way de javascript can remove the disabled part from the input element.

    So as long as the show/hide link doesn't get clicked the form won't be saved.

    However if a user opens the show/hide div the disabled element get's removed so a user can add data.
    But if the user opens it and closes it the disabled element is still gone. Is there a way that I can add the disabled element when
    the show/hide div is closed?

    I've Googled a bit and came across setAttribute. I don't really know how to implement it and if it works on all browsers.

    Please help me one more time. Meanwhile I'll keep looking for a solution.

    Thnx.

    M.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles