Input form - Go To Page "X"

Jette · 07-29-2006, 06:56 AM

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!

_Aerospace_Eng_ · 07-29-2006, 07:12 AM

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>

Jette · 07-29-2006, 07:43 AM

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!

Jette · 08-04-2006, 12:21 PM

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?

Arbitrator · 08-04-2006, 06:50 PM

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:

Quote:

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

<html>
<head>

<title>CF92278 Gallery Form</title>

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

</head>
<body>

<form method="post" action="javascript: goTo();">
<div>
<input id="pageNumber" type="text" 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">
</div>
</form>

</body>
</html>

pepper116 · 02-15-2013, 11:47 AM

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.