SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Michigan
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggling visibility?

    Hey Guys,

    I have a page that displays information for a given user. I have an "Update" button and when the user clicks it, I want to have a textbox (form) appear below the button. How would I do that?

    Here's what I have:

    <input type="button" class="button" value="Update" onClick="newFunk();">

    <input name="tada" type="button" class="button" value="Tada" style="visibility:hidden">

    And the function:

    function newFunk(chosen) {
    document.myForm.tada.style.visibility = 'visible';
    }

    Any idea what I'm doing wrong?

    Thanks.

  2. #2
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    function newFunk(chosen) {
    document.myForm.tada.style.display  = '';
    }
    </script>
    
    <form name="myForm">
    <input type="button" class="button" value="Update" onClick="newFunk();">
    
    <input name="tada" type="button" class="button" value="Tada" style="display: none;">
    </form>
    This works in Moz Firebird and IE6.

  3. #3
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    If you are running on IE, you only need to change the button to a box. If not, you have a create a div, place the 'hidden' form elements in it, and then by using the appropriate DOM either rewrite the div or change the innerHTML. (if interested, see the "Introduction to dHTML" script/tutorial at my site -- GrassBlade )

    This works in IE 6:
    Code:
    <script>
    function newFunk(formObj) {
    formObj.tada.style.visibility = 'visible';
    formObj.tadatxt.style.visibility = 'visible';
    }
    //-->
    </script>
    </head>
    <body>
    <form name="myForm">
    <input type="button" class="button" value="Update" onClick="newFunk(this.form);">
    <input name="tada" type="button" class="button" value="Tada" style="visibility:hidden">
    <input name="tadatxt" type="text" class="button" value="Tadatxt" style="visibility:hidden">
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still


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
  •