dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Show/hide Input Box

  1. #1
    Join Date
    Oct 2006
    Posts
    6

    Show/hide Input Box

    I need to have multiple hyperlinks on a page that will show or hide a form text input box associated with each link. anyone have any suggestions?

  2. #2
    Join Date
    Apr 2006
    Posts
    120
    <html>
    <head>
    <title>Untitled</title>
    <script>
    function showTextBox(id) {
    document.getElementById(id).style.display = "block";
    }
    function hideTextBox(id) {
    document.getElementById(id).style.display = "none";
    }
    </script>
    </head>

    <body>
    <a href="javascript:showTextBox('box01')">Show Box 1</a> - <a href="javascript:hideTextBox('box01')">Hide Box 1</a><br>
    <a href="javascript:showTextBox('box02')">Show Box 2</a> - <a href="javascript:hideTextBox('box02')">Hide Box 2</a><br>
    <a href="javascript:showTextBox('box03')">Show Box 3</a> - <a href="javascript:hideTextBox('box03')">Hide Box 3</a><br>
    <a href="javascript:showTextBox('box04')">Show Box 4</a> - <a href="javascript:hideTextBox('box04')">Hide Box 4</a><br>

    <form>
    <input type="text" name="box01" id="box01" value="Box 1" style="display:none">
    <input type="text" name="box01" id="box02" value="Box 2" style="display:none">
    <input type="text" name="box01" id="box03" value="Box 3" style="display:none">
    <input type="text" name="box01" id="box04" value="Box 4" style="display:none">
    </form>

    </body>
    </html>

  3. #3
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Something on these lines maybe?

    PHP Code:
    <script type="text/javascript">

    function 
    show(id){
    if(
    document.getElementById(id).style.display=="none"){
    document.getElementById(id).style.display="block"
    }
    else{
    document.getElementById(id).style.display="none"
    }
    }

    </script>
    <a href="#null" onclick="show('t1')">Link 1</a> <input type="text" id="t1" style="display:none"><BR>
    <a href="#null" onclick="show('t2')">Link 2</a> <input type="text" id="t2" style="display:none"><BR>
    <a href="#null" onclick="show('t3')">Link 3</a> <input type="text" id="t3" style="display:none"><BR> 

  4. #4
    Join Date
    Oct 2006
    Posts
    6
    The text boxes and links will all be in there own individaul forms. will that still work? I have an ASP loop that goes through and creates all the boxes and each will need to be unique.
    Last edited by mknapp06; 12-05-2006 at 09:10 AM.

  5. #5
    Join Date
    Apr 2006
    Posts
    120
    yes, it'll work the same since the form element is being accessed by the id.

  6. #6
    Join Date
    Mar 2014
    Posts
    2

    Thumbs up Thank You MR.yellabuff

    Thanking you yellabuff.


    Quote Originally Posted by yellabuff View Post
    <html>
    <head>
    <title>Untitled</title>
    <script>
    function showTextBox(id) {
    document.getElementById(id).style.display = "block";
    }
    function hideTextBox(id) {
    document.getElementById(id).style.display = "none";
    }
    </script>
    </head>

    <body>
    <a href="javascript:showTextBox('box01')">Show Box 1</a> - <a href="javascript:hideTextBox('box01')">Hide Box 1</a><br>
    <a href="javascript:showTextBox('box02')">Show Box 2</a> - <a href="javascript:hideTextBox('box02')">Hide Box 2</a><br>
    <a href="javascript:showTextBox('box03')">Show Box 3</a> - <a href="javascript:hideTextBox('box03')">Hide Box 3</a><br>
    <a href="javascript:showTextBox('box04')">Show Box 4</a> - <a href="javascript:hideTextBox('box04')">Hide Box 4</a><br>

    <form>
    <input type="text" name="box01" id="box01" value="Box 1" style="display:none">
    <input type="text" name="box01" id="box02" value="Box 2" style="display:none">
    <input type="text" name="box01" id="box03" value="Box 3" style="display:none">
    <input type="text" name="box01" id="box04" value="Box 4" style="display:none">
    </form>

    </body>
    </html>

  7. #7
    Join Date
    Mar 2014
    Posts
    2
    yellabuff, you are right.

    Thanking you Sir.

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,596
    What about
    Code:
    function showTextBox(id) {
    document.getElementById(id).type = "text";
    }
    function hideTextBox(id) {
    document.getElementById(id).type = "hidden";
    }
    change the type property of the input so that it is hidden or visible.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

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