/    Sign up×
Community /Pin to ProfileBookmark

How to open new page in same window using text entry box?

I’ve been handed what appeared at first glance to be a trivial job. One of the management wants to have a text entry box on the home page into which he can type a model number – e.g., SSO-742-4P – hit return, and go to that page, with no intervening or additional steps required.

  • 1.

    This has to be done in JavaScript plus CSS plus HTML.

  • 2.

    Note that the model #’s have no necessary resemblance to the webpage filenames. Imagine an array of about 600 items, in which every other entry is either a model# or a filename.

  • 3.

    Fortunately, I already have the data in the form of such an array, altho the entries are in reverse order – filename1, model#1, … filenamen, model#n.

  • 4.

    The data exists in an external JavaScript file and is used for a drop-down selector. Most of the pages depend heavily on JavaScript document.write, as there is a consistent set of large display html chunks shared by dozens or hundreds of pages. Using the existing array will reduce bandwidth load significantly.

  • So, imagine a little text-entry box, probably a form, into which you type in a model # and immediately go to the page corresponding to it. No PHP, server-side, etc., allowed.

    Oh, and in the SAME window!!!

    I’m pretty good at hacking, so if I can see a working example that does more than this, I can probably pare and slice down to what I need. Like I said, this seemed like a trivial job until I tried to do it. I was handed examples or partially coded sections that opened new windows or required a check-off on an alert, or wanted the data to be stuck into the html as DIVs with IDs, which would be the search key. None of which ultimately worked.

    Thanks for any help.

    to post a comment
    JavaScript

    30 Comments(s)

    Copy linkTweet thisAlerts:
    @konithomimoNov 05.2005 — Well, since you already have the array then there isn't much more to do other than create the textbox and the search function for the array:
    <i>
    </i>&lt;script link="file.js" type="text/javascript"&gt;
    function find_page()
    {
    var i=0;

    for (i; i&lt;myarray.length(); i+2)
    {
    if (document.getElementById('search_text').value == myarray[i])
    {
    window.location = myarray[i+1];
    }
    }

    alert('There is no such file. Please try again.');
    }
    &lt;/script&gt;

    In the above script 'seach_text' is the ID of the textbox and myarray is the name of the array. Of course you would have to change those to whatever you need. Also, make sure to give the textbox an ID or else the abopve script wont work.
    Copy linkTweet thisAlerts:
    @Mr_JNov 05.2005 — I think you need it this way


    [code=php]<script type="text/javascript">
    <!--
    myarray=new Array()
    myarray[0]=["file1.htm","#1"]
    myarray[1]=["file2.htm","#2"]
    myarray[2]=["file3.htm","#3"]
    myarray[3]=["file4.htm","#4"]

    function find_page(){
    found=0

    for (i=0; i<myarray.length; i++){

    if (document.getElementById('search_text').value == myarray[i][1]){
    found=1
    window.location = myarray[i][0]
    }

    }

    if(found==0){
    alert('There is no such file. Please try again.');
    }

    }
    //-->
    </script>

    <input type="text" name="search_text" id="search_text">
    <input type="button" value="Click" onclick="find_page()">[/code]
    Copy linkTweet thisAlerts:
    @konithomimoNov 05.2005 — I think you need it this way


    [code=php]<script type="text/javascript">
    <!--
    myarray=new Array()
    myarray[0]=["file1.htm","#1"]
    myarray[1]=["file2.htm","#2"]
    myarray[2]=["file3.htm","#3"]
    myarray[3]=["file4.htm","#4"]

    function find_page(){
    found=0

    for (i=0; i<myarray.length; i++){

    if (document.getElementById('search_text').value == myarray[i][1]){
    found=1
    window.location = myarray[i][0]
    }

    }

    if(found==0){
    alert('There is no such file. Please try again.');
    }

    }
    //-->
    </script>

    <input type="text" name="search_text" id="search_text">
    <input type="button" value="Click" onclick="find_page()">[/code]
    [/QUOTE]



    He already has the array set up:

    3. Fortunately, I already have the data in the form of such an array, altho the entries are in reverse order - filename1, model#1, ... filenamen, model#n.[/QUOTE]

    All that he has to do is search through it. Thus he wont have to create a new array. He just has to access the one from his JS file.
    Copy linkTweet thisAlerts:
    @Mr_JNov 05.2005 — True, but by including the small array in my example allows the function to be tested as a stand alone before it is integrated into his main script
    Copy linkTweet thisAlerts:
    @Number1authorNov 07.2005 — konithomimo;

    Thanks for your help. You're correct about the array already being set up, altho I essentially used Mr. J's approach of building one on the fly for testing. However, the existing array is flat, one-dimensional, as you assumed - not (a,b)(c,d), but rather (a,b,c,d).

    However, when I tried to use an modified input from the body that was already working with a previous script, I could never get the function to actually do anything. The alert bug trackers never fired at all.

    here's the script, based on your example:

    <html>

    <title>JS Search</title>

    <script type="text/javascript" language="javascript">

    function find_page()

    {

    alert("start");

    var Models = new Array("page1.htm", "Model1", "page2.htm", "Model2", "page3.htm", "Model3", page4.htm", "Model4");

    var i=1;

    for (i; i<myarray.length(); i+2)

    {

    if (document.getElementById('model').value == myarray[i])

    {

    window.location = myarray[i-1];

    }

    } else {



    alert('There is no such file. Please try again.');

    }

    }

    </script>



    </head>



    <body>
    <form onsubmit="find_page(model.value);" action="#">
    <label for="model">Model #:</label>
    <input type="text" id="model">
    <input type="submit" value="Go" >
    </form>
    </body>


    </html>

    I'm sure that I'm making some silly mistake(s) due to not having much experience in JavaScript.
    Copy linkTweet thisAlerts:
    @Mr_JNov 07.2005 — There are errors in konithomimos script.


    [code=php]
    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    </HEAD>
    <BODY>
    <script type="text/javascript">
    <!--
    var Models = new Array("page1.htm", "Model1", "page2.htm", "Model2", "page3.htm", "Model3", "page4.htm", "Model4")


    function find_page(){
    found=0

    for (i=0; i<Models.length; i++){

    if(document.getElementById('search_text').value.toLowerCase() == Models[i].toLowerCase()){
    found=1

    //window.location = Models[i-1]

    alert(Models[i-1] ) // for testing purposes
    }

    }

    if(found==0){
    alert('There is no such file. Please try again.');
    }

    }
    //-->
    </script>

    <input type="text" name="search_text" id="search_text">
    <input type="button" value="Click" onclick="find_page()">

    </BODY>
    </HTML>
    [/code]
    Copy linkTweet thisAlerts:
    @Number1authorNov 08.2005 — Mr. J;

    Thanks for your input. It may be tomorrow before I'm able to properly look at this, but one potential problem seems to be where you are beginning the loop. My recollection is that arrays start at i = 0, for the first element.


    But the existing array is in reversed order. I have to pick up the model# starting in array position "1", not "0", altho, on a second look, that may not matter...

    We'll see soon. Thanks again.
    Copy linkTweet thisAlerts:
    @konithomimoNov 08.2005 — Actually, my code didn't have errors. He never gave an exact description of his array, other than it was the document name and then the page. The reason why his code isn't working (as you pointed out) is because he left in my varibale names, and because since the array is page,filename instead of how he said (filename,page) then he has to use i-1 instead of i+1.

    He named his array:

    Models

    but then he used my function, which tries to test for the variable:

    myarray

    If he replaces all of the "myarray"s with "Model" then it should be fine. ?

    The mistakes in the above code had nothing to do with how my code was.

    plus MrJ, for the specifics of his function i should start at 1 and add two each time, not 1. However, the above code will work. It will just check more objects than needed, which won't be a problem unless you are checking a very large array. ?
    Copy linkTweet thisAlerts:
    @Number1authorNov 08.2005 — Well, that was my mistake in grabbing the wrong file to copy over. Because I can't do the coding on the same machine that I work on, there are numerous chances for error. I know that I did correct the array names, etc., at some point, but I'll have to get back to this tomorrow...

    Sorry to have confused matters...
    Copy linkTweet thisAlerts:
    @konithomimoNov 08.2005 — If it was me I would add to the script to check if the array is valid for your method.
    <i>
    </i>&lt;HTML&gt;
    &lt;HEAD&gt;
    &lt;TITLE&gt;Document Title&lt;/TITLE&gt;
    &lt;/HEAD&gt;
    &lt;BODY&gt;
    &lt;script type="text/javascript"&gt;
    &lt;!--
    var Models = new Array("page1.htm", "Model1", "page2.htm", "Model2", "page3.htm", "Model3", "page4.htm", "Model4")


    function valid_array() //Checks to see if every even element is a valid webpage extension.
    {
    var mystring = "";
    for (i=0; i&lt;Models.length; i+2){
    mystring = Models[i].charAt(Models[i].length()-4) + Models[i].charAt(Models[i].length()-3) + Models[i].charAt(Models[i].length()-2) + Models[i].charAt(Models[i].length()-1);

    if ((mystring!= "html") || (mystring != ".asp") || (mystring != ".php") || (mystring != ".htm"))
    { return false;}
    }

    return true;
    }


    function find_page(){

    if (valid_array() == "false")
    {
    alert('Your array does not fully comply with your desired format.");
    }

    else
    {
    found=0

    for (i=1; i&lt;Models.length; i+2){

    if(document.getElementById('search_text').value.toLowerCase() == Models[i].toLowerCase()){
    found=1

    //window.location = Models[i-1]

    alert(Models[i-1] ) // for testing purposes
    }

    }

    if(found==0){
    alert('There is no such file. Please try again.');
    }

    }
    }
    //--&gt;
    &lt;/script&gt;

    &lt;input type="text" name="search_text" id="search_text"&gt;
    &lt;input type="button" value="Click" onclick="find_page()"&gt;

    &lt;/BODY&gt;
    &lt;/HTML&gt;
    Copy linkTweet thisAlerts:
    @Mr_JNov 08.2005 — [B]konithomimo[/B]

    When I tried the first code you posted it locked up my browsers here's what I noticed.

    Loops normally go like this

    for(var i; i<;myarray.length; i++)

    not

    var i=0

    for(i; i<myarray.length; i++)

    I also got an error [B]length is not a function[/B]

    because you'd included the parenthes on length in myarray.length

    and the alert was shown even when a file was found.

    With regards to my loop, like you say it doesn't really matter unless it is an extremely long array and speed is of paramount importance, but as it stands it would allow for the paired inputs to be reversed without any amendments to the script.

    As for checking the array I think it is a bit overkill for what is required.

    [B]konithomimo[/B] I am not being argumentative by making these remarks, they are only observations.
    Copy linkTweet thisAlerts:
    @konithomimoNov 08.2005 — Loops normally go like this

    for(var i; i<;myarray.length; i++)

    not

    var i=0

    for(i; i<myarray.length; i++)
    [/QUOTE]

    In loops you can define a variable and set its value inside or outside of the loop statement.

    And as far as the other errors, my original script was supposed to be a template to work from, not a fully working script. If it was then it would have been:
    <i>
    </i>&lt;script link="file.js" type="text/javascript"&gt;
    function find_page()
    {
    var i=0;

    for (i; i&lt;myarray.length; i+2)
    {
    if (document.getElementById('search_text').value == myarray[i])
    {
    window.location = myarray[i+1];
    }
    else{
    alert('There is no such file. Please try again.');
    }
    }


    }
    &lt;/script&gt;


    Also, it is better to validate in the script because if the filename returned is not a webpage then you will get a "This page cannot be displayed" message and have to go back to the previous page, which can make some people mad if it is a secure page and they cannot hit the back button to return there.

    The validate function will let the coder know if there is a problem in the array, meaning that a filename/Model might have been entered in the wrong place. Of course the validate function would have to be expanded upon to tell the coder what object in the array is wrong so that it can be fixed.
    Copy linkTweet thisAlerts:
    @Number1authorNov 09.2005 — konithomimo;

    OK, I took your script and modified it again, as it seems fairly straight-forward and my time is constrained. I put in all my debug alerts, systematically and checked it step by step, correcting as necessary. So, I get right to the wire and the new htm address is now accessed by window.location, and it refuses to accept it... Here's the code:

    <html>

    <title>JS Search</title>

    <script link="file.js" type="text/javascript">

    var ar = new Array("page1.htm", "Model1", "page2.htm", "Model2", "page3.htm", "Model3");

    function find_page()

    {

    var i=0;

    alert("length of array is " + ar.length);

    for (i; i<ar.length; i++)

    {

    alert("Element " + i +" is " +ar[i] +", Input string is " + document.getElementById('model').value);

    if (document.getElementById('model').value == ar[i])

    {



    Here = ar[i-1];

    alert(Here +" is the new address.");

    window.location = Here;

    alert("But " +window.location +" is the actual location.");

    }

    }



    alert("No such file. Please check your entry.")

    }

    </script>



    </head>



    <body>

    <form onsubmit="find_page(model.value);" action="#">

    <label for="model">Model #:</label>

    <input type="text" id="model">

    <input type="submit" value="Go" >

    </form>

    </body>
    Copy linkTweet thisAlerts:
    @konithomimoNov 09.2005 — Window.location will give you the current URL in the address bar. Make it:
    <i>
    </i>var here = ar[i-1];
    alert(here + " is the new address.");
    window.location.href = here;
    alert("But " + window.location+" is the actual location.");
    Copy linkTweet thisAlerts:
    @konithomimoNov 09.2005 — Here, I fixed your code:

    <i>
    </i>&lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;JS Search&lt;/title&gt;

    &lt;script type="text/javascript"&gt;
    var ar = new Array("page1.htm", "Model1", "page2.htm", "Model2", "page3.htm", "Model3");
    function find_page()
    {
    var i;
    for (i=0; i&lt;ar.length; i++)
    {
    if (document.getElementById('model').value == ar[i])
    {
    var here = ar[i-1];
    window.location.href=here;
    }
    else if (i == (ar.length-1))
    {
    alert('No such file found');
    }
    }
    }

    &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
    &lt;form&gt;
    &lt;input type="text" name="model" id="model" value=""&gt;
    &lt;input type="button" name="go" id="go" value="Go" onClick="find_page()"&gt;
    &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @Number1authorNov 09.2005 — konithomimo

    Nope. Still doesn't go to the new address. Please note that I'm using IE for developing. (Then I check it on other browsers.)
    Copy linkTweet thisAlerts:
    @konithomimoNov 09.2005 — So am I, and it is flawless for me.
    Copy linkTweet thisAlerts:
    @Number1authorNov 09.2005 — Mr J;

    Your approach almost works. But it still requires that separate input to click. I've tried a dozen or so ways to get it to fire without the separate input, but so far no luck. Here's the working code:

    <HTML>

    <HEAD>

    <TITLE>Document Title</TITLE>

    </HEAD>

    <BODY>

    <script type="text/javascript">

    <!--

    var Models = new Array("Page1.htm", "Model1", "Page2.htm", "Model2", "Page3.htm", "Model3")


    function find_page(){

    found=0

    for (i=0; i<Models.length; i++){

    if(document.getElementById('search_text').value == Models[i]){

    found=1;



    window.location = Models[i-1]



    }



    }



    if(found==0){

    alert('There is no such file. Please try again.');

    }



    }

    //-->

    </script>



    <input type="text" name="search_text" id="search_text">

    <input type="button" value="Go" onclick="find_page()">



    </BODY>

    </HTML>
    Copy linkTweet thisAlerts:
    @konithomimoNov 09.2005 — What happens when you run my code? Does it not work on any browser for you? I have tried it and have had no problems.
    Copy linkTweet thisAlerts:
    @konithomimoNov 09.2005 — You should format Mr. J's code properly:
    <i>
    </i>&lt;HTML&gt;
    &lt;HEAD&gt;
    &lt;TITLE&gt;Document Title&lt;/TITLE&gt;
    &lt;script type="text/javascript"&gt;
    &lt;!--
    var Models = new Array("Page1.htm", "Model1", "Page2.htm", "Model2", "Page3.htm", "Model3");


    function find_page(){
    var found=0;
    var i;
    for (i=0; i&lt;Models.length; i++){

    if(document.getElementById('search_text').value == Models[i]){
    found=1;

    window.location = Models[i-1];

    }

    }

    if(found==0){
    alert('There is no such file. Please try again.');
    }

    }
    //--&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;form&gt;
    &lt;input type="text" name="search_text" id="search_text"&gt;
    &lt;input type="button" value="Go" onclick="find_page()"&gt;
    &lt;/form&gt;
    &lt;/BODY&gt;
    &lt;/HTML&gt;
    Copy linkTweet thisAlerts:
    @Number1authorNov 09.2005 — konithomimo;

    Your new solution works, as does Mr J's, but now there is the problem of having a separate input box, as in Mr J's solution. This is getting to be a real challenge. There must be a way to have the user change addresses of a window via a RETURN, without requiring a separate input - that reguires taking their hands off the keyboard. I can open a new window without a separate input, but then I'm left with the parent window, which now requires a separate input to affirm that it should be closed - "Windows is trying to close ....."
    Copy linkTweet thisAlerts:
    @konithomimoNov 09.2005 — I am not quite sure what you are wanting here. The new script will load whatever page you want into the current page. Or you can make it load in another page and close the parent page (but that is pointless). Or you can make it open in an iframe in the page. The only input is the text box where they say what file they want. There is no other input.
    Copy linkTweet thisAlerts:
    @Number1authorNov 09.2005 — Mgt. here told me that the Co. President wanted a simple box on the home page of the company website into which he could type a model number, hit the return key and go directly to that page without further action. It was implied that he did NOT want a new window.

    Either of these objectives is easy enough to achieve. Both of them together are a problem. I can open in the same page - but only if I have a separate input - the "Go" button or some other device, presumeably. Or, I can open in a new page and close the old one, but at the cost of having the confirm box come up, constituting a separate action required.

    Note that the page in question is already loaded with features and options, including a very nice keyword search system as well as a drop down select box of all the model numbers that takes you right to the page. However, the largest of the four select option lists includes about 300 model numbers, which I can still navigate in a flash, but someone 20 years older ('70's) and not brought up as a native English speaker (Chinese) has to think about where "k" is relative to "r" in scrolling the 300 options.

    The keyword search system would return a whole list of pages, prioritized by hits, but it opens a separate window for key entry and then another window displaying the hits. It does not necessarily prioritize the main page for that model #, and when I tried initially to adapt it for this purpose, I ran into the same problems I discuss above.

    Bottom line: the prez wants a simple text entry, followed by a RETURN, to result in the current window updating to the new page.

    I checked all the usual JavaScript sources before I started looking for help on this, but they have no examples of doing this, and some of the college JavaSCript forums have a number of queries for the same thing - all in the "unanswered" box.

    So, this may be undoable within JavaScript. Or, it may be that most people simply do it in PHP, so they never put the effort into cracking the problem in JavaScript.
    Copy linkTweet thisAlerts:
    @Mr_JNov 09.2005 — Use a button instead of the submit button

    <input type="button" vaue="Go" onclick="find_page()">

    Sorry, this post seems to be a bit late :o
    Copy linkTweet thisAlerts:
    @Mr_JNov 09.2005 — Try this, use the return key.

    You can delete the button if not required

    Javascript is case sensitive so if a user was to enter model1 instead of Model1 you would not get a match hence the use of toLowerCase()

    [code=php]
    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    <script type="text/javascript">
    <!--
    var Models = new Array("Page1.htm", "Model1", "Page2.htm", "Model2", "Page3.htm", "Model3");


    function find_page(){
    var found=0;

    for (var i=0; i<Models.length; i++){

    if(document.getElementById('model').value.toLowerCase() == Models[i].toLowerCase()){
    found=1;

    window.location = Models[i-1];

    }

    }

    if(found==0){
    alert('There is no such file. Please try again.');
    }

    return false

    }
    //-->
    </script>
    </head>
    <body>
    <form onsubmit="return find_page()">
    <label for="model">Model #:</label>
    <input type="text" id="model">
    <input type="submit" value="Go" >
    </form>
    </BODY>
    </HTML>
    [/code]
    Copy linkTweet thisAlerts:
    @Number1authorNov 09.2005 — Mr J;

    I understood what the tolowercase was for; it's just that the Prez is going to expect everyone to type the model #'s in precisely, especially himself. From long past experience, I think he would want it that way. I do plan to add that as an enhancement of the keyword search system, though. As it stands, it requires all the key inputs to be in lowercase, which may be one reason the Prez doesn't like it.

    People from a ideogram literacy background often have trouble with things that we find trivial - alphabetic ordering, lettershapes with serifs, converting upper to lowercase. They memorize it one way and anything beyond that is a major headache for them. Imagine memorizing Chinese ideograms and then trying to read those warped 3D styled versions of them.

    I'll try the script you modified soon... Thanks
    Copy linkTweet thisAlerts:
    @Number1authorNov 10.2005 — XLNT! I figured that something would work. Have you seen that somewhere else, BTW? Just curious if this is a "first," as nobody else seemed to know how to do it...

    Now to try and fit it onto the page....

    Thanks
    Copy linkTweet thisAlerts:
    @Mr_JNov 10.2005 — It is not a first I'm afraid, its probably been done plenty of times, but I suppose you would have to inform the user that the return key can be used, also if the return key was press by accident or at the wrong time it could be a problem so it would be as easier to use the button.

    I have an example on my site

    www.huntingground.freeserve.co.uk/webplus/forms/return_key.htm
    Copy linkTweet thisAlerts:
    @konithomimoNov 10.2005 — Ok, so what you meant is that you wanted to use only one input object, not just one input . . . input is what the user puts in the textbox. If you had said that then I would have said to use the return key and onblur. Why both? you might ask . . . well, using the return key is fine, but if the person tabs away from the textbox then it is not in focus and the return key won't run the script. So, if you use onblur then when they tab away from the textbox the script runs. But, as MrJ pointed out, the return key is not the best option because it can trigger the script at the wrong time if pressed on accident, as can onblur since the tab key jight be pressed on accident. Then again, that isn't that big of a deal. it just makes the person get the message that their input is not valid and to try again. Then they just finish typing what they want to. I would suggest using onblur also. ?
    Copy linkTweet thisAlerts:
    @Number1authorNov 16.2005 — Thanks to both of you for much-needed assisstance...

    I'll look into the onblur as well.
    ×

    Success!

    Help @Number1 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...