Solved

Show Hide span tag with dropdown on checkbox selection

Posted on 2007-11-16
12
2,626 Views
Last Modified: 2012-05-05
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
                     
0
Comment
Question by:gamebits
  • 6
  • 4
  • 2
12 Comments
 
LVL 21

Expert Comment

by:nizsmo
ID: 20302735
hi gamebits

what do you mean by an "extra input field"? textbox?
0
 
LVL 28

Author Comment

by:gamebits
ID: 20302763
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20302778
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
 
LVL 28

Author Comment

by:gamebits
ID: 20302787
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20302816
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 250 total points
ID: 20302838
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 28

Author Comment

by:gamebits
ID: 20302883
@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
 
LVL 21

Assisted Solution

by:nizsmo
nizsmo earned 250 total points
ID: 20302887
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20302890
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
 
LVL 28

Author Comment

by:gamebits
ID: 20302905
Thanks both of you either code works great.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20302909
Split points is always the better choice ;-)
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20302913
no problems glad i could help!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

911 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

20 Experts available now in Live!

Get 1:1 Help Now