1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

javascript innerhtml problem

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

  1. Ryzer

    Ryzer New 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?
     
  2. shabbir

    shabbir Administrator Staff Member

    When you fetch anything by Id it would not matter if its above or below ?
     
  3. Ryzer

    Ryzer New 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 :nonod:
     
  4. shabbir

    shabbir Administrator Staff Member

    I am not sure what you are trying and why do you say it would not work
     
  5. Ryzer

    Ryzer New 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: Mar 1, 2009
  6. shabbir

    shabbir Administrator Staff Member

    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

    you were right, i forgot to include the <select></select> tags :thinking: it works now tyvm
     
  8. shabbir

    shabbir Administrator Staff Member

    The pleasure is all mine.
     

Share This Page