Changing part of a page based on dropdown selection

OldRod · Post by **OldRod** » Wed Aug 08, 2012 8:10 pm

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

Nihilant · Post by **Nihilant** » Thu Aug 09, 2012 1:13 am

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>

Nihilant · Post by **Nihilant** » Thu Aug 09, 2012 1:17 am

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=''/>"

Nihilant · Post by **Nihilant** » Thu Aug 09, 2012 2:01 am

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

]

OldRod · Post by **OldRod** » Thu Aug 09, 2012 2:02 am

LOL, thanks!

Changing part of a page based on dropdown selection

Changing part of a page based on dropdown selection

Re: Changing part of a page based on dropdown selection

Re: Changing part of a page based on dropdown selection

Re: Changing part of a page based on dropdown selection

Re: Changing part of a page based on dropdown selection