www.webdeveloper.com
Results 1 to 2 of 2

Thread: Dynamic Form with Dropdown Menu and Text Box

  1. #1
    Join Date
    Jan 2012
    Posts
    3

    Dynamic Form with Dropdown Menu and Text Box

    Hi All, not sure if this is a javascript question or a form question, but I have a new project Im working on regarding a form.

    People have a drop down menu within this script or form that has three choices. Each choice needs to reference a different URL for the choice, and then go to it on Submit. Thats the easy part. The hard part is that the script/form also has a text box in it that has a zip code to be placed inside. So for example, someone chooses the first option, and puts in a zipcode within the text field and hits "submit", so when its submitted it goes to a URL + the zipcode.

    Code:
    <form name="URL_TEST">
    <input type="text"/>
                        <select name="selected" id="target">
                        <option selected>Select...</option>
                        <option value="http://www.URL1.com/page?zipcode=[ZIPCODE]">WEBSITE1</option>
                        <option value="http://www.URL2.com/page?zipcode=[ZIPCODE]">WEBSITE2</option>
                        <option value="http://www.URL3.com/page?zipcode=[ZIPCODE]">WEBSITE3</option>
                        </select>
                        <input type="submit" name="submit" id="submit" value="Submit"/>
    </form>
    This is kind of a crude bit of code, I know (just took it briefly from dreamweaver), but what Im trying to do with the above is have the "input type="text"" be filled it, and connected to one of the "[ZIPCODE]" options on submit. So you can put a zipcode into the text field, choose option one, hit submit, and it will go to the URL, replacing the "ZIPCODE" area of the URL with the zipcode that was typed in. Im sure this is more complicated, but Im not sure where to start/complete/finish this. Any ideas? Thanks

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    try this

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Dynamical changing options value</title>
    <script>
    var urls=['http://www.URL1.com/','http://www.URL2.com/','http://www.URL3.com/'];
    
    function doc(id){return document.getElementById(id);}
    
    function buildSelect(){
    var opts=doc('sel').options;
    opts[0]=new Option('Select...','');
    for(var i=0;i<urls.length;i++){
    opts[opts.length]=new Option('WEBSITE '+i,urls[i]);
    }
    doc('sel').onchange=function(){
    if(this.selectedIndex>0){
    location.href=this.options[this.selectedIndex].value;
    }
    }
    }
    
    function init(){
    buildSelect();
    doc('zip').onchange=function(){
    var opts=doc('sel').options,val=this.value;
    /* this may need val (zipcode) format check */
    if(val){
    for(var i=1;i<opts.length;i++){opts[i].value+='page?zipcode='+val;}
    }
    }
    }
    
    window.onload=init;
    </script>
    </head>
    <body>
    <div id="url_test">
    <input id="zip" type="text" />
    <select id="sel"></select>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles