www.webdeveloper.com
Results 1 to 11 of 11

Thread: HTML get url...

  1. #1
    Join Date
    Sep 2011
    Posts
    14

    Post HTML get url...

    Hi,

    I am trying to create a script that gets information from the url
    a little bit like php but in .html, I would like it to do something like this
    my_page.html?option=question (example)

    I have seen websites do this, but never could figure out how.

    when the page loads I would like it to do something like this

    if option=question

    then -> run a javascript function

    else -> load the page normally

    Please could someone help me to acheive this?

    thanks


  2. #2
    Join Date
    May 2010
    Posts
    77
    I don't think it is possible without php or javascript. I have been under the impression that any time a page does use that method it is actually using a scripting language of some kind.

    In php you could use html but there would need to be a php script that goes like this.
    Code:
    if($_GET['option'] == 'question'){
          //code to do something
    }
    else{
         //code to do something else
    }
    javascript would be something similar but different syntax.

    Either way, when you use a get url it puts the info into the $_GET array and some form of scripting language has to retrieve it because html is simply a meta language that describes how to display the data.

  3. #3
    Join Date
    Sep 2011
    Posts
    14
    well thanks for the reply!

    I was hoping I didn't have to go and change things into php as it means re-doing my navigation buttons, I might add I have lost the software for them!
    any suggestions?



    if all else fails, any more suggestions to what language I would need and a little help getting me started with my previous post would be great!


    thanks

  4. #4
    Join Date
    May 2010
    Posts
    77
    Well there are many ways you can do it. It depends on what the functionality is supposed to be.

    What I mean is you can include the php script in your web page or you can have the link redirect to a php script and then have the php script redirect based on the get url.

    Then once that is working for people with javascript turned off, you can use jquery and ajax if you don't want the page to change or refresh. In using ajax method, jquery would actually use the php script but the user would never see a page refresh. That can get more complicated but it's doable. For example when web forms submit without ever changing or refreshing the page and often times have the little loader.gif spinning around. Those are using jquery/ajax to call the php script but the php script is there for people who have javascript turned off.

    As far as the buttons, did you use some type of software to create them?

    You should still be able to find the code and set the url attribute.

    Actually it's 1:45AM here and I'm having trouble staying awake and need to refresh my memory on a couple things anyway so I'll check back in the morning.

    If you can tell me the exact functionality you want out of your button as in should it redirect or refresh the page or if you just want the javascript function to be called and nothing else I'll put together a sample tomorrow.

  5. #5
    Join Date
    Sep 2011
    Posts
    12
    Quote Originally Posted by Wolveriene View Post
    well thanks for the reply!

    I was hoping I didn't have to go and change things into php as it means re-doing my navigation buttons, I might add I have lost the software for them!
    any suggestions?



    if all else fails, any more suggestions to what language I would need and a little help getting me started with my previous post would be great!


    thanks
    You should use php. Plus that way you could have ONE file containing your navigation and have it included in all your pages, so you only have to update your navigation links in one place....

  6. #6
    Join Date
    Sep 2011
    Posts
    14
    Quote Originally Posted by iansane6 View Post
    Well there are many ways you can do it. It depends on what the functionality is supposed to be.

    What I mean is you can include the php script in your web page or you can have the link redirect to a php script and then have the php script redirect based on the get url.

    Then once that is working for people with javascript turned off, you can use jquery and ajax if you don't want the page to change or refresh. In using ajax method, jquery would actually use the php script but the user would never see a page refresh. That can get more complicated but it's doable. For example when web forms submit without ever changing or refreshing the page and often times have the little loader.gif spinning around. Those are using jquery/ajax to call the php script but the php script is there for people who have javascript turned off.

    As far as the buttons, did you use some type of software to create them?

    You should still be able to find the code and set the url attribute.

    Actually it's 1:45AM here and I'm having trouble staying awake and need to refresh my memory on a couple things anyway so I'll check back in the morning.

    If you can tell me the exact functionality you want out of your button as in should it redirect or refresh the page or if you just want the javascript function to be called and nothing else I'll put together a sample tomorrow.

    Ok here is my coding

    HTML Code:
      <div id="step1">
      <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#00CC00">
        <tr>
          <td><span class="style1">Step 1 - What would you like to contact us about?</span></td>
        </tr>
      </table>
    		  <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#CCCCCC">
                <tr>
                  <td><div align="center">
                    <label>
                    <input type="button" name="Button" onclick="helpme()" value="I Need Help" />
                    </label>
                  -  
                  <input type="button" name="Button2" onclick="questionme()" value="I Have A Question" />
                  </div></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step1greyed" style="display:none">
    		  <table width="561" border="1" bordercolor="#666666" bgcolor="#999999">
                <tr>
                  <td><span class="style3" style="float:left">Step 1 - What would you like to contact us about? </span><input type="button" style="float:right; background-color:#0000FF; border-color:#000000; border-width:thin; cursor:pointer; font-style:oblique;" onmouseover="this.style.backgroundColor='#0066FF';" onmouseout="this.style.backgroundColor='#0000FF';" value="AMEND" onclick="amend()" /></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step2greyed">
    		  <table width="561" border="1" bordercolor="#666666" bgcolor="#999999">
                <tr>
                  <td><span class="style3">Step 2 </span></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step2help" style="display:none">
    		  <table width="561" border="0" bordercolor="#00FFFF" bgcolor="#33CC00">
                <tr>
                  <td><strong><span class="style4">Step 2 - OK so you need help? simply fill in the form below. </span></strong></td>
                </tr>
              </table>
    		  <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#CCCCCC">
                <tr>
                  <td><iframe id="1" src="helpscreen.html" height="380" width="561" scrolling="no" frameborder="0"></iframe></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step2question" style="display:none">
    		  <table width="561" border="0" bordercolor="#00FFFF" bgcolor="#33CC00">
                <tr>
                  <td><strong><span class="style4">Step 2 - OK so you have a question? simply fill in the form below. </span></strong></td>
                </tr>
              </table>
    		  <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#CCCCCC">
                <tr>
                  <td><iframe id="2" src="questions.html" height="380" width="561" scrolling="no" frameborder="0"></iframe></td>
                </tr>
              </table>
    		  </div>
    here is the script which is in a JavaScript file

    HTML Code:
    function helpme()
    	  {
    	  document.getElementById('step1').style.display='none';
    	  document.getElementById('step1greyed').style.display='';
    	  document.getElementById('step2help').style.display='';
    	  document.getElementById('step2greyed').style.display='none';
    	  Scrollbottom();
    	  }
    	  function questionme()
    	  {
    	  document.getElementById('step1').style.display='none';
    	  document.getElementById('step2question').style.display='';
    	  document.getElementById('step1greyed').style.display='';
    	  document.getElementById('step2greyed').style.display='none';
    	  Scrollbottom();
    	  }
    	  function amend()
    	  {
    	  document.getElementById('step1').style.display='';
    	  document.getElementById('step1greyed').style.display='none';
    	  document.getElementById('step2greyed').style.display='';
    	  document.getElementById('step2help').style.display='none';
    	  document.getElementById('step2question').style.display='none';
    	  }
    function Scrollbottom() {
        	window.scrollBy(0,50); // horizontal and vertical scroll increments
        	scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
    }
    I would like the get url to call a javascript "questionme()"

    I am sending the "?option=question" from the homepage, so want it to call the javascript function once the contact page has loaded.


    if this is possible then that would be great.


    if not I best get onto php coding!

    thanks again

  7. #7
    Join Date
    May 2010
    Posts
    77
    Hey Wolverine,

    Sorry it took me a while to get back to you. If I'm understanding correctly there is a separate contact page where you want the question form table to be displayed and you want your button(link to take the user to that page and have the function called when the page loads.

    There are a couple of small issues in what I have so far but here's what I put together.

    Home page or index.html
    Code:
    <html>
    
    <head><title>Home page</title>
    
    </head>
    
    <body>
    
    <a href="contact.php?option=question">Contact Page</a>
    
    </body>
    
    </html>
    contact.php
    Code:
    <html>
     
    <head><title>contactpage</title>
    <script type="text/javascript">
    function helpme()
    	  {
    	  document.getElementById('step1').style.display='none';
    	  document.getElementById('step1greyed').style.display='';
    	  document.getElementById('step2help').style.display='';
    	  document.getElementById('step2greyed').style.display='none';
    	  Scrollbottom();
    	  }
    	  function questionme()
    	  {
    	  document.getElementById('step1').style.display='none';
    	  document.getElementById('step2question').style.display='';
    	  document.getElementById('step1greyed').style.display='';
    	  document.getElementById('step2greyed').style.display='none';
    	  Scrollbottom();
    	  }
    	  function amend()
    	  {
    	  document.getElementById('step1').style.display='';
    	  document.getElementById('step1greyed').style.display='none';
    	  document.getElementById('step2greyed').style.display='';
    	  document.getElementById('step2help').style.display='none';
    	  document.getElementById('step2question').style.display='none';
    	  }
    function Scrollbottom() {
        	window.scrollBy(0,50); // horizontal and vertical scroll increments
        	scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
    }
    </script>
    
    </head>
     
    <body>
    
    <?php
    if(!$_GET['option']){
    //code here if the var does not exist
    }
    else{
    	if($_GET['option'] != 'question'){
    	//code here if var option is not equal to 'question'
    	}
    	else{
    		//assuming the variable does exist the second check is performed
    		//assuming the second check reveals that the option is equal to 'question'
    		//code here for what you want to do
    		echo "<script type='text/javascript'>questionme();</script>";
    		
    	}
    }
     
     ?>
     
     
     <div id="step1">
      <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#00CC00">
        <tr>
          <td><span class="style1">Step 1 - What would you like to contact us about?</span></td>
        </tr>
      </table>
    		  <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#CCCCCC">
                <tr>
                  <td><div align="center">
                    <label>
                    <input type="button" name="Button" onclick="helpme()" value="I Need Help" />
                    </label>
                  -  
                  <input type="button" name="Button2" onclick="questionme()" value="I Have A Question" />
                  </div></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step1greyed" style="display:none">
    		  <table width="561" border="1" bordercolor="#666666" bgcolor="#999999">
                <tr>
                  <td><span class="style3" style="float:left">Step 1 - What would you like to contact us about? </span><input type="button" style="float:right; background-color:#0000FF; border-color:#000000; border-width:thin; cursor:pointer; font-style:oblique;" onmouseover="this.style.backgroundColor='#0066FF';" onmouseout="this.style.backgroundColor='#0000FF';" value="AMEND" onclick="amend()" /></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step2greyed">
    		  <table width="561" border="1" bordercolor="#666666" bgcolor="#999999">
                <tr>
                  <td><span class="style3">Step 2 </span></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step2help" style="display:none">
    		  <table width="561" border="0" bordercolor="#00FFFF" bgcolor="#33CC00">
                <tr>
                  <td><strong><span class="style4">Step 2 - OK so you need help? simply fill in the form below. </span></strong></td>
                </tr>
              </table>
    		  <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#CCCCCC">
                <tr>
                  <td><iframe id="1" src="helpscreen.html" height="380" width="561" scrolling="no" frameborder="0"></iframe></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step2question" style="display:none">
    		  <table width="561" border="0" bordercolor="#00FFFF" bgcolor="#33CC00">
                <tr>
                  <td><strong><span class="style4">Step 2 - OK so you have a question? simply fill in the form below. </span></strong></td>
                </tr>
              </table>
    		  <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#CCCCCC">
                <tr>
                  <td><iframe id="2" src="questions.html" height="380" width="561" scrolling="no" frameborder="0"></iframe></td>
                </tr>
              </table>
    		  </div>
    		  
    </body>
    </html>
    It seems to work fine other than my iframes return 404 errors since I don't have the actual pages for the frames. So I hope this is what you are looking to do.

    the jquery and ajax I was referring to earlier can be used so when the user clicks on the "question" link a box appears with the question form from contact.php and when the user submits the question the box would disappear and they would still be on the home page. Basically it's to make things look cool and smooth the flow if it applies in your particular case. It only works if the user has javascript enabled and for those that don't, it redirects to the contact.php page. Of course at that point your javascript function wouldn't work either but that's pretty much the way jquery and ajax works.

    You can google for jquery forms and find some tutorials to see what I mean and if you decide to give that a try I'll see if I can help out.

  8. #8
    Join Date
    May 2010
    Posts
    77
    Oh, the minor issue I mentioned. I'm not doing the if statement quite right but it works. If your page is on a server with php error reporting set for dev mode (reports everything), you'll see a warning about "index option not defined" if you just typed the url to the contact.php page. This is because it gets set by the get url link on the home page and wouldn't be set if you just manually went to that page.

    I found a way to stop this but I'll have to go look through some of my apps and see what I did.

    Like I said, it's only a warning and only shows up if strict error reporting is enabled.

  9. #9
    Join Date
    Sep 2011
    Posts
    14

    resolved

    Quote Originally Posted by iansane6 View Post
    Hey Wolverine,

    Sorry it took me a while to get back to you. If I'm understanding correctly there is a separate contact page where you want the question form table to be displayed and you want your button(link to take the user to that page and have the function called when the page loads.

    There are a couple of small issues in what I have so far but here's what I put together.

    Home page or index.html
    Code:
    <html>
    
    <head><title>Home page</title>
    
    </head>
    
    <body>
    
    <a href="contact.php?option=question">Contact Page</a>
    
    </body>
    
    </html>
    contact.php
    Code:
    <html>
     
    <head><title>contactpage</title>
    <script type="text/javascript">
    function helpme()
    	  {
    	  document.getElementById('step1').style.display='none';
    	  document.getElementById('step1greyed').style.display='';
    	  document.getElementById('step2help').style.display='';
    	  document.getElementById('step2greyed').style.display='none';
    	  Scrollbottom();
    	  }
    	  function questionme()
    	  {
    	  document.getElementById('step1').style.display='none';
    	  document.getElementById('step2question').style.display='';
    	  document.getElementById('step1greyed').style.display='';
    	  document.getElementById('step2greyed').style.display='none';
    	  Scrollbottom();
    	  }
    	  function amend()
    	  {
    	  document.getElementById('step1').style.display='';
    	  document.getElementById('step1greyed').style.display='none';
    	  document.getElementById('step2greyed').style.display='';
    	  document.getElementById('step2help').style.display='none';
    	  document.getElementById('step2question').style.display='none';
    	  }
    function Scrollbottom() {
        	window.scrollBy(0,50); // horizontal and vertical scroll increments
        	scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
    }
    </script>
    
    </head>
     
    <body>
    
    <?php
    if(!$_GET['option']){
    //code here if the var does not exist
    }
    else{
    	if($_GET['option'] != 'question'){
    	//code here if var option is not equal to 'question'
    	}
    	else{
    		//assuming the variable does exist the second check is performed
    		//assuming the second check reveals that the option is equal to 'question'
    		//code here for what you want to do
    		echo "<script type='text/javascript'>questionme();</script>";
    		
    	}
    }
     
     ?>
     
     
     <div id="step1">
      <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#00CC00">
        <tr>
          <td><span class="style1">Step 1 - What would you like to contact us about?</span></td>
        </tr>
      </table>
    		  <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#CCCCCC">
                <tr>
                  <td><div align="center">
                    <label>
                    <input type="button" name="Button" onclick="helpme()" value="I Need Help" />
                    </label>
                  -  
                  <input type="button" name="Button2" onclick="questionme()" value="I Have A Question" />
                  </div></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step1greyed" style="display:none">
    		  <table width="561" border="1" bordercolor="#666666" bgcolor="#999999">
                <tr>
                  <td><span class="style3" style="float:left">Step 1 - What would you like to contact us about? </span><input type="button" style="float:right; background-color:#0000FF; border-color:#000000; border-width:thin; cursor:pointer; font-style:oblique;" onmouseover="this.style.backgroundColor='#0066FF';" onmouseout="this.style.backgroundColor='#0000FF';" value="AMEND" onclick="amend()" /></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step2greyed">
    		  <table width="561" border="1" bordercolor="#666666" bgcolor="#999999">
                <tr>
                  <td><span class="style3">Step 2 </span></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step2help" style="display:none">
    		  <table width="561" border="0" bordercolor="#00FFFF" bgcolor="#33CC00">
                <tr>
                  <td><strong><span class="style4">Step 2 - OK so you need help? simply fill in the form below. </span></strong></td>
                </tr>
              </table>
    		  <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#CCCCCC">
                <tr>
                  <td><iframe id="1" src="helpscreen.html" height="380" width="561" scrolling="no" frameborder="0"></iframe></td>
                </tr>
              </table>
    		  </div>
    		  <div id="step2question" style="display:none">
    		  <table width="561" border="0" bordercolor="#00FFFF" bgcolor="#33CC00">
                <tr>
                  <td><strong><span class="style4">Step 2 - OK so you have a question? simply fill in the form below. </span></strong></td>
                </tr>
              </table>
    		  <table width="561" border="1" bordercolor="#00FFFF" bgcolor="#CCCCCC">
                <tr>
                  <td><iframe id="2" src="questions.html" height="380" width="561" scrolling="no" frameborder="0"></iframe></td>
                </tr>
              </table>
    		  </div>
    		  
    </body>
    </html>
    It seems to work fine other than my iframes return 404 errors since I don't have the actual pages for the frames. So I hope this is what you are looking to do.

    the jquery and ajax I was referring to earlier can be used so when the user clicks on the "question" link a box appears with the question form from contact.php and when the user submits the question the box would disappear and they would still be on the home page. Basically it's to make things look cool and smooth the flow if it applies in your particular case. It only works if the user has javascript enabled and for those that don't, it redirects to the contact.php page. Of course at that point your javascript function wouldn't work either but that's pretty much the way jquery and ajax works.

    You can google for jquery forms and find some tutorials to see what I mean and if you decide to give that a try I'll see if I can help out.
    Hey, iansane6

    thanks for the help, I have been at it all day!


    I managed to come up with a different technique as I found my flash navigation edditing software!

    so I started using php includes.

    then it gave me the idea to use if/else statements

    heres my code

    PHP Code:
    <?php
    if ($_GET[option] == question) { 
            include(
    'contactQuestion.php');
        } else { 
            include(
    'contactMethod.php');
        } 
    ?>
    which is working great, its taken me all day, but the website is finaly up!
    check out my profile for the link.

    thanks again for the help iansane6

    much appreciated!

  10. #10
    Join Date
    May 2010
    Posts
    77
    OK great! Now we both know two different ways of doing it. Looks like your way is a little cleaner.

    Glad you got it. :-)

  11. #11
    Join Date
    May 2010
    Posts
    77
    Just wanted to add this fix for the undefined index warning since it's in the code I posted. I know you don't need it for this but in case you come across it later and for anyone else reading this.

    This example is what I use for POST but the same can be applied to GET in php to avoid the "undefined index" issue.
    Code:
    <?php
    /*The following if statements will first check to see
    if the variable 'submitted' exists in the $_POST array.
    If it does exist it is checked to see if it is true.
    If not true nothing happens but error message appears.
    If it is true then the  script is run
    */
    
    if(!isset($_POST['submitted'])){
    //nothing happens if the variable does not exist
    //script finishes here
    }
    else{
    	//if the variable does exist check if it is not true
    	if(isset($_POST['submitted']) && $_POST['submitted'] != 'true'){
    		$errorMsg = "An error has occured. Please return to the login page and try again.";
    		echo $errorMsg;
    	}
    	else{
    		//run script to validate input and check credentials if submitted is true
    		
    	}
    }
    
    ?>
    Last edited by iansane6; 09-02-2011 at 09:19 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles