Jos*_*he4 50 html javascript forms dom-events
我的问题和例子都是基于Jason在这个问题上的答案
我试图避免使用eventListner,只是在单击提交按钮时调用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>
Miq*_*uel 65
您可以使用javascript url表单
<form action="javascript:handleClick()">
或者使用onSubmit事件处理程序
<form onSubmit="return handleClick()">
在后面的表单中,如果从handleClick返回false,则会阻止正常的submision过程.如果您希望浏览器遵循正常的submision过程,则返回true.
由于该Javascript:部分,按钮中的onSubmit事件处理程序也会失败
编辑: 我刚尝试这个代码,它的工作原理:
<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>
Ste*_*ton 28
在这段代码中:
getRadioButtonValue(this["whichThing"]))
你实际上并没有得到任何参考.因此,getradiobuttonvalue函数中的radiobutton未定义并引发错误.
编辑 要从单选按钮中获取值,请抓取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>
请注意以下内容,我已将函数调用移到Form的"onSubmit"事件中.另一种方法是将SUBMIT按钮更改为标准按钮,并将其放入按钮的OnClick事件中.我还删除了函数名前面不需要的"JavaScript",并在函数出来的值上添加了显式RETURN.
在函数本身中,我修改了表单的访问方式.结构是: 文件.[表格名称].[控制名称]来获取东西.由于您是从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
}
小智 11
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)">
| 归档时间： |
|
| 查看次数： |
289442 次 |
| 最近记录： |