1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Show/hide div on button click, depending on dropdown selection?

Discussion in 'JavaScript' started by Kerosene, Oct 3, 2011.

0
  1. #1
    I'd like to have a dropdown menu with three items in it, and a GO button.
    When the user clicks the GO button I want to unhide one of three <div> boxes, depending on the selection in the dropdown.
    I know this is ridiculously simple. Please don't tease me :)

    jquery with sliding/fading would be a bonus.

     
    Solved! View solution.
    Last edited: Oct 3, 2011
    Kerosene, Oct 3, 2011 IP
  2. #2
    Would probably look like this;
    <script text="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$("#goBttn").click(function(){
			$("#"+$("#dropDown").val()).fadeIn('slow');
			
			//Hide other divs, dno if you need this!
			select = document.getElementById("dropDown").getElementsByTagName("option");
			for(x=0;x<=select.length;x++)
				if($(select[x]).val()!=$("#dropDown").val()) $("#"+$(select[x]).val()).fadeOut('slow');
		});
	});
</script>

<style type="text/css">
	.hidden {
		display: none;
	}
</style>

<form onsubmit="javascript: return false;">
	<select name='dropDown' id='dropDown'>
		<option value='one'>show div one</option>
		<option value='two'>show div two</option>
		<option value='three'>show div three</option>
	</select>
	<input type="submit" id="goBttn" value="Go" />
</form>

<div id="one" class="hidden">This is div One</div>
<div id="two" class="hidden">This is div Two</div>
<div id="three" class="hidden">This is div Three</div>
    Code (markup):
     
    Sky AK47, Oct 3, 2011 IP
    Kerosene likes this.
  3. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #3
    Every now and then when I venture into the DP programming forums, I'm reminded why I signed up here in the first place.
    Thanks Sky AK47, it works perfectly. Exactly what I was after.
    +REPZ :D
     
    Kerosene, Oct 3, 2011 IP
  4. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #4
    This might be asking too much... but, would it be possible to have the selected div appear as a CSS popup, with a blanket over the page?
    Similar to a CPA gateway popup?
     
    Kerosene, Oct 3, 2011 IP
  5. Sky AK47

    Sky AK47 Member

    Messages:
    298
    Likes Received:
    8
    Best Answers:
    1
    Trophy Points:
    45
    #5
    Sky AK47, Oct 3, 2011 IP
  6. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #6
    :) Thank you again! :)

    One last thing, about the JavaScript you posted.... how can I put the dropdown and submit button inside a div that gets hidden when the submit button is pressed?
    This would be for if I'm not going to use a pop up, and just want to hide the dropdown from the page when the user clicks the submit button.
    e.g
    User makes the selection from the dropdown, and clicks the button.
    The dropdown and submit button disappear.
    The selected div shows.
     
    Kerosene, Oct 3, 2011 IP
  7. Sky AK47

    Sky AK47 Member

    Messages:
    298
    Likes Received:
    8
    Best Answers:
    1
    Trophy Points:
    45
    #7 
    <script text="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$("#goBttn").click(function(){
			$("#"+$("#dropDown").val()).fadeIn('slow');
			$("#formShow").fadeOut('slow');
			//Hide other divs, dno if you need this!
			select = document.getElementById("dropDown").getElementsByTagName("option");
			for(x=0;x<=select.length;x++)
				if($(select[x]).val()!=$("#dropDown").val()) $("#"+$(select[x]).val()).fadeOut('slow');
		});
	});
</script>

<style type="text/css">
	.hidden {
		display: none;
	}
</style>

<form id="formShow" onsubmit="javascript: return false;">
	<select name='dropDown' id='dropDown'>
		<option value='one'>show div one</option>
		<option value='two'>show div two</option>
		<option value='three'>show div three</option>
	</select>
	<input type="submit" id="goBttn" value="Go" />
</form>

<div id="one" class="hidden">This is div One</div>
<div id="two" class="hidden">This is div Two</div>
<div id="three" class="hidden">This is div Three</div>
    Code (markup):
    You could of course add a div with an ID around it instead of adding the ID tag to the form if you have more then just the form.
    Please do give the form a better name for the ID, couldn't come up with anything.
     
    Sky AK47, Oct 3, 2011 IP
  8. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #8
    Brilliant. Thank you :) Thank you :) Thank you :)
     
    Kerosene, Oct 3, 2011 IP