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 13 of 13
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts

    Go to page form for lots of options

    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.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    I'm not sure how to use a form with JS, but you could do it in PHP...

    Alternatively, you could do this:

    Code:
    var page_num = window.prompt("Enter a Page Number")
    
    location.replace("http://www.mysite.com/pageset5\("+page_num+"\).html")
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Taking your snippet and whacking it in a form works well for me:

    Code:
    <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!
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    No Problem, glad you found a solution!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    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:

    Code:
    <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:

    Code:
    <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.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #6
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This might not be all the problems but make changes similar to this

    Code:
    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

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    ...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.
    Code:
    <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>

  • #8
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    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.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #9
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    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...

    Code:
    <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>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.
    Code:
    <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>

  • #11
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    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:

    Code:
    ...
      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?

    Code:
    <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):

    Code:
    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;
    }
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #12
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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
    Code:
    <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>

  • #13
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    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
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

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