Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form field to show on option click

    Hi, I am currently creating a form to experiment with and I want a text input to pop up when the user chooses other on the title option.

    This is my code and its not working!

    Code:
    Code:
    <script type="text/javascript">
    
    function showHide (id) 
    { 
    var style = document.getElementById(id).style 
    if (style.visibility == "hidden") 
    style.visibility = "visible"; 
    else 
    style.visibility = "hidden"; 
    } 
    </script>
    
    
    
    </head>
    <body>
    
    <form action="confirm.php" method="post">
    Title: <select name="title">
    <option value="">Select...</option> 
    <option Value="MR">MR</option>
    <option Value="MRS">MRS</option>
    <option Value="Miss">Miss</option>
    <option Value="MS">MS</option>
    <option Value="DR">DR</option>
    <option Value="Prof">Prof</option>
    <option value="Other" onClick="showHide('othert');">Other</option>
    </select>
    <div id="othert" style="visibility:hidden;">
    
    If Other please state: <input type="text" name="othertitle">
    </div>
    Need help ASAP!
    Last edited by SaddlerJJ; 06-28-2012 at 01:51 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Here you are:-


    Code:
    <script type="text/javascript">
    
    function showHide () { 
    document.getElementById("othert").style.display="none";
    var val = document.forms[0].title.value;
    if (val == "Other") {
    document.getElementById("othert").style.display="block";
    }
    } 
    </script>
    
    </head>
    <body>
    
    <form action="confirm.php" method="post">
    Title: <select name="title" onchange = "showHide()">
    <option value="">Select...</option> 
    <option Value="MR">MR</option>
    <option Value="MRS">MRS</option>
    <option Value="Miss">Miss</option>
    <option Value="MS">MS</option>
    <option Value="DR">DR</option>
    <option Value="Prof">Prof</option>
    <option value="Other">Other</option>
    </select>
    
    <div id="othert" style="display:none">
    
    If Other please state: <input type="text" name="othertitle">
    </div>
    
    
    </form>
    You can use style visibility rather than style display if you prefer - style visibility simply hides the div, while style display adds or removes it from the page.


    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


    “Expert: a man who makes three correct guesses consecutively.” - Dr. Laurence J. Peter (American "hierarchiologist", Educator and Writer, 1919-1990)

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    <form action="confirm.php" method="post">
     Title: <select id='titleSelect' name="title" >
     <option value="">Select...</option>
     <option Value="MR">MR</option>
     <option Value="MRS">MRS</option>
     <option Value="Miss">Miss</option>
     <option Value="MS">MS</option>
     <option Value="DR">DR</option>
     <option Value="Prof">Prof</option>
     <option value="Other">Other...</option>
    </select>
    <p>
    <div id="othert" style="visibility:hidden;">
      Please state title: <input type="text" name="othertitle">
    </div>
    
    <script type="text/javascript">
    
    document.getElementById( 'titleSelect' ).onchange = function()
    {
      document.getElementById( "othert" ).style.visibility = ( this.value == "Other" ? "visible" : "hidden" );
    }
    
    </script>
    
    </form>

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much!

    Sorry about the format , from now on I shall keep to stated rules of code format on here !

    Thanks again!

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi again ,
    If I now needed to do the same for a checkbox on the page , would I simply write a new function and change parts within it , like the value and div?

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by SaddlerJJ View Post
    Hi again ,
    If I now needed to do the same for a checkbox on the page , would I simply write a new function and change parts within it , like the value and div?
    What is "the same"? Please be clearer in your description. Are you trying to do something based on the value of a checkbox? What if the user selects several checkboxes? Are you sure you do not mean radio buttons?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Basically if I had just one checkbox , When this is ticked I want another form input to be revealed , If that makes sense?

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Code:
    <input type = "checkbox" id = "box1" onclick = "showDiv(this, 'mydiv1')">
    
    <div id = "mydiv1" style="display:none">Some stuff in herewhich is revealed when the checkbox is checked</div>
    
    <script type = "text/javascript">
    function showDiv(which, div2show) {
    which.checked? document.getElementById(div2show).style.display="inline":document.getElementById(div2show).style.display="none";
    }
    </script>
    This will work for multriple checkboxes and <divs>.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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