newbie problem - two scripts on same page

[finoo]

Hello,

i have a newbie problem that i hope you guys can help be solve.

I want to use this script twice on the same page. ATM one of them fail when i duplicate the code.

function pulldown_menu()
{
// Create a variable url to contain the value of the
// selected option from the the form named pulldown and variable selectname
var url = document.pulldown.selectname.options[document.pulldown.selectname.selectedIndex].value

// Re-direct the browser to the url value
window.location.href = url
}

<form name="pulldown">
<select name="selectname" SIZE="1" onChange="pulldown_menu()">
<option value="selected="selected">dropdown</option>
<option value="x.php">Vis Ubetalte</option>
<option value="x.php">Vis Ubetalte</option>
<option value="x.php">Vis Ubetalte</option>

</select>
</form>

[DrDoc]

Ah, the joy of reusing functions. Well, now you will learn something you wish you had known a long time ago -- they keyword

this

.

Change your function to:

function pulldown_menu(which) {  
  // Create a variable url to contain the value of the 
  // selected option from the the form named pulldown and variable selectname 
  var url = which.options[which.selectedIndex].value; 
  // Re-direct the browser to the url value 
  window.location.href = url; 
}

Then, for each of your <select> tags, change the

onchange

event handler to:

pulldown_menu([b]this[/b])

.

So, what does

this

do? Well, it simply refers to the element that uses

this

. (Don't have a good way of explaining it.) Whenever

this

is passed to a function, it represents a reference to an element, and thus eliminates the need for explicitly defining it in your code. Makes sense? :)

[lavazza]

Or... the same logic can be applied from within the html

<select name="mySelect"
onChange="window.location.href='http://www.example.com/' + this.options[this.selectedIndex].value;">
<option value="0">Please Select</option>
<option value="apples.html">Apples</option>
<option value="bananas.html">Bananas</option>
<option value="carrots.html">Carrots</option>
<option value="dogs.html">Dogs</option>
</select>

I'd be genuinely interested in reading any reasons to avoid that approach (apart from occasions when there are >1 selects on the same page doing the same thing)

[edited by: DrDoc at 5:24 am (utc) on July 16, 2007]
[edit reason] tiny code fix [/edit]

[finoo]

Ah, the joy of reusing functions. Well, now you will learn something you wish you had known a long time ago -- they keyword this.

Change your function to: function pulldown_menu(which) {
// Create a variable url to contain the value of the
// selected option from the the form named pulldown and variable selectname
var url = which.options[which.selectedIndex].value;
// Re-direct the browser to the url value
window.location.href = url;
}

Then, for each of your <select> tags, change the onchange event handler to: pulldown_menu(this).

So, what does this do? Well, it simply refers to the element that uses this. (Don't have a good way of explaining it.) Whenever this is passed to a fun

Smart, thanks for helping me understand.

Javascript is a new world for me, some i have a lot to learn cause i'll need some java in my next project. I might have to hire someone to set up some stuff, i give it a shoot myself first.

One more questin. Inside my pulldown menu i want to use some varables. At the moment the $variables isn't working. Any idea?

<?
$unique_id = 123;
echo '
<form name="pulldown">
<select name="selectname" SIZE="1" onChange="pulldown_menu(this)">
<option value="selected="selected">pulldown meny &nbsp;</option>
<option value="action.php?action=merk_som_betalt&unique_id=$unique_id">MERK BETALT</option>
</select>
</form>
';
?>

[rocknbil]

I'd be genuinely interested in reading any reasons to avoid that approach

First, it makes for a much longer chunk of code within the HTML. A select list is no longer a simple tag but growing into a complicated combination of quotes and brackets, prone to breaking at the slightest slip of the keyboard.

More importantly, this makes it much more difficult to maintain, you have to tweak each select list on the page to keep them working (per the O.P., multiple selects on one page.) An external function puts all the workings in one place, and additionally removes most of the Javascript from the HTML.

Extending this one step further, you can do one better, removing JS from the HTML completely by creating an unobtrusive externally defined function. In the below example, you would actually put the JS in an external file, giving you the leanest, cleanest HTML possible, which is good for SEO, good for page load time, good for document structure, good for maintenance . . . . . . it's just good all around. :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<!-- previous all on one line --> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>OnChange Selects</title> 
<script type="text/javascript"> 
function pulldown_menu(which) {  
 if (which.selectedIndex == 0) { return; }  
 var url = 'http:\/\/www.example.com\/' + which.options[which.selectedIndex].value;  
 //window.location.href = url;  
 alert(url); 
 // swap the comment on the alert to actually go to the URL 
} 
function attachSelectBehaviors() { 
 if (document.getElementById) { 
 document.getElementById('select1').onchange=function() {  
 pulldown_menu(document.getElementById('select1'));  
} 
 document.getElementById('select2').onchange=function() {  
 pulldown_menu(document.getElementById('select2'));  
} 
 } 
} 
window.onload=function() { attachSelectBehaviors(); } 
</script> 
</head> 
<body> 
<form action=""> 
<select name="select1" id="select1"> 
 <option value="">Please Select</option> 
 <option value="apples.html">Apples</option> 
 <option value="bananas.html">Bananas</option> 
 <option value="carrots.html">Carrots</option> 
 <option value="dogs.html">Dogs</option> 
</select> 
<select name="select2" id="select2"> 
 <option value="">Please Select</option> 
 <option value="tall_women.html">Tall Women</option> 
 <option value="short_women.html">Short Women</option> 
 <option value="tall_men.html">Tall Men</option> 
 <option value="short_men.html">Short Men</option> 
 <option value="trolls.html">Trolls</option> 
 <option value="hobbits.html">Hobbits</option> 
</select> 
</form> 
</body> 
</html> 

[DrDoc]

The values of PHP variables aren't extracted inside single quotes. Either change your single quotes to double (and escape double quotes inside the string) or, even better, concatenate.

echo ' ... ' . $var . ' ... ';

[DrDoc]

Extending this one step further, you can do one better

Extending this one step further, you can do one better, by putting the JavaScript in an external file ;)

[lavazza]

Why would you duplicate a navigation section when you could simply write a <a name="theNavigationBit"></a> anchor and provide a <a href="#theNavigationBit">link</a>

Otherwise... What about users who (should) see a <noscript> section when such (important?) navigation is implemented via a script?

I suppose you could use good ole fashioned html to write an unordered list of <a href...> links (with, perhaps, a touch of CSS to make it look like a <select>)

[Drag_Racer]

just a note on using this and the last post mentioning using achors.

When using the 'this' keyword within an anchor tag, many time 'this' will refer to the document window and not the anchor, regardless of how the anchor is nested in the document.

[rocknbil]

Extending this one step further, you can do one better, by putting the JavaScript in an external file ;)

In the below example, you would actually put the JS in an external file,

:-)

Otherwise... What about users who (should) see a <noscript> section when such (important?) navigation is implemented via a script?

Perfect argument for adding a submit button and processing it server-side if JS is disabled. A <noscript> would probably not be necessary in that case.

[finoo]

The values of PHP variables aren't extracted inside single quotes. Either change your single quotes to double (and escape double quotes inside the string) or, even better, concatenate.

echo ' ... ' . $var . ' ... ';

I just wanted to say thanks for helping, solved my issue.

[edited by: DrDoc at 10:34 pm (utc) on July 17, 2007]
[edit reason] Fixed [codes] [/edit]