...

View Full Version : Go to page form for lots of options



tpeck
12-16-2006, 02:33 PM
I need to do this but I don't know where to begin.

User enters a number, 1 to 1000, in a textbox and the user is taken to that page. But the page is called something else.

i.e. User wants to go to page 491

Enters 491 - taken to page http://www.mysite.com/pageset5(491).html

I realise it is a form and I can do a simple form but not for so many possible entries.

If it's quick to do, I would appreciate it. Thanks.

whizard
12-16-2006, 04:08 PM
I'm not sure how to use a form with JS, but you could do it in PHP... ;)

Alternatively, you could do this:



var page_num = window.prompt("Enter a Page Number")

location.replace("http://www.mysite.com/pageset5\("+page_num+"\).html")

tpeck
12-16-2006, 11:35 PM
Taking your snippet and whacking it in a form works well for me:


<body>Enter a Page Number:
<form onSubmit="window.location.replace('http://www.mysite.com/pageset5\('+this.page_num.value+'\).html');return false;">
<input type=text name=page_num size=5>
<input type="submit" value="Submit"><input type="reset" value="Reset">
</form>
</body>

Thanks a lot!

whizard
12-17-2006, 01:55 AM
No Problem, glad you found a solution!

Dan

tpeck
12-17-2006, 05:22 AM
I still have a way to go yet because my links are not quite so simple. But what you suggested works for a simple link as above.

***************************************

My problem is that the pages I want to link to are in different folders depending on the page number.

I have 1001 exercises on 1001 single pages. (25 lessons of 40 exercises each.)

The directory structure of the pages is as follows:

/L01-05/ (block 1: Lessons 1-5 (40 exs to a lesson i.e. exs 1-200)
/L06-10/ (block 2: exs 201-400)
/L11-15/ (block 3: exs 401-600)
/L16-20/ (block 4: exs 601-800)
/L21-25/ (block 5: exs 801-1000 +1 extra!)


block 1:

/L01-05/L01/001/001.html (1st page and exercise)
/L01-05/L01/002/002.html (2nd page and exercise)
...
/L01-05/L05/200/200.html (200th page and exercise)


block 2:

/L06-10/L06/201/201.html (201st page and exercise)
/L06-10/L06/202/202.html (202nd page and exercise)
...
/L06-10/L10/400/400.html (400th page and exercise)

etc.


Here is the js code I have at present:


<script language="javascript">
var ex=this.page_num.value
var block=0
var lesson=0

function gopage(){
if ex<201&&>0{
block="L01-05"; // first set of five blocks of forty exs each i.e. 40 x 5 = 200
if ex<10&&>0{
lesson=('L0'+ex); // if ex is single digit
}
else{
lesson=('L'+ex);
}
if ex<401&&>200{
block="L06-10"; // second set of five blocks of forty exs
lesson=('L'+ex);
}
if ex<601&&>400{
block="L11-15"; // third set of five blocks of forty exs
lesson=('L'+ex);
}
if ex<801&&>600{
block="L15-20"; // fourth set of five blocks of forty exs
lesson=('L'+ex);
}
if ex<1002&&>800{
block="L21-25"; // fifth set of five blocks of forty exs (plus 1 extra to make 1001!!)
lesson=('L'+ex);
}
window.location.replace('../../../L+'+block+'/L+'+lesson+'/'+ex+'/'+ex+'/.html');return false;"
}
</script>


The function "gopage() is called by my form:


<form onSubmit="gopage();">
<input type=text name=page_num size="3" maxlength="4">
<input type="submit" value="go">
</form>


I'm not exactly sure what I am doing wrong, but the logic of it looks OK. Probably something to do with mixing strings and numbers. Or maybe I can't call a function from an "onsubmit()"?

Does anyone have any ideas how to make the function work?

Thanks.

david_kw
12-17-2006, 05:36 AM
This might not be all the problems but make changes similar to this



function gopage(){
var ex = document.page_form.page_num.value;
if (ex<201 && ex>0) {
.
.
.


and the form declaration to

<form name="page_form" onSubmit="gopage(); return(false);">

I think there is a cleaner way to do what you want but I'm too tired to think much atm. But I thought these changes might help anyway.

Good luck.

david_kw

koyama
12-17-2006, 06:08 AM
...I'll also contribute a little adding to david_kw's remarks.

There were many issues, but you can continue working with this version which is still not finished. At least the script is running. I put in the alert so that you can better see what is generated. Eventually we will have to pad with 0's in the filename.


<html>
<head>
<script language="javascript">

function gopage() {
var ex = document.getElementById('exField').value;
var block=0
var lesson=0

if(ex<201&& ex>0) {
block="L01-05"; // first set of five blocks of forty exs each i.e. 40 x 5 = 200
if(ex<10&&ex>0) {
lesson='L0'+ex; // if ex is single digit
}
else{
lesson='L'+ex;
}

if(ex<401&& ex>200) {
block="L06-10"; // second set of five blocks of forty exs
lesson='L'+ex;
}

if(ex<601&& ex>400) {
block="L11-15"; // third set of five blocks of forty exs
lesson='L'+ex;
}
if(ex<801 && ex>600) {
block="L16-20"; // fourth set of five blocks of forty exs
lesson='L'+ex;
}
if(ex<1002&& ex>800) {
block="L21-25"; // fifth set of five blocks of forty exs (plus 1 extra to make 1001!!)
lesson='L'+ex;
}
alert(block+'/'+lesson+'/'+ex+'/'+ex+'/.html');
//window.location.replace(block+'/'+lesson+'/'+ex+'/'+ex+'/.html');
return false;
}
}
</script>
</head>
<body>
<form onSubmit="gopage();">
<input id="exField" type=text size="3" maxlength="4">
<input type="submit" value="go">
</form>
</body>
</html>

tpeck
12-17-2006, 07:28 AM
Thanks - that helps a lot because it fires up!

Now I have to make sure that the if else statements produce the desired outcomes that match my exact directory structure.

I'll post it when it is done just for reference, in case it helps anyone else.

tpeck
12-17-2006, 08:04 AM
Here is block 1 done: it's the hardest because it has to distinguish between single, double and triple figures. From then on, it is all three digits:

(I don't think it's necessary to post the lot because it's satisfying my own unique directory requirements.)

It's not very elegant, I know - I don't see how it can be...



<html>
<head>
<script>
function gopage() {
var ex = document.getElementById('exField').value;
var block=0;
var lesson=0;
if(ex<201&& ex>0) {
alert('block1');
block="L01-05"; // first set of five blocks of forty exs each i.e. 40 x 5 = 200
if(ex<10&&ex>0) {lesson='L01';ex='00'+ex;} // if ex is single digit
if(ex<41&&ex>9) {lesson='L01';ex='0'+ex;} // if ex is two digits and in first block of 40
if(ex<81&&ex>40) {lesson='L02';ex='0'+ex;} // if ex is two digits and in second block of 40
if(ex<100&&ex>80){lesson='L03';ex='0'+ex;} // if ex is two digits and in third block of 40
if(ex<121&&ex>99){lesson='L03';} // if ex is three digits and in third block of 40
if(ex<161&&ex>120){lesson='L04';} // if ex is three digits and in fourth block of 40
if(ex>160){lesson='L05';} // if ex is three digits and in fifth block of 40
}
else {if(ex<401&& ex>200) {alert('block2');}
if(ex<601&& ex>400) {alert('block3');}
if(ex<801 && ex>600) {alert('block4');}
if(ex<1002&& ex>800) {alert('block5');}
}
alert(block+'/'+lesson+'/'+ex+'/'+ex+'.html');
//window.location.replace(block+'/'+lesson+'/'+ex+'/'+ex+'/.html');
return false;
}
</script>
</head>
<body>
<form onSubmit="gopage();">
<input id="exField" type=text size="3" maxlength="4">
<input type="submit" value="go">
</form>
</body>
</html>

koyama
12-17-2006, 09:24 AM
Yes, it looks fine. david_kw correctly says that there is a cleaner way of doing it.

I think this is just about as compact as it can get. But there might still be errors in it. But try follow it. Actually most of it has to do with the padding of zeros. I thought that there was a built-in function to do it, but it seem there isn't as mlse spent some time on (http://www.codingforums.com/showthread.php?t=101390).


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

/* pads with leading 0s, e.g. numberPad(51,4) = 0051 */
function numberPad(number,finalWidth) {
var zeros = '';
var addWidth;
var initWidth;
initWidth = ('' + number).length;
addWidth = finalWidth - initWidth;
if(addWidth) {
for(var i=1; i<=addWidth; i++) {
zeros = '0' + zeros;
}
}
return zeros + number;
}

/* get lesson from exercise number */
function getLesson(ex) {
return Math.floor((ex-1)/40 + 1);
}

/* get block from lesson */
function getBlock(lesson) {
return Math.floor((lesson-1)/5) + 1;
}

/* get path from exercise */
function getPath(ex) {
var part1;
var part2;
var part3;
var part4;
lesson = getLesson(ex);
block = getBlock(lesson);
startLesson = 5 * block - 4;
endLesson = 5 * block;
part1 = 'L' + numberPad(startLesson, 2) + '-' + numberPad(endLesson, 2);
part2 = 'L' + numberPad(lesson, 2);
part3 = numberPad(ex, 3);
part4 = numberPad(ex, 3) + '.html';
path = '/' + part1 + '/' + part2 + '/' + part3 + '/' + part4;
return path;
}

/* try with some different vaules for exercise */
exercise = 2;
alert(getPath(exercise));

</script>
</html>

tpeck
12-17-2006, 02:37 PM
That is very impressive, much smarter,and I can follow it!

I eventually finished the thing - slot machine method - and it correctly jumps to all 1001 pages in my folder setup; but your much more elegant method is better. Thanks for your effort.

The trouble is, with your method, I am at a loss as to how to call the function properly. Nothing I have tried works.

I added this to the bottom:


...
part1 = 'L' + numberPad(startLesson, 2) + '-' + numberPad(endLesson, 2);
part2 = 'L' + numberPad(lesson, 2);
part3 = numberPad(ex, 3);
part4 = numberPad(ex, 3) + '.html';
path = part1 + '/' + part2 + '/' + part3 + '/' + part4;
// return path;
}
top.location.replace('../../../'+path);
// -->

(Notice I slightly altered the path to correspond to my folders.)

But in the page what do I call and how?


<form onSubmit="getpath();">
<input type=text name=page_num size="3" maxlength="4">
<input type="submit" value="go">
</form>

It can't be far off working...

For reference, then, here is my long method (which prob. wears out the CPU):


function gopage() {
var ex = document.getElementById('exField').value;
var block=0;
var lesson=0;
if(ex<201&& ex>0) {
block="L01-05"; // first set of five blocks of forty exs each i.e. 40 x 5 = 200
if(ex<10&&ex>0) {lesson='L01';ex='00'+ex;} // if ex is single digit
if(ex<41&&ex>9) {lesson='L01';ex='0'+ex;} // if ex is two digits and less than 41
if(ex<81&&ex>40) {lesson='L02';ex='0'+ex;} // if ex is two digits and less than 81
if(ex<100&&ex>80){lesson='L03';ex='0'+ex;} // if ex is two digits and more than 80
if(ex<121&&ex>99){lesson='L03';} // if ex is three digits and less than 121
if(ex<161&&ex>120){lesson='L04';} // if ex is three digits and more than 120
if(ex>160){lesson='L05';} // if ex is three digits and more than 160
}
if(ex<401&& ex>200) {
block="L06-10";
lesson='L06'; // if ex is between 201 - 240
if(ex>240){lesson='L07';} // if ex is between 241 - 280
if(ex>280){lesson='L08';} // if ex is between 281 - 320
if(ex>320){lesson='L09';} // if ex is between 321 - 360
if(ex>360){lesson='L10';} // if ex is between 361 - 400
}
if(ex<601&& ex>400) {
block="L11-15";
lesson='L11'; // if ex is between 401 - 440
if(ex>440){lesson='L12';} // if ex is between 441 - 480
if(ex>480){lesson='L13';} // if ex is between 481 - 520
if(ex>520){lesson='L14';} // if ex is between 521 - 560
if(ex>560){lesson='L15';} // if ex is between 561 - 600
}
if(ex<801 && ex>600) {
block="L16-20";
lesson='L16'; // if ex is between 601 - 640
if(ex>640){lesson='L17';} // if ex is between 641 - 680
if(ex>680){lesson='L18';} // if ex is between 681 - 720
if(ex>720){lesson='L19';} // if ex is between 721 - 760
if(ex>760){lesson='L20';} // if ex is between 761 - 800
}
if(ex<1002&& ex>800) {
block="L21-25";
lesson='L21'; // if ex is between 801 - 840
if(ex>840){lesson='L22';} // if ex is between 841 - 880
if(ex>880){lesson='L23';} // if ex is between 881 - 920
if(ex>920){lesson='L24';} // if ex is between 921 - 960
if(ex>960){lesson='L25';} // if ex is between 961 - 1001
}
// alert(block+'/'+lesson+'/'+ex+'/'+ex+'.html');
top.location.replace('../../../'+block+'/'+lesson+'/'+ex+'/'+ex+'.html');
return false;
}

koyama
12-17-2006, 04:28 PM
It is the way we are dealing with the <form>-tag and the onsubmit event handler. The proper way of doing it includes the 'return' keyword. This is how to control whether the form gets submitted or not. And technically we never want any form submission.

When your user clicks the button, he is not sending the form, rather he just starts the javascript. I.e. the page jumping is controlled through our client side javascript rather than some server side script which would also have been perfectly possible (php or asp or the like).

The function gopage() must always returns false so that form submission is blocked.

If you have a setup:
www.somedomain.com/index.html
www.somedomain.com/L01-05/L01/001/001.html

your code for the index.html would be something like (i highlighted the crucial parts in red)

Let's hear if you get it up running:)


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

/* pads with leading 0s, e.g. numberPad(51,4) = 0051 */
function numberPad(number,finalWidth) {
var zeros = '';
var addWidth;
var initWidth;
initWidth = ('' + number).length;
addWidth = finalWidth - initWidth;
if(addWidth) {
for(var i=1; i<=addWidth; i++) {
zeros = '0' + zeros;
}
}
return zeros + number;
}

/* get lesson from exercise number */
function getLesson(ex) {
return Math.floor((ex-1)/40 + 1);
}

/* get block from lesson */
function getBlock(lesson) {
return Math.floor((lesson-1)/5) + 1;
}

/* get path from exercise */
function getPath(ex) {
var part1;
var part2;
var part3;
var part4;
lesson = getLesson(ex);
block = getBlock(lesson);
startLesson = 5 * block - 4;
endLesson = 5 * block;
part1 = 'L' + numberPad(startLesson, 2) + '-' + numberPad(endLesson, 2);
part2 = 'L' + numberPad(lesson, 2);
part3 = numberPad(ex, 3);
part4 = numberPad(ex, 3) + '.html';
path = '/' + part1 + '/' + part2 + '/' + part3 + '/' + part4;
return path;
}

function gopage() {
var ex = document.getElementById('exField').value;
alert(getPath(ex));
top.location.replace(getPath(ex));
return false;
}

</script>

<body>
<form onsubmit="return gopage()">
<input id="exField" type=text size="3" maxlength="4">
<input type="submit" value="go">
</form>
</body>

</html>

tpeck
12-18-2006, 04:40 AM
Yes, I made the changes you suggested and your elegant solution works just as well, if not better than the slot machine method.

I will be able to use the code in other situations too, so thank you very much indeed.

Terry



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum