Changing part of a page based on dropdown selection

Need help with an engine or coding not on the list? Need help with a game or the website and forums here? Direct all questions here.
Post Reply
User avatar
OldRod
Posts: 1321
Joined: Sun Sep 20, 2009 4:26 pm

Changing part of a page based on dropdown selection

Post by OldRod »

On my character creation page, I have a dropdown list with all the available races listed and a radio_button to select gender. Below that, I have a DIV section where I want to display 3 avatar images for the user to choose from, based on those selections.

As the player selects a race from the dropdown list, or changes the radio button for gender, I would like to update the 3 avatar images that are displayed below to match the avatars for that race/gender. For instance, if the player selects 'Dwarf' and 'Male" I update the DIV to show 3 male dwarf avatar images. Does that make sense?

Anyone know how I could achieve this? Would it take some javascript code attached to the dropdown list and radio button? Anyone know of a tutorial that would point me in the right direction?

Thanks :)
User avatar
Nihilant
Posts: 47
Joined: Wed Aug 31, 2011 8:24 pm

Re: Changing part of a page based on dropdown selection

Post by Nihilant »

Never tried it in html (or php-generated html), but thinking from the ActionScript perspective it certainly looks like you have to have a 'holder' div(s) and a function that will load images to that div and which will be triggered each time a value in dropdown/radio is changed. I've found this on quick search (uses javascript):

in html:

Code: Select all

// the myfunction() can be added to dropdown options line, I guess, this uses simple link
<a href="javascript:myfunction();">Click me!</a> 
// obviously, you can add more id's/holders (3, as you say)
<div id="imageHolder">this is where the image will show</div> 
javascript:

Code: Select all

<script type="text/javascript">
    function myfunction(){
        // this would thus be multiplied 2 more times for each of the holders you need
       document.getElementById("imageHolder").innerHTML="<img src='imagefolder/imagename.jpg' alt=''/>"; 
}
</script>
User avatar
Nihilant
Posts: 47
Joined: Wed Aug 31, 2011 8:24 pm

Re: Changing part of a page based on dropdown selection

Post by Nihilant »

Sorry for doubleposting.

Yeah, since you need an image that depends on both the race and the gender, I suggest you name your images something like:
- dwarfMale.gif
- dwarfFemale.gif
- humanMale.gif
- humanFemale.gif etc

and from dropdown that driggers js function you can pass the first part "race=dwarf" and from radio button pass the "gender=Male" to function that will then load an image:

Code: Select all

"<img src='imagefolder/'"+race+gender+".gif' alt=''/>"
User avatar
Nihilant
Posts: 47
Joined: Wed Aug 31, 2011 8:24 pm

Re: Changing part of a page based on dropdown selection

Post by Nihilant »

Sorry for triple posting xD

made this, works nice:

Code: Select all

<html>
<head>
<title>Testing</title>

<script type="text/javascript">
	
	function passRaceGender(race,gender){		
		if(race!="None" & gender!="None"){
			document.getElementById("imageHolder").innerHTML="<img src='http://nihilant.host22.com/IndieResources/"+race+gender+".png' alt=''/>";
		}
	}
</script>

</head>
<body>

<div>
<form name="form1">
<select name="selectRace" onchange="passRaceGender(this.value,form2.selectGender.value);">
<option value="None">Select Race</option>
<option value="Dwarf">Dwarf</option>
<option value="Human">Human</option>
<option value="Elf">Elf</option>
</select>
</form>
</div>

<div>
<form name="form2">
<select name="selectGender" onchange="passRaceGender(form1.selectRace.value,this.value);">
<option value="None">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</form>
</div>

<div id="imageHolder">this is where the image will show</div> 

</body>
</html>
[ Used some online images and uploaded them to one of my sites, just copy/paste code to see how it works :) ]
Last edited by Nihilant on Thu Aug 09, 2012 2:03 am, edited 1 time in total.
User avatar
OldRod
Posts: 1321
Joined: Sun Sep 20, 2009 4:26 pm

Re: Changing part of a page based on dropdown selection

Post by OldRod »

LOL, thanks!
Post Reply

Return to “Advanced Help and Support”