javascript innerhtml problem

Ryzer's Avatar, Join Date: Feb 2009
Go4Expert Member
I'm trying to create a registration form with a country and state dropdown box using the html option tag. But what i'm trying to achieve is that the state dropdown only appears if a certain country is chosen in the country dropdown menu and the correct states/provinces are displayed according to the country. Here is what works

in register.php
Code:
<select name="country" id="country" onchange="countryFunc(this.value)";">
<option value="CA">canada</option>
<option value="US">united states</option>
etc...


<td align="right">State:</td><td><div id="province">Choose a country</div></td>
in functions.php
Code:
function countryFunc(country)
{
    if(country == "CA")
    {
        document.getElementById("province").innerHTML = "test";
    }

}
So it works with that. With no country selected, html page outputs:

State: Choose a country

And when you choose Canada from dropdown it is changed to

State: test


So now I am trying to get this to work with a dropdown box where "test" is above.. Any ideas?
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
When you fetch anything by Id it would not matter if its above or below ?
0
Ryzer's Avatar, Join Date: Feb 2009
Go4Expert Member
That's not my problem. I'm trying to make the country dropdown menu display the province/state dropdown menu IF the country dropdown menu has a certain value (e.g. Canada) I'll try to show better what I am trying to achieve.

in functions.php
Code:
function countryFunc(country)
{
	if(country == "CA")
	{
		document.getElementById("province").innerHTML = <option>alberta</option>;
	}
}
obviously this doesnt work but i am wondering if there is any way for it to work. i know it can be done with input textbox as follows

Code:
<script type="text/javascript">
function changeText2(){
	var userInput = document.getElementById('userInput').value;
	document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>
Does it make sense what I am trying to do? I am kind of confusing myself
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
I am not sure what you are trying and why do you say it would not work
0
Ryzer's Avatar, Join Date: Feb 2009
Go4Expert Member
tried it. the text shows up but i cannot pass html through the innerHTML. i would assume there is a way to do that but no idea how.

a great example of what i'm trying to do is the youtube signup form. if you change your country to Canada, they add a field for postal code and an input textbox. instead of an input textbox i would like to add another dropdown box like the country one, but for provinces.. more clear now?

Last edited by Ryzer; 1Mar2009 at 11:01..
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
HTML should also go but instead of trying the option try something like

<h1>This is the heading</h1>

And if this works there is some other issue with your option content.
0
Ryzer's Avatar, Join Date: Feb 2009
Go4Expert Member
Quote:
Originally Posted by shabbir View Post
HTML should also go but instead of trying the option try something like

<h1>This is the heading</h1>

And if this works there is some other issue with your option content.
you were right, i forgot to include the <select></select> tags it works now tyvm
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
The pleasure is all mine.