how to make a "go to" box

**cornishcharlie** · 05-21-2012, 05:57 AM

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

**cornishcharlie** · 05-21-2012, 12:28 PM

Any one?
I'm happy to take guesses

**xelawho** · 05-21-2012, 02:58 PM

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>

**cornishcharlie** · 05-22-2012, 05:26 AM

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

**nap0leon** · 05-22-2012, 10:39 AM

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: how to make a "go to" box

Thread Tools

Display

how to make a "go to" box

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions