SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing a form's attributes

    Hi

    I want to be able to change a form's display attribute to none and block and back again in javascript. Can anyone tell me how this is done please? The form has an id of 'change' and a its name is 'changeForm'.

    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    What is being meant by the term block?

    Code Javascript:
    var changeForm  = document.getElementById('change');
    // hide form
    changeForm.style.display = 'none';
    // reveal form
    changeForm.style.display = '';

    Although, it is often better to adjust the class names than edit the styles directly.

    Code CSS:
    .hidden {
        display: none;
    }

    Code Javascript:
    function hideElement(el) {
        el.className = 'hidden';
    }
    function revealElement(el) {
        el.className = '';
    }
    // hide form
    hideElement(document.getElementById('change'));
    // reveal form
    revealElement(document.getElementById('change'));
    Last edited by paul_wilkins; Jan 20, 2008 at 19:52.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, By block I simply meant

    display: block

    But null does the trick just as well.

    Cheers

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    el.setAttribute('class', 'hidden');
    Above will fail in Internet Explorer. Do this instead
    Code JavaScript:
    el.className = "hidden";

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I've got it working in Firefox and just found it doesn't work in IE!

    G

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Thanks Pepejeria, those el.setAttribute parts should be el.className instead.
    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
  •