www.webdeveloper.com
Results 1 to 5 of 5

Thread: how to make a "go to" box

  1. #1
    Join Date
    May 2012
    Posts
    3

    how to make a "go to" box

    Hi Folks, I need to add a "go to" box on a project I am working on.
    The visitor comes to the site with a code. I need a box where they can enter that code and go directly to the correct article in the website. My php is poor, and I'm stuck. I may be going about this all wrong.

    To test I have made a text doc called "list.txt" and populated it as follows:

    A1234 = "http://www.google.com"
    A5468 = "http://www.ebay.com"
    A4321 = "http://www.facebook.com"
    A9876 = "http://www.youtube.com"

    I have then used the following code to reference it:

    <input type="text" id ="txtBox" />
    <input type="button" name="btnButton" value="Submit" onClick="checkValue()" />

    <script <script src="list.txt" type="text/javascript"></script>

    <script Language='JavaScript'>

    function checkValue() {
    var url = document.getElementById('txtBox').value;
    window.location.href = (url);
    }
    </script>


    Its a no go, if I put in the code A1234, it trys to find the webpage A1234

    however, if I make another variable "test" with the contents A1234 and change the line to:
    window.location.href = (test);

    it works no problem


    any help or advice for a newbie would be really appreciated

  2. #2
    Join Date
    May 2012
    Posts
    3
    Any one?
    I'm happy to take guesses

  3. #3
    Join Date
    Nov 2010
    Posts
    1,087
    I would guess that you are better off referencing the urls as properties of an object:

    Code:
    <body>
    <input type="text" id ="txtBox" />
    <input type="button" name="btnButton" value="Submit" onClick="checkValue()" />
    
    
    <script type="text/javascript">
    var codes={A1234 : "http://www.google.com",
    A5468 : "http://www.ebay.com",
    A4321 : "http://www.facebook.com",
    A9876 : "http://www.youtube.com"
    }
    function checkValue() {
    var val = document.getElementById('txtBox').value;
    window.location.href = codes[val];
    }
    </script>
    
    </body>

  4. #4
    Join Date
    May 2012
    Posts
    3
    Thank you so much for your reply, that works great, but I have a concern.
    I may end up with 300 to 400 urls I need to reference. I thought by putting the references (with or without script) in an external file, that they would not get loaded with the page, and only loaded when the function was executed, I can now see this is not the case, and the external file is loaded with the page.
    For a small number of references, thats fine, but with hundreds, that could be a problem.
    Is there any way of loading the references "onclick" ?


    ***Edit to above post***
    I've just tested Xelawho's script with 500 references. The increased size is about 20kb's and does not seem to impact the speed of the site, many thanks indeed
    Last edited by cornishcharlie; 05-22-2012 at 06:21 AM.

  5. #5
    Join Date
    Nov 2007
    Posts
    410
    Sine you have it working, the following would merely be an exercise for you to test out:

    1- move the array into a PHP array on a different page on your web server.
    2- code the page to accept the CODE as a URL parameter such that the only HTML that the page renders is either the URL or the words "Error - code not found".
    3- change your current "checkValue" function to perform an AJAX call to the new page, passing the code as a URL parameter
    4- when the AJAX requests returns with the result, if the response starts with "http" take the user to the new URL, otherwise show them the error message.

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