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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Form zip code linking without database

    Hi there,
    I am completely new to the world of web design, and I am trying to learn some basic functions I need to incorporate into an html section on this online website builder.

    I basically want to create a form where a user can enter their zip and be re-directed to a "regional page". I would hope that if a user entered any of the ~7 of the regional zip codes in the field they would be redirected to that particular region's page with all the relevant info. I have already created about 15+ regional pages, and would like stay away from using any databases. Here is what I have so far, and of course it doesn't work. I know I'm completely wrong...

    <html>
    <head>
    <script type="text/javascript">

    function newDoc()
    {
    var codes = [ 12345, 23456,45678, 12346, 09876]
    window.location.assign("http://www.my-website.com/region1")
    }
    </script>

    </head>
    <body>
    <center>
    <form method="post" action="javascript: goTo();">
    <div>
    <input id="pageNumber" type="text" value="Enter Your Zip Code"
    </head>
    <input type="submit" value="Go" onclick="newDoc()">
    </div>
    </form>
    </body>


    Am I ball parking it at all. Please forgive any redundancy I been on w3school all day trying to learn, and this is what I have.

    Any help would be greatly appreciated!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    This ought to move you forward:-


    Code:
    <html>
    <head>
    </head>
    <body>
    <center>
    
    <form id = "myform" method="post" action="">
    <div>
    <input type = "text" name = "pageNumber" id = "pageNumber" maxlength = "5" value = "Enter Your Zip Code: "  onfocus = "if (this.value == 'Enter Your Zip Code: ') this.value = '';"  onblur = "if (this.value == '') this.value = 'Enter Your Zip Code: ';" />
    <input type="button" value="Go" onclick="newDoc()">
    </div>
    </form>
    
    <script type="text/javascript">
    
    function newDoc() {
    var codes = ["12345", "23456", "45678", "12346", "09876"];
    var regions = ["region1", "region2", "region3", "region4", "region5"];
    
    var z = document.getElementById("pageNumber").value;
    if (/[^0-9{5}]/.test(z)) {  // must be 5 digits
    alert ("Please enter your zip code");
    document.getElementById("pageNumber").value = "";
    document.getElementById("pageNumber").focus();
    return false;
    }
    
    var r = 0;
    for (var i=0; i<codes.length; i++) {
    if (z == codes[i]) {
    r = regions[i];
    }
    }
    
    if (r==0) {
    alert ("Sorry - your zip code has not been recognised.");
    return false;
    }
    
    var url = "http://www.my-website.com/";
    url = url + r;
    alert (url);  // for testing
    window.location.href= url;
    }
    </script>
    
    </body> 
    </html>
    Note that alerts are obsolete except for test purposes and you should use DOM methods to display a message to your users.

    The <centrer> tag is also obsolete and deprecated - use CSS for styling your display.


    Quizmaster: Name an instrument which can be found hanging on the wall in many households.
    Contestant: A piano.
    Last edited by Philip M; 04-25-2013 at 11:52 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    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
    •