Search jQuery

jQuery Forum

Using bind()

in Using jQuery • 2 years ago

Hi, I'm new to javascript and jquery. I was looking to use $(selector).bind() instead of using the ONCHANGE handler inline. Could some one help me out on how to use that in the following code.

<Script language="JavaScript">
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
</script>
<div id="select_student">
<br />
<br />
<h2>Choose a Student:</h2>
<form id="student_select" method="post">
<select id="select" name="select" ONCHANGE="goto(this.form)" SIZE="1">
<option selected="selected">---Select a Student---</option>
<?php
foreach ($students as $s) {
echo ('<option name="student_choice" value="https://secure.freteleven.com/lesson/get_student_lesson/'.$s->userid.'">'.$s->first_name.' '.$s->last_name.'</option>');
}
?>
</select>
</form>
<br />
<br />
</div>

Replies(3)

skaarup

Re: Using bind()

2 years ago

Hi,

You could do something like the following:

<script type="text/javascript">
/* Your function here */
$(function(){
$("#select").bind('change', function(){
goto(document.getElementByid('student_select'));
});
});
</script>

This will attatch an "onchange " event handler to the select element. The event handler will then call your goto function, with the form as an argument.

You could also use the change() function instead:

$("#select").change(function(){
...
});

Note: untested code.

ging_31

Re: Using bind()

2 years ago

That works great. Thx.

So just so this newbie gets it right.

document.getElementByid('student_select') returns form[0] from the dom. (in my case).

When it's inline (my original code) it's this.form that is being passed to the function. So obviously they are returning the same value. Just wondering what that is?

dave.meth..

Re: Using bind()

2 years ago

Right, #student_select is the form DOM object.

In both a raw DOM event handler and a jQuery event handler, the DOM element that triggered the change is the "this" object inside the event handling function. In your case it is a select element. Every input/select/textarea element has a "form" property that points back to the form it's inside:

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980

BTW I strongly recommend against using using name/id attributes that are identical to the elements or properties. Specifically, don't name an input element "select", "id", "name", "form", "action", "method", "value", or any other name that is documented to be used by form or input elements. Here is why. The form element allows you to access its inputs by saying formname.inputname. So if you have an input named "myinput" you can use form.myinput to access it. But what if you name an input "id"? Now when you say form.id do you mean the "id" property of the form, or do you mean the "id" input inside the form?

This tool can help you find those sort of problems:
http://yura.thinkweb2.com/domlint/

Guest