从HTML表单调用JavaScript
我把这个问题作为杰森在这个问题上的回答
我试图避免使用eventListner，只要调用handleClickClicksubmit，当提交button被点击。
我的代码绝对没有发生。
为什么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> 编辑：
请不要build议框架作为解决scheme。
以下是我对代码做出的相关更改，这些更改会导致相同的行为。
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函数中的单选button是未定义的并引发错误。
编辑要获取单选button的值，请抓住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”事件。 另一种方法是将您的SUBMITbutton更改为标准button，并将其放入该button的OnClick事件中。 我还删除了函数名称前面的不需要的“JavaScript”，并在函数中添加了一个明确的返回值。
在函数本身中，我修改了表单被访问的方式。 结构是： 文档[表单名称] [控制名称]来获取事物。 既然你从你的名字改名，你必须改变document.myform。 到document.aye。 另外， document.aye [“whichThing”]在这个上下文中是错误的，因为它需要成为document.aye.whichThing 。
最后一点，我注释了event.preventDefault（）; 。 该样本不需要该行。
编辑4只是要清楚。 document.aye [“whichThing”]将为您提供直接访问选定的值，但document.aye.whichThing让您访问单选button的集合，然后您需要检查。 由于您使用“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 }
您可以使用JavaScript的URLforms
<form action="javascript:handleClick()">
或者使用onSubmit事件处理程序
<form onSubmit="return handleClick()">
在后面的表格中，如果你从handleClick中返回false，将会阻止正常的submision过程。 如果您希望浏览器遵循正常的子stream程，请返回true。
button中的onSubmit事件处理程序也由于Javascript:部分而失败
编辑：我只是试过这段代码，它的工作原理：
<html> <head> <script type="text/javascript"> function handleIt() { alert("hello"); } </script> </head> <body> <form name="myform" action="javascript:handleIt()"> <input name="Submit" type="submit" value="Update"/> </form> </body> </html>
应该补充Miquel（＃32）的一个例子：
<html> <head> <script type="text/javascript"> function handleIt(txt) { // txt == content of form input alert("Entered value: " + txt); } </script> </head> <body> <!-- javascript function in form action must have a parameter. This parameter contains a value of named input --> <form name="myform" action="javascript:handleIt(lastname.value)"> <input type="text" name="lastname" id="lastname" maxlength="40"> <input name="Submit" type="submit" value="Update"/> </form> </body> </html>
表格应该有：
<form name="myform" action="javascript:handleIt(lastname.value)">
编辑版本中有几件事要改变：
-
你已经采取了使用
document.myform['whichThing']有点太字面的build议。 您的表单被命名为“aye”，因此访问whichThing单选button的代码应该使用该名称：document.aye ['whichThing']。 -
<input>标签没有这样的action属性。 使用onclick来代替：<input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/> -
在浏览器中获取和取消Event对象是一个非常复杂的过程。 它因浏览器types和版本而异。 IE和Firefox处理这些事情的方式有很大不同，所以一个简单的
event.preventDefault()将不起作用…事实上，事件variables可能甚至不会被定义，因为这是一个标签的onclick处理程序。 这就是为什么斯蒂芬上面正在努力提出一个框架。 我意识到你想知道的机制，我build议谷歌。 在这种情况下，作为一个简单的解决方法，在onclick标记中使用return false（如上面的第2步所示），或者如stephen所示，从函数返回false。 -
因为＃3，摆脱你的处理程序中的所有警告声明。
代码现在应该如下所示：
function handleClick() { alert("Favorite weird creature: "+getRadioButtonValue(document.aye['whichThing'])); } </script> </head> <body> <form name="aye"> <input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/> 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>
删除javascript:从onclick=".. ， onsubmit="..声明
javascript:前缀仅用于href=""或类似的属性（与事件无关）
