我将我的问题和示例基于this问题中杰森的答案
我试图避免使用eventListener，而是在单击“提交”按钮时仅调用handleClick onsubmit。
我拥有的代码绝对不会发生任何事情。
为什么不调用handleClick？
<html>
<head>
<script type="text/javascript">
function getRadioButtonValue(rbutton)
{
for (var i = 0; i < rbutton.length; ++i)
{
if (rbutton[i].checked)
return rbutton[i].value;
}
return null;
}
function handleClick(event)
{
alert("Favorite weird creature: "+getRadioButtonValue(this["whichThing"]));
event.preventDefault(); // disable normal form submit behavior
return false; // prevent further bubbling of event
}
</script>
</head>
<body>
<form name="myform" onSubmit="JavaScript:handleClick()">
<input name="Submit" type="submit" value="Update" onClick="JavaScript:handleClick()"/>
Which of the following do you like best?
<p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
<p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
<p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
</form>
</body>
</html>
编辑:
请不要建议使用框架作为解决方案。
这是我对代码进行的相关更改，导致相同的行为。
function handleClick()
{
alert("Favorite weird creature: "+getRadioButtonValue(document.myform['whichThing'])));
event.preventDefault(); // disable normal form submit behavior
return false; // prevent further bubbling of event
}
</script>
</head>
<body>
<form name="aye">;
<input name="Submit" type="submit" value="Update" action="JavaScript:handleClick()"/>
Which of the following do you like best?
<p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
<p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
<p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
</form>
最佳答案
在这段代码中:
getRadioButtonValue(this["whichThing"]))
您实际上并没有引用任何内容。因此，您在getradiobuttonvalue函数中的单选按钮未定义，并引发错误。
编辑
要从单选按钮中获取值，请获取JQuery库，然后使用此方法:
$('input[name=whichThing]:checked').val()
编辑2
由于需要重新发明轮子，因此以下是非Jquery代码:
var t = '';
for (i=0; i<document.myform.whichThing.length; i++) {
if (document.myform.whichThing[i].checked==true) {
t = t + document.myform.whichThing[i].value;
}
}
或者，基本上，将原始代码行修改为:
getRadioButtonValue(document.myform.whichThing))
编辑3
这是您的作业:
function handleClick() {
alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
//event.preventDefault(); // disable normal form submit behavior
return false; // prevent further bubbling of event
}
</script>
</head>
<body>
<form name="aye" onSubmit="return handleClick()">
<input name="Submit" type="submit" value="Update" />
Which of the following do you like best?
<p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
<p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
<p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
</form>
请注意以下内容，我已将函数调用移至窗体的“onSubmit”事件。一种替代方法是将“提交”按钮更改为标准按钮，然后将其放入按钮的OnClick事件中。我还删除了函数名称前面不需要的“JavaScript”，并在从函数出来的值上添加了显式的RETURN。
在函数本身中，我修改了表单的访问方式。结构为:
文档。[表格名称]。[THE CONTROL NAME] 以了解内容。由于您是从aye重命名的，因此您必须更改document.myform。到document.aye。另外，document.aye [“whichThing”]在这种情况下是错误的，因为它需要是document.aye.whichThing。
最后一点是我将 event.preventDefault();注释掉了。 。该样本不需要该行。
编辑4 请注意。 document.aye [“whichThing”] 将为您提供对所选值的直接访问权，而 document.aye.whichThing 将使您能够访问随后需要检查的单选按钮集合。由于您使用的是“getRadioButtonValue(object)”函数来遍历集合，因此需要使用 document.aye.whichThing 。
查看此方法的区别:
function handleClick() {
alert("Direct Access: " + document.aye["whichThing"]);
alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
return false; // prevent further bubbling of event
}