Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    <select> onChange

    This is the html code I have on a web page. It is a sequence of three drop down menus of Country > State > City. Selecting a Country populates the State drop menu. Selecting a State populates the City menu. However, when a City is selected, I need that user to see a new window that shows information about that City (a standard html page). As I understand it, there should be a 'onChange' function somewhere, otherwise selecting a City does nothing at all. What is needed here, and where does it go? I thought perhaps it might go into the .js database containing all of the Country, State and City lists, but I don't have the knowledge skills to determine if that is the case. Some direction would truly be appreciated.

    <form>
    <table border="0">
    <tr>
    <td>
    <select id='countrySelect' name='country' onchange='javascript: populateState(); populateCity();'></select>
    </td>
    <td>
    <select id='stateSelect' name='state' onchange='javascript: populateCity();'></select>
    </td>
    <td>
    <select id='citySelect' name='city'></select>
    <script type="text/javascript">initCountry('CA'); </script>
    </td>
    </tr>
    </table>
    </form>

  • #2
    New Coder
    Join Date
    Aug 2010
    Location
    Illinois
    Posts
    20
    Thanks
    1
    Thanked 1 Time in 1 Post
    Sounds like you are trying to accomplish two things here...

    1. Submit the form without a submit button
    2. Present the correct data after the form is submitted

    So you are correct about using onChange="this.form.submit()

    Something like this ought to work:
    Code:
    <select id='citySelect' name='city' onchange='this.form.submit()></select>
    <script type="text/javascript">initCountry('CA'); </script>
    </form>
    I don't know how your javascript is working, but I guess it is creating all the select options, so you might need to play with that.

    Then, you need to define your form action, and pass the selected variable.

    Personally, I would set the action to a php page that process the form with $_POST for whatever the city is.
    Code:
    <form action="process.php" method="post">
    Then on the process.php page, you'll have something like:
    Code:
    $city = $_POST['city'];
    And you can do what you want with it from there.

    Sorry this isn't completely helpful. If you can post the page, I can do better. But maybe it will at least give someone else a chance to finish up on the idea here.
    Last edited by musicforte; 08-23-2010 at 04:29 AM. Reason: further information

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The javascript is below, and I have truncated the Country and State list of names for brevity. All that the existing form does is present the three dynamic drop box menus. Choose Country, then choose State, then choose City; period. That's it. There is nothing in there to make the form submit, as per your comment "using onChange="this.form.submit()". Where would it go? What would be required within the ()?




    var postState = '';
    var postCountry = '';
    var postCity = '';

    //City table
    //
    // To edit the list, just delete a line or add a line. Order is

    important.
    // If the city is in a state, write STATE before the relevant

    codes (codes being GB, US etc)
    // If the city is in a country, write COUNTRY before the relevant

    codes (appears without a state being selected)
    // The order displayed here is the order it appears on the drop

    down.
    //
    var city = '\
    STATE:UK:GLONDON:LONDON:London|\
    COUNTRY:GB:LONDON:London|\
    STATE:CA:BC:YVR:Vancouver|\
    STATE:CA:BC:YYJ:Victoria|\
    STATE:PE:AR:AQP:Arequipa|\
    STATE:PE:LI:LIM:Lima|\
    STATE:IT:SI:CTA:Catania|\
    ';


    // State table
    //
    // To edit the list, just delete a line or add a line. Order is

    important.
    // The order displayed here is the order it appears on the drop

    down.
    //
    var state = '\
    US:AK:Alaska|\
    US:AL:Alabama|\
    US:AR:Arkansas|\
    US:AS:American Samoa|\
    US:AZ:Arizona|\
    US:CA:California|\
    US:CO:Colorado|\
    US:CT:Connecticut|\

    EI:CO KERRY:County Kerry|\
    EI:CO LIMERICK:County Limerick|\
    EI:CO TIPPERARY:County Tipperary|\
    EI:CO WATERFORD:County Waterford|\
    PE:AR:Arequipa|\
    PE:LI:Lima|\
    IT:SI:Sicily|\
    ';

    // Country data table
    //
    // To edit the list, just delete a line or add a line. Order is

    important.
    // The order displayed here is the order it appears on the drop

    down.
    //
    var country = '\
    AF:Afghanistan|\
    AL:Albania|\
    DZ:Algeria|\
    AS:American Samoa|\
    AD:Andorra|\
    AO:Angola|\
    AI:Anguilla|\
    EH:Western Sahara|\
    WS:Western Samoa|\
    YE:Yemen|\
    YU:Yugoslavia|\
    ZR:Zaire|\
    ZM:Zambia|\
    ZW:Zimbabwe|\
    ';

    function TrimString(sInString) {
    if ( sInString ) {
    sInString = sInString.replace( /^\s+/g, "" );// strip leading
    return sInString.replace( /\s+$/g, "" );// strip trailing
    }
    }

    // Populates the country selected with the counties from the

    country list

    function populateCountry(defaultCountry) {
    if ( postCountry != '' ) {
    defaultCountry = postCountry;
    }
    var countryLineArray = country.split('|'); // Split into lines
    var selObj = document.getElementById('countrySelect');
    selObj.options[0] = new Option('Select Country','');
    selObj.selectedIndex = 0;
    for (var loop = 0; loop < countryLineArray.length; loop++) {
    lineArray = countryLineArray[loop].split(':');
    countryCode = TrimString(lineArray[0]);
    countryName = TrimString(lineArray[1]);
    if ( countryCode != '' ) {
    selObj.options[loop + 1] = new Option(countryName,

    countryCode);
    }
    if ( defaultCountry == countryCode ) {
    selObj.selectedIndex = loop + 1;
    }
    }
    }

    function populateState() {
    var selObj = document.getElementById('stateSelect');
    foundState = false;
    // Empty options just in case new drop down is shorter
    if ( selObj.type == 'select-one' ) {
    for (var i = 0; i < selObj.options.length; i++) {
    selObj.options[i] = null;
    }
    selObj.options.length=null;
    selObj.options[0] = new Option('Select State','');
    selObj.selectedIndex = 0;
    }
    // Populate the drop down with states from the selected country
    var stateLineArray = state.split("|"); // Split into lines
    var optionCntr = 1;
    for (var loop = 0; loop < stateLineArray.length; loop++) {
    lineArray = stateLineArray[loop].split(":");
    countryCode = TrimString(lineArray[0]);
    stateCode = TrimString(lineArray[1]);
    stateName = TrimString(lineArray[2]);
    if (document.getElementById('countrySelect').value ==

    countryCode && countryCode != '' ) {
    // If it's a input element, change it to a select
    if ( selObj.type == 'text' ) {
    parentObj = document.getElementById

    ('stateSelect').parentNode;
    parentObj.removeChild(selObj);
    var inputSel = document.createElement("SELECT");
    inputSel.setAttribute("name","state");
    inputSel.setAttribute("id","stateSelect");
    inputSel.setAttribute("onchange","javascript:

    populateCity()");
    parentObj.appendChild(inputSel) ;
    selObj = document.getElementById('stateSelect');
    selObj.options[0] = new Option('Select State','');
    selObj.selectedIndex = 0;
    }
    if ( stateCode != '' ) {
    selObj.options[optionCntr] = new Option(stateName,

    stateCode);
    }
    // See if it's selected from a previous post
    if ( stateCode == postState && countryCode == postCountry )

    {
    selObj.selectedIndex = optionCntr;
    }
    foundState = true;
    optionCntr++
    }
    }
    // If the country has no states, change the select to a text

    box
    if ( ! foundState ) {
    parentObj = document.getElementById

    ('stateSelect').parentNode;
    parentObj.removeChild(selObj);
    // Create the Input Field
    var inputEl = document.createElement("INPUT");
    inputEl.setAttribute("id", "stateSelect");
    inputEl.setAttribute("type", "text");
    inputEl.setAttribute("name", "state");
    inputEl.setAttribute("size", 20);
    inputEl.setAttribute("value", postState);
    parentObj.appendChild(inputEl) ;
    }
    }

    var foundState = false; //global for third scrollbar

    function populateCity() {
    var selObj = document.getElementById('citySelect');
    var foundCity = false;
    // Empty options just in case new drop down is shorter
    if ( selObj.type == 'select-one' ) {
    for (var i = 0; i < selObj.options.length; i++) {
    selObj.options[i] = null;
    }
    selObj.options.length=null;
    selObj.options[0] = new Option('Select City','');
    selObj.selectedIndex = 0;
    }
    // Populate the drop down with states from the selected

    state (and country)
    var cityLineArray = city.split("|"); // Split into lines
    //alert (cityLineArray);
    var optionCntr = 1;
    for (var loop = 0; loop < cityLineArray.length; loop++) {
    lineArray = cityLineArray[loop].split(":");
    if (foundState==true) { //take a city only from a

    specified state:
    typeCode = TrimString(lineArray[0]);
    countryCode = TrimString(lineArray[1]);
    stateCode = TrimString(lineArray[2]);
    cityCode = TrimString(lineArray[3]);
    cityName = TrimString(lineArray[4]);
    } else { //no states so take a city from the

    country itself:
    typeCode = TrimString(lineArray[0]);
    countryCode = TrimString(lineArray[1]);
    stateCode = "";
    cityCode = TrimString(lineArray[2]);
    cityName = TrimString(lineArray[3]);
    }
    if (((typeCode=="STATE" && foundState==true) ||

    (typeCode=="COUNTRY" && foundState==false)) &&

    document.getElementById('countrySelect').value == countryCode &&

    (document.getElementById('stateSelect').value == stateCode ||

    foundState==false) && countryCode != '' && (stateCode != '' ||

    foundState==false)) {
    // If it's a input element, change it to

    a select
    if ( selObj.type == 'text' ) {
    parentObj =

    document.getElementById('citySelect').parentNode;
    parentObj.removeChild(selObj);
    var inputSel =

    document.createElement("SELECT");
    inputSel.setAttribute

    ("name","city");
    inputSel.setAttribute

    ("id","citySelect");
    parentObj.appendChild(inputSel) ;
    selObj = document.getElementById

    ('citySelect');
    selObj.options[0] = new Option

    ('Select City','');
    selObj.selectedIndex = 0;
    }
    if ( cityCode != '' ) {
    selObj.options[optionCntr] = new

    Option(cityName, cityCode);
    }
    // See if it's selected from a previous

    post
    if ( cityCode == postCity && countryCode

    == postCountry && stateCode == postState) {
    selObj.selectedIndex =

    optionCntr;
    }
    foundCity = true;
    optionCntr++
    }
    }
    // If the state has no cities, change the select to a

    text box
    if ( ! foundCity ) {
    parentObj = document.getElementById

    ('citySelect').parentNode;
    parentObj.removeChild(selObj);
    // Create the Input Field
    var inputEl = document.createElement("INPUT");
    inputEl.setAttribute("id", "citySelect");
    inputEl.setAttribute("type", "text");
    inputEl.setAttribute("name", "city");
    inputEl.setAttribute("size", 20);
    inputEl.setAttribute("value", postCity);
    parentObj.appendChild(inputEl) ;
    }
    }




    function initCountry(country) {
    populateCountry(country);
    populateState();
    populateCity();
    }

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Have a look at www.capsulecomments.com and you will see what is there and how it works.

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    web page

    The page is at www.capsulecomments.com

  • #6
    New Coder
    Join Date
    Aug 2010
    Location
    Illinois
    Posts
    20
    Thanks
    1
    Thanked 1 Time in 1 Post
    I'm sorry. I have not been able to view your form code. Your page keeps hanging with translate.googleapis.com, and does not fully load.

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This matter is now resolved. It can be viewed at capsulecomments.com. Thanks for the input.

  • #8
    New Coder
    Join Date
    Aug 2010
    Location
    Illinois
    Posts
    20
    Thanks
    1
    Thanked 1 Time in 1 Post
    I noticed you have some lines that you intended to have commented out, and they are not...

    Code:
    //City table.
    //
    // To edit the list, just delete a line or add a line. Order is 
     
    important.
    // If the city is in a state, write STATE before the relevant 
     
    codes (codes being GB, US etc)
    // If the city is in a country, write COUNTY before the relevant 
     
    codes (appears without a state being selected)
    // The order displayed here is the order it appears on the drop 
     
    down.
    //
    Be sure to add // this to those lines that aren't correctly commented out. Without them, you will have an error.

  • #9
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Commented //

    Interesting point, however those lines ARE commented out and always were. The script runs fine with no errors. You can now view the website at capsulecomments.com

    Thanks for the input though.

  • #10
    New Coder
    Join Date
    Aug 2010
    Location
    Illinois
    Posts
    20
    Thanks
    1
    Thanked 1 Time in 1 Post
    Actually, they are not commented out.

    If they were you would have:

    Code:
    //City table.
    //
    // To edit the list, just delete a line or add a line. Order is 
     
    //important.
    // If the city is in a state, write STATE before the relevant 
     
    //codes (codes being GB, US etc)
    // If the city is in a country, write COUNTY before the relevant 
     
    //codes (appears without a state being selected)
    // The order displayed here is the order it appears on the drop 
     
    //down.
    //
    IE recognizes this and generates an error alert. I don't know if that bothers you at all. When I build sites, I personally try to avoid that yellow alert icon that tells visitors something is wrong with your page (whether it actually effects the performance or not).

    I'm not a big fan of IE, but I always do cross-browser checking.

    The error from IE is:
    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; CPNTDF; .NET4.0C)
    Timestamp: Thu, 2 Sep 2010 19:39:57 UTC


    Message: Expected ')'
    Line: 180
    Char: 14
    Code: 0
    URI: http://www.capsulecomments.com/

  • #11
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am curious as to the version of IE you are using if you are getting an error message. The coding was checked on Firefox, IE 8, Safari, Opera and Google before the site was posted, and then again after it was posted. For me, using IE 8, it works fine and displays the entire page as intended. Also, I checked one of my writers just now at Peru - Arequipa - Arequipa and it also displays as intended in IE 8. I had also asked three techie friends in other countries to check the site for me after it was originally posted, and they also found it completely functional with all browsers.

    As for the //, if you expand your viewing window to avoid wrap-around, you will note that the commenting is correct. If you are viewing it where the word 'important' is on a new line, then expand it and you will see that it is all on one line. The fact that it works are intended tells me that all is well.

  • #12
    New Coder
    Join Date
    Aug 2010
    Location
    Illinois
    Posts
    20
    Thanks
    1
    Thanked 1 Time in 1 Post
    yeah... sorry. I'm not trying to harass you about it. But to answer your question. I'm using IE 8. I have attached two screen shots that I hope help.

    It does not look like IE is wrapping it, because the source shows plenty of lines that extend beyond "x" amount of characters.

    But this particular area in the code where it generates an error, looks like a line break. And it is generating an error on my version of IE, which does not have add-ons or plugins.

    I'll leave it alone. But just wanted to show you what I'm seeing. You may need to view these in full resolution to see it well.

    Notice the bottom left where it reads, "done, but with errors on page". If I double click that, it identifies the parenthesis on line 179. Since it is not needed, and it seems to be working fine for you and not for me, I would just remove it anyhow.

    At least you'll know that other people aren't getting an error warning. But if it's good enough, that's fine. No need to be as picky as I am.




    And...



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •