Link onClick Unhide Div?

Posted on 2011-10-12
Last Modified: 2012-05-12
Hi Experts,

Thanks for reading. I have a form where when the dropdown value of "Other" is selected, it hides the dropdown, makes a text field appear, and a link to "reset" the form (e.g. make the dropdown reappear and hide the text field) appear too.

How can I get the link, onClick, to hide the "otherContainer", hide itself ("reset"), and make the dropdown "formRowTeam" appear?

The JavaScript:

<script type="text/javascript">

function toggleField(val) {
var o = document.getElementById('otherContainer');
var t = document.getElementById('formRowTeam');
var r = document.getElementById('reset');
(val == 'Other')? = 'inline-block' : = 'none';
(val == 'Other')? = 'none' : = 'inline-block';
(val == 'Other')? = 'inline-block' : = 'none';


Open in new window


<div id="formRowTeam" class="formRow">
<select name="team" class="text" onChange="toggleField(this.value);">
<option value="Team 1">Team 1</option>
<option value="Team 2">Team 2</option>
<option value="Team 3">Team 3</option>
<option value="Other">Other</option>

<div name="otherContainer" id="otherContainer" class="formRowOther" style="display: none;">
<input type="text" name="otherText" id="otherText" class="other" value="Enter Your Team" onfocus="otherFocus()" />
<input style="display: none;" type="text" name="other" id="other" class="other" value="" onblur="otherBlur()" />

<div id="reset" style="display: none;"><a href="#">Click here to choose again.</a></div>

Open in new window

Thank you!
Question by:SevenAteAnthony
    LVL 81

    Accepted Solution

    function unhide() {
    var o = document.getElementById('otherContainer');
    var t = document.getElementById('formRowTeam');
    var r = document.getElementById('reset'); = 'inline-block'; = 'none'; = 'inline-block';
        return false;

    Open in new window

    with an update to the link :
    <div id="reset" style="display: none;"><a href="#" onclick="return unhide();">Click here to choose again.</a></div>
    LVL 10

    Expert Comment

    before appending the link obj (i assume here you are using appendChild) set his attributes as follows:

    Myobj.setAttribute('onclick', 'resetTheform(\'''\');');
    United with smthg like

    function resetTheform(theid){
     var thefld = document.getElementById(theid); 'none';

    Hth. Bb

    LVL 1

    Author Closing Comment

    Thank you to everyone who helped contribute.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now