/    Sign up×
Community /Pin to ProfileBookmark

HTML get url…

Copy linkTweet thisAlerts:
Sep 02.2011

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

?

to post a comment
HTML

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@iansane6Sep 02.2011 — 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
}
[/CODE]

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.
Copy linkTweet thisAlerts:
@WolverieneauthorSep 02.2011 — 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
Copy linkTweet thisAlerts:
@iansane6Sep 02.2011 — 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.
Copy linkTweet thisAlerts:
@AtticusWSep 02.2011 — 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[/QUOTE]

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....
Copy linkTweet thisAlerts:
@WolverieneauthorSep 02.2011 — 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.[/QUOTE]


Ok here is my coding

[code=html]

<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>
[/code]

here is the script which is in a JavaScript file

[code=html]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
}[/code]

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 ?
Copy linkTweet thisAlerts:
@iansane6Sep 02.2011 — 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>
[/CODE]

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>
[/CODE]

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.
Copy linkTweet thisAlerts:
@iansane6Sep 02.2011 — 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.
Copy linkTweet thisAlerts:
@WolverieneauthorSep 02.2011 — 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>
[/CODE]

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>
[/CODE]

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.[/QUOTE]

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 ?

[code=php]<?php
if ($_GET[option] == question) {
include('contactQuestion.php');
} else {
include('contactMethod.php');
}
?>[/code]

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!
Copy linkTweet thisAlerts:
@iansane6Sep 02.2011 — OK great! Now we both know two different ways of doing it. Looks like your way is a little cleaner.

Glad you got it. :-)
Copy linkTweet thisAlerts:
@iansane6Sep 03.2011 — 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

}
}

?>
[/CODE]
×

Success!

Help @Wolveriene spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 7.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,

tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,

tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,
)...