Radio Button producing undefined value in javascript function
I am trying to send the value of a radio button to a javascript function. Eventually the function will do more but my testing it has come to a dead end because I keep getting a returned value of undefined. Here is what I have:
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<SCRIPT TYPE="text/javascript">
<!--
function jobWindow(){
var target;
for( i = 0; i < document.jobView.sales.length; i++ ){
if( document.jobView.sales[i].checked == true )
target = document.jobView.sales[i].value;
break;
}
alert( "val = " + target );
//var load = window.open('target','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no');
}
// -->
</script>
</head>
<body>
<form name="jobView">
<input name ="sales" value="all" type="radio" />All
<input开发者_运维技巧 name="sales" value="darell" type="radio" />Darell
<input name="sales" value="kevin" type="radio" />Kevin
<input name="sales" value="brad" type="radio" />Brad
<input name="sales" value="chongo" type="radio" />Chongo
<input type="button" value="View Records" onclick="jobWindow()"/>
<input type="button" value="View Calendar" />
</form>
</body>
</html>
The access path you actually want is:
var el = document.forms["jobView"].elements["sales"];
The straight dot chain (document.jobView.sales) makes an implicit call to the "all" collection, which will only work in IE. (Yes, I know that Firefox returns an identical-looking string in its error console when things go wrong, but you can't actually use it in your own code.) getELementsByTagName() and getElementsByName() will work just fine, but then you need to ensure that the elements in the returned collection are the ones you actually want. (Assume that a time will come when you want to create more than one form on the page, and that field names will collide. It will never happen, of course, unless you fail to make that assumption out of the gate, whereupon another developer will immediately add a second form to the page you just committed.)
Try with document.getElementsByTagName like this:
function jobWindow(){
var myvalue;
var el = document.getElementsByTagName('input');
for( i = 0; i < el.length; i++ ){
if (document.forms['jobView'].el[i].type === 'radio' && document.forms['jobView'].el[i].name === 'sales')
{
if(document.forms['jobView'].el[i].checked == true )
{
myvalue = document.forms['jobView'].el[i].value;
break;
}
}
}
alert( "val = " + myvalue );
}
Note also that your break line never executed because you were missing curly brackets:
if( document.jobView.sales[i].checked == true )
{
target = document.jobView.sales[i].value;
break;
}
change document.jobView.sales to document.getElementsByName('sales')
throw some debugging in there. for example put an alert() inside the for() statement to make sure it is getting a definition for document.jobView.sales.length.
If it doesn't make the alert, you can almost bet document.jobView.sales.length is undefined.
You can then do try { var length = document.jobView.sales.length; } catch(e) { alert(e); } to verify this.
If you verify that document.jobView.sales.length isn't being defined, you may have to use document.getElementsByTagName, and loop through them instead of document.jobView
加载中,请稍侯......
精彩评论