Show Hide span tag with dropdown on checkbox selection

Quite simple question for a javascript expert I'm sure; I want to be able to show an extra input field with his label if the user check a checkbox

<input type="checkbox" name="slabed[]" value="1"> <b>Slabed</b> <span><b>By</b><select name="slabedby[]">
                                                                                                                                     <option value="PCGS">PCGS</option></span>
                                                                                                                                     <option value="ICCS">ICCS</option>
                                                                                                                                            </select>

some details: Dynamic form
                      within a PHP script
                      could have more than one field hence the bracket [] for making array of the form submission.
                      Has to work in all major Browsers
                     
LVL 28
gamebitsAsked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
My proposal has no hardcoded field names:


 
<span>
<input type="checkbox" name="slabed[]" value="1" onClick="checkBox(this)" > <b>Slabed</b> 
<span style="display:none;"><b>By</b>
<select name="slabedby[]">
<option value="PCGS">PCGS</option>
<option value="ICCS">ICCS</option>
</span>
</span>                                                                                                                                            </select>
<script>
function checkBox(theBox){
  var theSpan = theBox.parentNode;
  theSpan = theSpan.getElementsByTagName("span")[0];
  theSpan.style.display=(theBox.checked)?"inline":"none";
}
</script>

Open in new window

0
 
nizsmoDeveloperCommented:
hi gamebits

what do you mean by an "extra input field"? textbox?
0
 
gamebitsAuthor Commented:
Sorry I didn't mean an input field I meant a dropdown.

Basically

There is a checkbox and when the user check that box a dropdown appear for the user to select what company did the grading and slabed the coin.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
nizsmoDeveloperCommented:
ok cool and the dropdown which you are talking about has already been loaded into the page? or do you require an ajax call to build the select-option dropdown dynamically when the user checks the checkbox?
0
 
gamebitsAuthor Commented:
I was thinking of building the option list via a mysql query, just loaded and hidden in the page on page load not thru an AJAX call.

Or it could be just hardcoded on the page.
0
 
nizsmoDeveloperCommented:
ok, are you looking for something like this?

Hope i haven't misunderstood your question.

<script type="text/javascript" language="javascript">
function checkField()
{
	if(document.getElementById('cbox').checked == true)
	{
		document.getElementById('selection_box').style.display='';
	}
	else
	{
		document.getElementById('selection_box').style.display='none';
	}
	
}
</script>
 
 
<input type="checkbox" id="cbox" name="slabed[]" value="1" onchange="checkField();"> 
<span id="selection_box" style="display:none;"><b>Slabed</b> <b>By</b>
<select name="slabedby[]">
<option value="PCGS">PCGS</option>
<option value="ICCS">ICCS</option>
</select></span>

Open in new window

0
 
gamebitsAuthor Commented:
@nizsmo

There is a problem with your code, when I check the box I have to click somewhere else on the page to get the hidden span to show, same thing to hide it.

@Zvonko

Your code work but I want to give a chance to nizsmo to fix his code since he was the first to answer the question.

I will award the points accordingly.

 
0
 
nizsmoConnect With a Mentor DeveloperCommented:
stupid ie, tested and works on firefox and safari, but not in ie.
a simple change though will let it work perfectly in ie also.
<script type="text/javascript" language="javascript">
function checkField()
{
	if(document.getElementById('cbox').checked == true)
	{
		document.getElementById('selection_box').style.display='';
	}
	else
	{
		document.getElementById('selection_box').style.display='none';
	}
	
}
</script>
 
<input type="checkbox" id="cbox" name="slabed[]" value="1" onclick="checkField();"> 
<span id="selection_box" style="display:none;"><b>Slabed</b> <b>By</b>
<select name="slabedby[]">
<option value="PCGS">PCGS</option>
<option value="ICCS">ICCS</option>
</select></span>

Open in new window

0
 
nizsmoDeveloperCommented:
this was due to ie recognizing the onchange event differently to firefox and safari, but using the onclick everything should work and in all browsers (well, at least ie, firefox and safari)
0
 
gamebitsAuthor Commented:
Thanks both of you either code works great.
0
 
ZvonkoSystems architectCommented:
Split points is always the better choice ;-)
0
 
nizsmoDeveloperCommented:
no problems glad i could help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.