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 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    You may want to alter what I have for checking the length of the zip code. I have given you google as a lace to go. You can see that the zip is added in the address bar.
    HTML:
    Code:
    <!DOCTYPE html>
    <!DOCTYPE html>
    <html>
    <head><title>Title</title></head>
    <body>
    Enter zip code<input type="text" id="zip" onfocus="clean();"><br />
    Select a Web Site
    <select name="sel" id="sel" onchange="go_there(this.value);">
        <option value="">Select...</option>
        <option value="http://www.URL1.com/page">WEBSITE1</option>
        <option value="http://www.URL2.com/page">WEBSITE2</option>
        <option value="http://www.google.com">WEBSITE3</option>
    </select>
    
    
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    function go_there(url){
    	tab = $("#zip").val();
    	if(tab == ''){
    		zero("Enter Your Zip Code");
    	}else if(isNaN(tab)){
    		zero("Must be a Number");
    	}else if(tab.length < 5){
    		zero("Too Short");
    	}else{
    		addon = $("#zip").val();
    		$("#zip").css("border", "1px solid black");
    		place = url+"?"+tab;
    		location.href = place;
    	}
    }
    function zero(message){
    	$("#zip").css("border", "1px solid red");
    	$("#zip").val(message);
    	$("#sel :nth-child(1)").prop('selected', true);
    }
    function clean(){
    	$("#zip").css("border", "1px solid black");
    	$("#zip").val("");
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    aaronrusso (11-05-2013)

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Follow Up

    Thats getting closer, but the issue is that the when you choose an option in the dropdown, that option URL has a "?zipcode=" section, where the URL takes the zipcode chosen, puts it in that area, and passes the browser to that URL on submit. The URL detects this zipcode, and displays the appropriate page depending on the zipcode and URL choice. I just tested this and it didnt work. Also this needs to be done with a submit button, not on choice. But this is closer than I got it so far! Any ideas?

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Nevermind, I got it to work, just missing a string. Thanks!

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Actually, I did get it to work, and thanks for that, but I cant seem to write it so it uses a "submit" button instead of just going to the URL on selection. Can you show me how to write it with a button rather than going to the URL when you select an option? Thanks

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Why do you want that? A form refreshes the page and you lose things without more programming. I set it up so you don't need a button.

    If you really need a button do that, A BUTTON with onclick to go your JS, but remove the onchange in the select and you will need to get that value via the JS.

    Give it a try.
    Evolution - The non-random survival of random variants.

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Trust me, not my first choice, its a client preference.

    This is the added button code:

    Code:
    <input type="button" onClick="go_there(this.value);">
    I put in a zip code using your example, picked a drop down option, and hit the button, and it adds the zipcode at the end of the URL now, but it does so in its own page (so it doesnt go to the chosen URL in the dropdown).

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    It's <input type="button" onClick="go_there();"> The button has no value to pass.
    And the function is go_there() , because it is not receiving anything.

    Inside the JS function you need to get the value of the select.
    use:
    var thing = document.getElementById("sel");
    var url = thing .options[thing.selectedIndex].value;

    If your still having trouble post the code your now using.
    Good Luck
    Last edited by sunfighter; 11-05-2013 at 08:15 PM.
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    aaronrusso (11-05-2013)

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Seems to work now. Appreciate the help!


  •  

    Tags for this Thread

    Posting Permissions

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