59

我的问题和示例基于 Jason 在这个问题中的回答

当单击提交按钮时，我试图避免使用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>
4

6 回答 6

73

您可以使用 javascript url 表单

<form action="javascript:handleClick()">

或使用 onSubmit 事件处理程序

<form onSubmit="return handleClick()">

在后面的表单中，如果你从handleClick返回false，它会阻止正常的提交过程。如果您希望浏览器遵循正常的提交过程，则返回 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>
于 2009-03-25T21:33:48.640 回答
38

在这段代码中：

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。

在函数本身中，我修改了表单的访问方式。结构是： document.[THE FORM NAME].[THE CONTROL NAME]来处理事情。由于您重命名了 from aye，因此您必须更改 document.myform。记录。是的。此外，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
}
于 2009-03-25T21:25:16.290 回答
12

应该补充 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)">
于 2016-11-17T12:41:48.707 回答
3

在您的编辑版本中有几处需要更改：

  1. 你已经接受了使用document.myform['whichThing']有点过于字面意思的建议。您的表单名为“aye”，因此访问 whichThing 单选按钮的代码应使用该名称：`document.aye['whichThing']。

  2. 没有标签的action属性之类的东西。<input>改用onclick：<input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/>

  3. 在浏览器中获取和取消 Event 对象是一个非常复杂的过程。它因浏览器类型和版本而异。IE 和 Firefox 处理这些事情的方式非常不同，所以简单的event.preventDefault()行不通……事实上，甚至可能不会定义事件变量，因为这是来自标签的 onclick 处理程序。这就是为什么上面的斯蒂芬如此努力地提出一个框架的原因。我知道你想知道机制，我推荐谷歌。在这种情况下，作为一种简单的解决方法，return false在 onclick 标记中使用上面的数字 2（或按照 stephen 的建议从函数中返回 false）。

  4. 由于＃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>
于 2009-03-26T17:51:19.650 回答
0

您的代码中的所有内容似乎都很完美，除了 handleClick() 无法正常工作，因为该函数在其函数调用调用中缺少参数（但其中的函数定义有一个导致函数不匹配发生的参数）。

以下是计算所有学期总分和相应成绩的示例工作代码。它演示了在 html 文件中使用 JavaScript 函数（调用），并解决了您面临的问题。

<!DOCTYPE html>
<html>
<head>
    <title> Semester Results </title>
</head>
<body>
    <h1> Semester Marks </h1> <br> 
    <script type = "text/javascript">
        function checkMarks(total)
        {
            document.write("<h1> Final Result !!! </h1><br>");
            document.write("Total Marks = " + total + "<br><br>");
            var avg = total / 6.0;
            document.write("CGPA = " + (avg / 10.0).toFixed(2) + "<br><br>");
            if(avg >= 90)
                document.write("Grade = A");
            else if(avg >= 80)
                document.write("Grade = B");
            else if(avg >= 70)
                document.write("Grade = C");
            else if(avg >= 60)
                document.write("Grade = D");
            else if(avg >= 50)
                document.write("Grade = Pass");
            else
                document.write("Grade = Fail");
       }
    </script>
    <form name = "myform" action = "javascript:checkMarks(Number(s1.value) + Number(s2.value) + Number(s3.value) + Number(s4.value) + Number(s5.value) + Number(s6.value))"/>
        Semester 1:  <input type = "text" id = "s1"/> <br><br>
        Semester 2:  <input type = "text" id = "s2"/> <br><br>
        Semester 3:  <input type = "text" id = "s3"/> <br><br>
        Semester 4:  <input type = "text" id = "s4"/> <br><br>
        Semester 5:  <input type = "text" id = "s5"/> <br><br>
        Semester 6:  <input type = "text" id = "s6"/> <br><br><br>
        <input type = "submit" value = "Submit"/>
    </form>
</body>
</html>
于 2019-11-01T21:22:54.493 回答
-1

javascript:从onclick="..,onsubmit="..声明中删除

javascript:前缀仅用于href=""或类似的属性（与事件无关）

于 2009-03-25T21:25:10.737 回答