#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0

    Lightbulb Conditional Form Help Needed


    Hi

    I need a conditional form like this-->




    <!DOCTYPE html>
    <html>
    <head>
    <title>Store Locator</title>
    <style>
    body {
    margin: 20px;
    font: 12pt Constantia, Garamond, serif;
    }

    select {
    min-width: 200px;
    }

    #address {
    font-size: 16pt;
    }

    #map object {
    width: 600px;
    height: 400px;
    border: 1px solid #000;
    }
    </style>
    <script>
    var stores = {
    DC: [
    "District of Columbia",
    ["The White House", "1600 Pennsylvania Avenue NW, Washington, DC 20500"]
    ],
    OK: [
    "Oklahoma"
    ],
    NY: [
    "New York",
    ["Original Soup Man", "259 West 55th Street, New York, NY 10019"],
    ["Tom's Restaurant", "2880 Broadway, New York, NY 10025"]
    ]
    };

    window.onload = function() {
    var el_state = document.getElementById("state");
    var el_store = document.getElementById("store");
    var el_address = document.getElementById("address");
    var el_map = document.getElementById("map");

    for (var i in stores) {
    el_state.options[el_state.options.length] = new Option(stores[i][0], i);
    }

    el_state.onchange = function() {
    el_store.options.length = 0;
    var len = stores[this.value].length;
    for (var i = 1; i < len; i++) {
    el_store.options[el_store.options.length] = new Option(stores[this.value][i][0], stores[this.value][i][1]);
    }
    }

    el_store.onchange = function() {
    el_address.innerHTML = "<b>" + this.options[this.selectedIndex].text + "</b><br />" + this.value;
    while (el_map.hasChildNodes()) {
    el_map.removeChild(el_map.firstChild);
    }
    var obj = document.createElement("object");

    }
    }
    </script>
    </head>

    <body>
    <h3>Choose a store:</h3>
    <select id="state" size="10"></select>
    <select id="store" size="10"></select>
    <p id="address"></p>
    <div id="map"></div>
    </body>
    </html>






    But i need more options. For example;

    -Continent
    -Country
    -State
    -Store ... etc.

    Can anyone help me?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0
    Can anyone help?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7
    What do you mean by "conditional" form?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0
    Originally Posted by Triple_Nothing
    What do you mean by "conditional" form?
    There must be new and different options. For example if you click asia new options must be China, Japan, Mongolia etc...

    If you click Europe, new options must be England, Spain, France, Germany etc... And if you click Spain, new options must be Madrid, Barcelona, Sevilla etc.

    When you click the last option there must be a write like "You choosed Europe, Spain, Sevilla City."

    I need something like this
  8. #5
  9. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    This is not a html question this is either a javascript or php question.

    have a look here its just a sample of a conditional form with the use of jquery
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome to DevShed Forums, woLkhan.

    You need JavaScript to do that. I recommend you check these out:
    http://www.bobbyvandersluis.com/arti...ynamic_select/
    Chain select (javascript)
    accessible dependent dropdowns
    Dynamic Dropdown Boxes

    P.S. When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).

    *** Thread Moved ***
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0
    Thanks for recommends but i have never worked with JavaScript.
    Thats why i tried to work with html. I thought i can do it with html

    Thanks for help
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    HTML is static. All it can do is display information and provide links (and forms) to allow users to get to more pages. If you want to add features that do more to respond to user input you need (client-side) JavaScript and/or a server-side language (like PHP).

    Out of curiosity, if you don't want to use JavaScript (JS) why did you post an example of a JS script?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo