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

    Join Date
    Apr 2013
    Posts
    6
    Rep Power
    0

    Very new and need help!


    Hi there,
    I am completely new to the world of javascript, 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 code and be re-directed to a "regional page". I would hope that if a user entered any of the ~3 of the regional zip codes in the field they would be redirected to that regions page. I have already created about 15+ regional pages, and would like stay away from using any databases. Here is what I have so far
    Code:
    <html>
    <head>
    
    <center>
        <form method="post" action="javascript: goTo();">
          <div>
            <input id="pageNumber" type="text" value="Enter Your Zip Code"
              </head>
    <body>
    <script>
    function newDoc(zipcode1, zipcode2, zipcode3,)
      {
       
        window.location.assign("my.url/region1").innerHTML=newDoc(zipcode1, zipcode2, zipcode3)
      }
    </script>
    </head>
    <body>
    
    <input type="submit" value="Go" onclick="newDoc()">
    <p id="demo"></p>
    
    </body>
    </html>
    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. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,134
    Rep Power
    120
    In my opinion; your going about doing this in a complicated way, but if I was going to go about doing this (in your code's fashion); I would do something like this (Note: you may have caching and browser history issues, when done this way):
    Code:
    <script>
    
    var content;
    
    function newContent()
    {
    var zip = document.getElementById("pageNumber").value;
    document.open();
    document.close();
    switch (zip) {
    case "00001":
    content="Blah";
    break;
    case "00002":
    content="Blah, blah";
    break;
    case "00003":
    content="Blah, blah, blah";
    break;
    }
     if (content == undefined) {
      content="Error, Please Go Back & Enter Your Region";
     }
    document.body.innerHTML = content + "<div style=\"text-align:center;margin-top:50px\"><a href=\""+document.location.href+"\">Previous Page</a></div>";
    }
    
    </script>
    
    <input id="pageNumber" type="text" value="Enter Your Zip Code"/>
    <input type="button" value="Go To Region!" onclick="newContent()"/>
    Although, what I probably would do (if I was not going to use a database and was going to use inline/static or hard coded JavaScript based data storage and validation); is something like this:
    Code:
    <script>
    
    var content;
    
    function newContent()
    {
    var zip = document.location.href.split("?pageNumber=")[1];
    if (zip != undefined) {
     switch (zip) {
      case "00001":
      content="Blah";
      break;
      case "00002":
      content="Blah, blah";
      break;
      case "00003":
      content="Blah, blah, blah";
      break;
     }
      if (content == undefined) {
       content="Error, Your Region Was Not Found - Please Try Again";
      }
       document.body.innerHTML = content;
     }
    }
    
    function checkForNum()
    {
    var zippy = parseInt(document.getElementById("pgNum").value).toString();
    var zipLen = document.getElementById("pgNum").value.length;
    if (zipLen == 5) {
      if (zippy == "NaN") {
       alert("Please Enter A Numeric Regional Number");
      }
      else {
       document.getElementById("regionForm").onsubmit = function(){
        return true;
       }
      }
     }
     else {
      alert("Please Enter Your Five Digit Regional Code");
     }
    }
    
    window.onload = function() {
    newContent();
    }
    
    </script>
    
    <form id="regionForm" onsubmit="return false">
    <input id="pgNum" name="pageNumber" type="text" value="Enter Your Zip Code" maxlength="5"/>
    <input type="submit" onclick="checkForNum()"/>
    </form>

    Comments on this post

    • Winters agrees : No idea why you have so few reputation points.
    Last edited by web_loone08; April 25th, 2013 at 02:07 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    6
    Rep Power
    0

    Red face


    Awesome it seems like this will work! But I forgot to mention that I am in a weird situation that I will need to link the zip codes to a completely different website that host the regional information. What would I have to do if some one entered zip code "00001" , "00002" , or "00003" in the field and I want to send them to the external link http://myaddress1.com/region1

    Code:
    function newContent()
    {
    var zip = document.location.href.split("?pageNumber=")[1];
    if (zip != undefined) {
     switch (zip) {
      case "00001":
      content="Blah";
      break;
      case "00002":
      content="Blah, blah";
      break;
      case "00003":
      content="Blah, blah, blah";
      break;
     }


    Originally Posted by web_loone08
    In my opinion; your going about doing this in a complicated way, but if I was going to go about doing this (in your code's fashion); I would do something like this (Note: you may have caching and browser history issues, when done this way):
    Code:
    <script>
    
    var content;
    
    function newContent()
    {
    var zip = document.getElementById("pageNumber").value;
    document.open();
    document.close();
    switch (zip) {
    case "00001":
    content="Blah";
    break;
    case "00002":
    content="Blah, blah";
    break;
    case "00003":
    content="Blah, blah, blah";
    break;
    }
     if (content == undefined) {
      content="Error, Please Go Back & Enter Your Region";
     }
    document.body.innerHTML = content + "<div style=\"text-align:center;margin-top:50px\"><a href=\""+document.location.href+"\">Previous Page</a></div>";
    }
    
    </script>
    
    <input id="pageNumber" type="text" value="Enter Your Zip Code"/>
    <input type="button" value="Go To Region!" onclick="newContent()"/>
    Although, what I probably would do (if I was not going to use a database and was going to use inline/static or hard coded JavaScript based data storage and validation); is something like this:
    Code:
    <script>
    
    var content;
    
    function newContent()
    {
    var zip = document.location.href.split("?pageNumber=")[1];
    if (zip != undefined) {
     switch (zip) {
      case "00001":
      content="Blah";
      break;
      case "00002":
      content="Blah, blah";
      break;
      case "00003":
      content="Blah, blah, blah";
      break;
     }
      if (content == undefined) {
       content="Error, Your Region Was Not Found - Please Try Again";
      }
       document.body.innerHTML = content;
     }
    }
    
    function checkForNum()
    {
    var zippy = parseInt(document.getElementById("pgNum").value).toString();
    var zipLen = document.getElementById("pgNum").value.length;
    if (zipLen == 5) {
      if (zippy == "NaN") {
       alert("Please Enter A Numeric Regional Number");
      }
      else {
       document.getElementById("regionForm").onsubmit = function(){
        return true;
       }
      }
     }
     else {
      alert("Please Enter Your Five Digit Regional Code");
     }
    }
    
    window.onload = function() {
    newContent();
    }
    
    </script>
    
    <form id="regionForm" onsubmit="return false">
    <input id="pgNum" name="pageNumber" type="text" value="Enter Your Zip Code" maxlength="5"/>
    <input type="submit" onclick="checkForNum()"/>
    </form>
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,134
    Rep Power
    120
    You would do it something like this:
    Code:
    function newContent()
    {
    var zip = document.location.href.split("?pageNumber=")[1];
    if (zip != undefined) {
     switch (zip) {
       case "00001":
       content="http://myaddress1.com/region1";
       break;
       case "00002":
       content="http://myaddress2.com/region2";
       break;
       case "00003":
       content="http://myaddress3.com/region3";
       break;
      }
       document.location.href = content;
     }
    }
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    6
    Rep Power
    0

    Red face


    Hmmmm that looks like it would make sense, but when I hit submit nothing happens



    Originally Posted by web_loone08
    You would do it something like this:
    Code:
    function newContent()
    {
    var zip = document.location.href.split("?pageNumber=")[1];
    if (zip != undefined) {
     switch (zip) {
       case "00001":
       content="http://myaddress1.com/region1";
       break;
       case "00002":
       content="http://myaddress2.com/region2";
       break;
       case "00003":
       content="http://myaddress3.com/region3";
       break;
      }
       document.location.href = content;
     }
    }
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    6
    Rep Power
    0
    OH my I'm sorry I must have pasted this in wrong. It works!!!!!
    Thank you so much for helping me!



    Originally Posted by camcarter2010
    Hmmmm that looks like it would make sense, but when I hit submit nothing happens
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    6
    Rep Power
    0

    One more question


    I was curious if someone puts in an unrecognized number, how should I change the code to where they get redirected to a particular internal page?

    Kind Regards







    Originally Posted by camcarter2010
    OH my I'm sorry I must have pasted this in wrong. It works!!!!!
    Thank you so much for helping me!

IMN logo majestic logo threadwatch logo seochat tools logo