javascript innerhtml problem

Discussion in 'JavaScript and AJAX' started by Ryzer, Mar 1, 2009.

  1. Ryzer

    Ryzer New Member

    Joined:
    Feb 15, 2009
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Pipeline Maintenance
    Location:
    Saskatchewan, Canada
    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?
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    When you fetch anything by Id it would not matter if its above or below ?
     
  3. Ryzer

    Ryzer New Member

    Joined:
    Feb 15, 2009
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Pipeline Maintenance
    Location:
    Saskatchewan, Canada
    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:
     
  4. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    I am not sure what you are trying and why do you say it would not work
     
  5. Ryzer

    Ryzer New Member

    Joined:
    Feb 15, 2009
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Pipeline Maintenance
    Location:
    Saskatchewan, Canada
    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: Mar 1, 2009
  6. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    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.
     
  7. Ryzer

    Ryzer New Member

    Joined:
    Feb 15, 2009
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Pipeline Maintenance
    Location:
    Saskatchewan, Canada
    you were right, i forgot to include the <select></select> tags :thinking: it works now tyvm
     
  8. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    The pleasure is all mine.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice