Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 324
  • Last Modified:

Link onClick Unhide Div?

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')? o.style.display = 'inline-block' : o.style.display = 'none';
(val == 'Other')? t.style.display = 'none' : t.style.display = 'inline-block';
(val == 'Other')? r.style.display = 'inline-block' : r.style.display = 'none';
}

</script>

Open in new window


The HTML:

<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>
</select>
</div>

<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>

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

Open in new window


Thank you!
0
SevenAteAnthony
Asked:
SevenAteAnthony
1 Solution
 
leakim971PluritechnicianCommented:
function unhide() {
var o = document.getElementById('otherContainer');
var t = document.getElementById('formRowTeam');
var r = document.getElementById('reset');
o.style.display = 'inline-block';
t.style.display = 'none';
r.style.display = '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>
0
 
ienaxxxCommented:
before appending the link obj (i assume here you are using appendChild) set his attributes as follows:

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

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

Hth. Bb

0
 
SevenAteAnthonyAuthor Commented:
Thank you to everyone who helped contribute.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now