Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/forums/javascript/)
-   -   javascript innerhtml problem (http://www.go4expert.com/forums/javascript-innerhtml-problem-t16374/)

Ryzer 1Mar2009 05:35

javascript innerhtml problem
 
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?

shabbir 1Mar2009 09:05

Re: javascript innerhtml problem
 
When you fetch anything by Id it would not matter if its above or below ?

Ryzer 1Mar2009 09:20

Re: javascript innerhtml problem
 
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 :nonod:

shabbir 1Mar2009 10:07

Re: javascript innerhtml problem
 
I am not sure what you are trying and why do you say it would not work

Ryzer 1Mar2009 10:58

Re: javascript innerhtml problem
 
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?

shabbir 1Mar2009 13:14

Re: javascript innerhtml problem
 
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.

Ryzer 2Mar2009 03:14

Re: javascript innerhtml problem
 
Quote:

Originally Posted by shabbir (Post 43658)
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 :thinking: it works now tyvm

shabbir 2Mar2009 09:19

Re: javascript innerhtml problem
 
The pleasure is all mine.


All times are GMT +5.5. The time now is 15:42.