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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Input form - Go To Page "X"

    I have seen this done before, for instance on Yahoo Groups, where a user can enter a page (or message) number, hit submit, and that particular page is loaded.

    I have a very large art gallery online with "next" and "previous" buttons, but would like to add an input form at the top so a user can enter a page number and just straight to that page. The gallery generator I use names the pages index.htm, index1.htm, index2.htm and so forth. So if someone enters a "4", I want it to load index3.htm.

    If anyone can tell me how to do this I would be very appreciative!
    Thanks!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    function goTo()
    {
    	window.location = 'index' + document.forms[0].where.value + '.htm';
    	return false;
    }
    </script>
    </head>
    
    <body>
    <form action="" method="post" onsubmit="return goTo()">
    <input type="text" name="where" value="Enter page number" onfocus="if(this.value == this.defaultValue) this.value = '';" onblur="if(this.value == '') this.value = this.defaultValue;">
    <input type="submit" value="Go">
    </form>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One more thing?

    Thanks, that works great! One thing though? Because the gellery generator names the index pages oddly (index.htm, then index1.htm, index2.htm, etc), when you enter a number, you actually get one page after that. For instance, if you enter "3", you get page 4 because it is named index3.htm. Is there anyway to fix that? If not, no biggie... my users will be thrilled just to be able to skip around and not have to click through all the pages!

  • #4
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    function goTo()
    {
    	window.location = 'index' + document.forms[0].where.value + '.htm';
    	return false;
    }
    </script>
    </head>
    
    <body>
    <form action="" method="post" onsubmit="return goTo()">
    <input type="text" name="where" value="Enter page number" onfocus="if(this.value == this.defaultValue) this.value = '';" onblur="if(this.value == '') this.value = this.defaultValue;">
    <input type="submit" value="Go">
    </form>
    </body>
    </html>
    Someone on another forum suggested editing this line:
    window.location = 'index' + document.forms[0].where.value + '.htm';
    window.location = 'index' + document.forms[0].where.value - 1 + '.htm';

    To fix my page numbering problem, but that did not work. Any other suggestions?

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Jette
    Someone on another forum suggested editing this line:
    window.location = 'index' + document.forms[0].where.value + '.htm';
    window.location = 'index' + document.forms[0].where.value - 1 + '.htm';

    To fix my page numbering problem, but that did not work. Any other suggestions?
    You can't perform mathematical operations on a string; however, if you convert the form's string value into an integer and stick parentheses around the operation, it should work. Try this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    &#160; "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    &#160; <head>

    &#160; &#160; <title>CF92278 Gallery Form</title>

    &#160; &#160; <script type="text/javascript">
    &#160; &#160; &#160; function goTo() {
    &#160; &#160; &#160; &#160; window.location = "index" + (parseInt(document.forms[0].pageNumber.value) - 1) + ".htm";
    &#160; &#160; &#160; &#160; }
    &#160; &#160; </script>

    &#160; </head>
    &#160; <body>

    &#160; &#160; <form method="post" action="javascript: goTo();">
    &#160; &#160; &#160; <div>
    &#160; &#160; &#160; &#160; <input id="pageNumber" type="text" value="enter page number"
    &#160; &#160; &#160; &#160; &#160; onfocus="if(this.value == this.defaultValue) this.value = '';"
    &#160; &#160; &#160; &#160; &#160; onblur="if(this.value == '') this.value = this.defaultValue;">
    &#160; &#160; &#160; &#160; <input type="submit" value="Go">
    &#160; &#160; &#160; </div>
    &#160; &#160; </form>

    &#160; </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I've had a go at using the code provided by _Aerospace_Eng_ :

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    function goTo()
    {
    	window.location = 'index' + document.forms[0].where.value + '.htm';
    	return false;
    }
    </script>
    </head>
    
    <body>
    <form action="" method="post" onsubmit="return goTo()">
    <input type="text" name="where" value="Enter page number" onfocus="if(this.value == this.defaultValue) this.value = '';" onblur="if(this.value == '') this.value = this.defaultValue;">
    <input type="submit" value="Go">
    </form>
    </body>
    </html>
    It's working well for its original purpose but I could really do with the ability to alter it so I can redirect users to a different root url. If i install the code on a page with the url:

    www.abc.com/code

    and then enter the number 5 into the form field and press submit, the url which is returned is:

    www.abc.com/code/5

    I could do with the ability to redirect people to the root url as follows:

    www.abc.com/5

    or an alternative domain name if possible.

    I'd be really grateful if you could find the time to suggest how I can edit the original code to achieve the above. A couple of hours of experimentation on my part has failed to provide a solution!

    Thanks very much in anticipation of your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •