Log in

View Full Version : javascript function even handling


ianc
03-21-2007, 03:58 AM
Hi all,
I have a javascript function which I need to use to enable and disable and set attributes of certain elements on my form.

I have a drop down field called 'dropDownList'
I have a submit button called 'addItem'

The HTML will look like this
<select id="dropDownList" name="dropDownList">
<option>Select Type</option>
<option value="1">1 - dog</option>
<option value="2">2 - pig</option>
<option value="3">3 - cow</option>
</select>
<button type="button" id="addItem" name="action" value="addItem"
onmouseover="validate_form();">
Add
</button>

I want my javascript to do the following:
function validate_form() {
var dropDownListElem = document.getElementById('dropDownList');
var addItemElem = document.getElementById('addItem');

If (dropDownListElem.value == "Select Type") {
addItemElem.disabled = true;
<Only now I want to set the onmouseover actions for the 'dropDownList' element... How do I do this?>
}
}

note: I also have a smaller function
function activate_Button(fieldid) {
var element = document.getElementById(fieldid);
element.disabled = false;
}
to reactivate the disabled button.

I'm not to familiar with the DOM for handling user events... I'm guessing it'll be something like dropDownList.onmouseover=<action> but that didn't work.

Help?
Thanks
jscheuer1
03-21-2007, 04:16 AM
There are several ways but given only what you've shown in your post, the best way (for modern browsers) that is also simple to explain would be:


document.getElementById('dropDownList').onmouseover=function(){
code to carry out
};
codeexploiter
03-21-2007, 10:12 AM
The code you've mentioned in your posting contains some errors


If (dropDownListElem.value == "Select Type") {

1. if's i is not a capital letter in your case it is change that to small

2. dropDownListElem.value will not give you value you have to use the following method


dropDownListElem.options[dropDownListElem.selectedIndex].value

3. According to your combo box definition there is no such option whose value is "Select Type" and that makes your entire condition checking invalid.
Use the selected index if it is 0 then perform the disabling operation have a look at the following code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function validate_form()
{
var dropDownListElem = document.getElementById('dropDownList');
var addItemElem = document.getElementById('addItem');

var index = dropDownListElem.selectedIndex;

if(index == 0)
{
addItemElem.disabled = true;
//<Only now I want to set the onmouseover actions for the 'dropDownList' element... How do I do this?>
//or you can do something like the following
//dropDownListElem.onmouseover = yourfunction;
dropDownListElem.onmouseover = function() {
//place whatever code you want to execute when the user places their mouse over the drop down menu
alert('This is JavaScript');
}
}
}
</script>
</head>

<body>
<select id="dropDownList" name="dropDownList">
<option>Select Type</option>
<option value="1">1 - dog</option>
<option value="2">2 - pig</option>
<option value="3">3 - cow</option>
</select>
<button type="button" id="addItem" name="action" value="addItem" onmouseover="validate_form();">Add</button>
</body>
</html>
Twey
03-21-2007, 10:18 AM
2. dropDownListElem.value will not give you value you have to use the following methodNot so. It should work fine in all modern browsers.
3. According to your combo box definition there is no such option whose value is "Select Type" and that makes your entire condition checking invalid. Most browsers will use the option's text as its value if there's no specified value. Some won't, though, so you should assign the value explicitly.

If I were you, I'd seriously reconsider the use of onmouseover. What happens if the user activates the button by keyboard? The best option would be to use a submit button and override the onsubmit event of the form.