从html表单调用javascript [英] calling javascript from a html form
问题描述
我将的答案作为Jason的答案这个问题
我试图避免使用eventListner，只需在点击提交按钮时调用handleClick onsubmit。
绝对没有发生任何与我有代码。
为什么handleClick不被调用？
< html>
< head>
< script type =text / javascript>
函数getRadioButtonValue（rbutton）
{
for（var i = 0; i< rbutton.length; ++ i）
{
if（rbutton [i ] .checked）
return rbutton [i] .value;
}
返回null;
}
函数handleClick（event）
{
alert（Favorite weird creature：+ getRadioButtonValue（this [whichThing]））;
event.preventDefault（）; //禁用标准表单提交行为
return false; //防止事件进一步冒泡
}
< / script>
< / head>
< body>
< form name =myformonSubmit =JavaScript：handleClick（）>
< input name =Submittype =submitvalue =UpdateonClick =JavaScript：handleClick（）/>
您最喜欢以下哪一项？
< p>< input type =radioname =whichThingvalue =slithy toves/> Slithy toves< / p>
< p>< input type =radioname =whichThingvalue =borogoves/> Borogoves< / p>
< p>< input type =radioname =whichThingvalue =mome raths/> Mome raths< / p>
< / form>
< / body>
< / html>
编辑：
请不要建议一个框架作为解决方案。
以下是我对代码做出的相关更改，这些更改会导致相同的行为。
function handleClick（）
{
alert（Favorite weird creature：+ getRadioButtonValue（document.myform ['whichThing']）））;
event.preventDefault（）; //禁用标准表单提交行为
return false; //防止事件进一步冒泡
}
< / script>
< / head>
< body>
< form name =aye>;
< input name =Submittype =submitvalue =Updateaction =JavaScript：handleClick（）/>
您最喜欢以下哪一项？
< p>< input type =radioname =whichThingvalue =slithy toves/> Slithy toves< / p>
< p>< input type =radioname =whichThingvalue =borogoves/> Borogoves< / p>
< p>< input type =radioname =whichThingvalue =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））
$ p
$ b $
function handleClick（）{
alert（Favorite weird creature：+ getRadioButtonValue（document.aye.whichThing））;
//event.preventDefault（）; //禁用标准表单提交行为
return false; //防止事件进一步冒泡
}
< / script>
< / head>
< body>
< form name =ayeonSubmit =return handleClick（）>
< input name =Submittype =submitvalue =Update/>
您最喜欢以下哪一项？
< p>< input type =radioname =whichThingvalue =slithy toves/> Slithy toves< / p>
< p>< input type =radioname =whichThingvalue =borogoves/> Borogoves< / p>
< p>< input type =radioname =whichThingvalue =mome raths/> Mome raths< / p>
< / form>
请注意以下几点，我已将函数调用移至窗体的onSubmit事件。另一种方法是将您的SUBMIT按钮更改为标准按钮，并将其放入该按钮的OnClick事件中。我还删除了函数名称前面的不需要的JavaScript，并在函数的值中添加了明确的RETURN。
在函数本身中，我修改了窗体被访问的方式。结构是：
文档。[表单名称]。[控件名称] 即可获取事物。由于您已将您的名称更改为您的名称，因此必须更改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（最喜欢的怪异生物：+ getRadioButtonValue（document.aye.whichThing））;
返回false; //防止进一步冒泡事件
}
I am basing my question and example on Jason's answer in this question
I am trying to avoid using an eventListner, and just to call handleClick onsubmit, when the submit button is clicked.
Absolutely nothing happens with the code I have.
Why is handleClick not being called?
<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>
edit:
Please do not suggest a framework as a solution.
Here are the relevant changes I have made to the code, which results in the same behavior.
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>
In this bit of code:
getRadioButtonValue(this["whichThing"]))
you're not actually getting a reference to anything. Therefore, your radiobutton in the getradiobuttonvalue function is undefined and throwing an error.
EDIT To get the value out of the radio buttons, grab the JQuery library, and then use this:
$('input[name=whichThing]:checked').val()
Edit 2 Due to the desire to reinvent the wheel, here's non-Jquery code:
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;
}
}
or, basically, modify the original line of code to read thusly:
getRadioButtonValue(document.myform.whichThing))
Edit 3 Here's your homework:
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>
Notice the following, I've moved the function call to the Form's "onSubmit" event. An alternative would be to change your SUBMIT button to a standard button, and put it in the OnClick event for the button. I also removed the unneeded "JavaScript" in front of the function name, and added an explicit RETURN on the value coming out of the function.
In the function itself, I modified the how the form was being accessed. The structure is: document.[THE FORM NAME].[THE CONTROL NAME] to get at things. Since you renamed your from aye, you had to change the document.myform. to document.aye. Additionally, the document.aye["whichThing"] is just wrong in this context, as it needed to be document.aye.whichThing.
The final bit, was I commented out the event.preventDefault();. that line was not needed for this sample.
EDIT 4 Just to be clear. document.aye["whichThing"] will provide you direct access to the selected value, but document.aye.whichThing gets you access to the collection of radio buttons which you then need to check. Since you're using the "getRadioButtonValue(object)" function to iterate through the collection, you need to use document.aye.whichThing.
See the difference in this method:
function handleClick() {
alert("Direct Access: " + document.aye["whichThing"]);
alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
return false; // prevent further bubbling of event
}
这篇关于从html表单调用javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
