SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    redirect function based on selected option...

    I for the life of me can not get this to function!

    I'm trying to employ a redirect function that is fired from an onClick action. This action passes the option selected to the function and redirects the user to a new location. Here's what I have, but it's not functioning, and when I debug I get no errors:

    I have have it functioning in a mock-up which is close to the page this will eventually live in.

    This is where I am now:
    Code:
    <script language="JavaScript">
    function newLoc(school)
    {
    	  if (school == 0) location = "http://www.nfl.com";
    	  else if (school == 1) location = "http://www.msn.com";
    	  else if(school == 2)location = "http://www.nba.com";
    }
    </script>
    This is my layout:
    Code:
    <body bgcolor="#ffffff">
    <table>
    <form id="schoolSelect">
    	<tr>
    		<td><select id="location" size="1">
    			<option>Example One</option>
    			<option>Example Two</option>
    			<option>Example Three</option>
    			</select>
                    </td>
    		<td><input onclick="newLoc(schoolSelect.location.selectedIndex)" type="BUTTON" value="Submit Example" /></td>
    	</tr>
    </form>
    </table>
    </body>
    What I've discovered is that when I have the doc type set to "HTML 4.01 Transitional" it functions. If my doc type is set to XHTML 1.0 Transitional, the mock-up doesn't function. The page I'm putting this in is set to the later (XHTML 1.0 Transitional). So, just for the hell of it, I switched my page's doc type to "HTML 4.01 Transitional" - it still doesn't work.

    I'm lost.

    I've attached both my mock-up (set to XHTML 1.0 Transitional) and the page mark-up I'm working with.

    Any advice would be welcome. Thanks!
    Attached Files Attached Files

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you have access to a server-side language, it would be preferable to do this server-side than with javascript. For instance with PHP:
    PHP Code:
    //This would go at the top of the script, before any HTML is output:
    $location $_POST['location'];
    if (
    $location) {
      if (
    $location === 'school1'header('Location:http://www.msn.com');
      elseif (
    $location === 'school2'header('Location:http://www.google.com');
      elseif (
    $location === 'school3'header('Location:http://www.sitepoint.com');

    Then in the HTML:
    HTML Code:
    <form action="" method="post">
        <tr>
            <td><select name="location" size="1">
                <option value="school1">Example One</option>
                <option value="school2">Example Two</option>
                <option value="school3">Example Three</option>
                </select>
                    </td>
            <td><input type="submit" value="Submit Example" /></td>
        </tr>
    </form>
    Naturally you can set the action attribute to point to an external script (e.g. school.php) and handle the redirection from there.

    By the way, there is NO point in writing "XHTML" (especially with a transitional doctype) if you are going to write such bad code. In XHTML the attributes "size" and "bgcolor" don't exist (CSS is for that), all attributes have to be lowercase (like onclick) and their values should be too (like button). <option> tags should have "value" attributes and it looks like you are using a table for layout, which is also bad.

    If you're going to write this sort of HTML, you should use an HTML doctype and not an XHTML doctype. You are most likely also serving your document as text/html, which is another reason why you should be writing HTML and not XHTML.


Bookmarks

Posting Permissions

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