dougv.com | The Web home of Doug Vanderweide

Recently, a visitor to this site asked me to expand on changing URLs via JavaScript, after reading my post on changing an IFRAME’s source via a drop-down list.

As a quick aside, I’ll do my best to answer any question that is posted in Yahoo! Answers if you e-mail it to me. There’s an envelope icon in the question; just use that to get to Yahoo! Answers’ e-mail form, send your question to dhvrm@yahoo.com and I’ll check your question out as soon as I can.

I won’t answer questions privately, meaning I will not e-mail an answer; I’ll only respond in Yahoo! Answers, on this Web site or in my Geocities adjunct site.

I answer questions because when I started out in programming, I needed a lot of help and I got it on the Internet. Now, I’m putting information back out on the Internet for other people who need it. Therefore, if you’d like my help, you need to share it with others. No private questions and no private answers, thank you.

That said, I got the person who asked me to post this question in Yahoo! Answers:

HTML code on How to link a drop down box item to a web page?

Check this url {snipped}
When somebody clicks on the name, it need to be linked to a existing web page in the site.
please provide me help.

It appears from the sample URL provided that this person only wants to go from one static HTML page to another. Which is easy enough, if we simply pirate the earlier iframe code and make some minor modifications. But to be thorough, I’m also going to address how to do this with server-side technologies, too.

Version 1: JavaScript / DOM

Changing the page location via JavaScript / DOM first requires us to make a simple form. The form will contain nothing more than a SELECT list.

Each OPTION of the SELECT list will be the URL to a new page. We can use both relative and absolute addressing; we can work within our own domain or send people to a different domain. This sample will use all available address types:

• A relative address to a page in the same directory: e.g., test.html
• A relative address to a Web page that’s located in a different directory than this file: e.g., ../js_ddl_iframe/index.html
• An absolute address to a directory on the same server as this page, e.g., http://www.dougv.com/demo/js_select_images/
• An absolute address to a different domain, e.g., http://answers.yahoo.com/

You’ll also note that I include the current page as an OPTION. I do that because we’re going to add the name of our JavaScript function, changePage(), to an onchange event to the SELECT list. Unless we start the drop-down list with the current page, the onchange event won’t be fired if we pick a page other than the one we’re on now.

<form id="jumpForm" method="get" action="">
	<label>Select A Page:&nbsp;
		<select id="newPage" onchange="changePage()">
			<option value="index.html" selected="selected">This page</option>
			<option value="test.html">Another page, this directory</option>
			<option value="../js_ddl_iframe/index.html">Another page, another directory, relative address</option>
			<option value="http://www.dougv.com/demo/js_select_images/">Another page, another directory, absolute address</option>
			<option value="http://answers.yahoo.com">Another domain</option>
		</select>
	</label>
</form>

The JavaScript function is about as simple as it gets. We simply assign the SELECT list to a variable via getElementById(), then set the location of the window to be whatever URL is selected from the drop-down menu.

function changePage() {
	var selectList = document.getElementById('newPage');
	window.location = selectList.options[selectList.selectedIndex].value;
}

You can see this in action at http://www.dougv.com/demo/select_new_url/

Version 2: Via PHP

A quick check of Netcraft’s “What’s that site running?” shows that this questioner’s server is running PHP 4.4.6. So, we can most efficiently change the page via PHP’s header() function.

While the JavaScript / DOM version works, it only works if the user has a Web browser that supports JavaScript, and if the user hasn’t disabled JavaScript. A server-side solution, such as PHP, ensures all humans and most robots can work our form to go to a new page.

As countless other Web sites caution, you cannot send a header() if the Web server has already sent text to the Web browser. For most intents and purposes, what that means is that if you’re going to use header(), you have to do so before any page HTML is sent, and before you call echo / print or similar functions.

Basically, the best way to be safe is to make any code that’s going to use header() appear first on your page.

To begin, we use fundamentally the same HTML we used in the JavaScript example, with a couple modifications.

• We set the form’s method to be POST. We had set it to GET in the JavaScript example to prevent any problems we might have with people trying to POST back a simple HTML page; now, we find it more convenient to use POST.
• We add the name attribute to all variables. PHP’s POST superglobal uses the name attribute to set the associative names in its array of form elements, so every input we want available in that superglobal must have a name attribute.
• We add as an action the PHP_SELF server variable. Strictly speaking, this is not necessary, but it is clean, and we want to make clean code.
• We remove the onchange event from the SELECT. Our form won’t be using JavaScript, so we don’t check for events.
• We add a submit button, so the server knows to process our form.

<form id="jumpForm" method="post" action="<? echo $_SERVER['PHP_SELF']; ?>">
	<label>Select A Page:&nbsp;
		<select id="newPage" name="newPage">
			<option value="index.html" selected="selected">This page</option>
			<option value="test.html">Another page, this directory</option>
			<option value="../js_ddl_iframe/index.html">Another page, another directory, relative address</option>
			<option value="http://www.dougv.com/demo/js_select_images/">Another page, another directory, absolute address</option>
			<option value="http://answers.yahoo.com">Another domain</option>
		</select>
	</label>
	<input type="submit" name="submit" id="submit" value="Go!" />
</form>

The PHP code is really simple. We just check if the form was submitted; if so, we set a string that will make the location of our page the same as the SELECT list’s selected value, then provide that as the argument to a header() call.

Again, this code appears at the very top of the page, before any HTML of any sort. And of course, because we are using PHP, our file’s extension must be PHP, not HTML.

if(isset($_POST['submit'])) {
	$loc = "Location: " . $_POST['newPage'];
	header($loc);
}

You can see this in action at http://www.dougv.com/demo/select_new_url/ example2.php

Version 3: ASP.NET

Actually, ASP.NET has both server-side and client-side controls to handle navigation, including this sort of “jump menu.”

I won’t bother demoing them here because this questioner’s server doesn’t support ASP.NET, and besides, the navigation controls for ASP.NET are exceedingly well-documented.

Server-side navigation controls are documented at http://quickstarts.asp.net/ QuickStartv20/aspnet/doc/ctrlref/navigation/default.aspx. Client-side controls (AJAX) are documented at http://ajax.asp.net/documentation/default.aspx?tabid=47.

Download

You can download the sample code for both JavaScript and PHP from here:

Going To A New URL Via A Drop-Down List: JavaScript And DOM, PHP, ASP.NET Sample Code

I distribute all code under the latest version of the Creative Commons Attribution / Share-Alike License.