对同一表单使用多个 javascript 函数

Question

我有一个 table，其中有一个广播组。有 5 个项目，每个项目有 4 个选项（值为 0、1、2、3）。我不仅需要计算所有这些的总数，还需要计算失败的次数（值 = 0）。我有这两个的工作 js。我怎样才能一起使用这些？任何帮助将不胜感激。谢谢。

计数失败（值 = 0）：

function setRadios() {
    function countFail() {
        var numFail = 0;
        oForm = this.form;

        for (var i = 1; i <= 5; i++) {
            var radgrp = document.getElementsByName('Set' + i);
            for (var j = 0; j < radgrp.length; j++) {
                var radio = radgrp[j];
                if (radio.value == "0" && radio.checked) {
                    numFail++;
                }
            }
        }

        oForm.elements.numFail.value = numFail;
    }

    var i = 0,
        input, inputs = document.getElementById('f1').getElementsByTagName('input');

    while (input = inputs.item(i++))
        input.onclick = countFail;
}

onload = setRadios;

总计：

function setRadios() {
    function sumRadios() {
        var total = 0,
            i = 1,
            oForm = this.form;

        while (radgrp = oForm.elements['Set' + (i++)]) {
            j = radgrp.length;
            do
                if (radgrp[--j].checked) {
                    total += Number(radgrp[j].value);
                    break;
                }
            while (j);
        }

        oForm.elements.total.value = total;
    }

    var i = 0,
        input, inputs = document.getElementById('f1').getElementsByTagName('input');

    while (input = inputs.item(i++))
        input.onclick = sumRadios;
}

onload = setRadios;

最后是表格（单选组）——设置计算失败次数：

<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
  <br>
  <form name="f1" method="post" name="buttons" id="f1" onsubmit="return false">
    <table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
      <tbody>
        <tr>
          <td width="20%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
          <td width="20%" align="center" bgcolor="#CCFFFF">Fail</td>
          <td width="20%" align="center" bgcolor="#CCFFFF">Pass</td>
          <td width="20%" align="center" bgcolor="#CCFFFF">Merit</td>
          <td width="20%" align="center" bgcolor="#CCFFFF">Distinction</td>
        </tr>
        <tr>
          <td width="20%" bgcolor="#CCFFFF">Task</td>
          <td width="20%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
          <td width="20%" align="center"><input id="task2" type="radio" name="Set1" value="1" /></td>
          <td width="20%" align="center"><input id="task3" type="radio" name="Set1" value="2" /></td>
          <td width="20%" align="center"><input id="task4" type="radio" name="Set1" value="3" /></td>
        </tr>
        <tr>
          <td width="20%" bgcolor="#CCFFFF">Cohesion</td>
          <td width="20%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
          <td width="20%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1" /></td>
          <td width="20%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2" /></td>
          <td width="20%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3" /></td>
        </tr>
        <tr>
          <td width="20%" bgcolor="#CCFFFF">Lexis</td>
          <td width="20%" align="center"><input id="lexis2" type="radio" name="Set3" value="0" required/></td>
          <td width="20%" align="center"><input id="lexis3" type="radio" name="Set3" value="1" required/></td>
          <td width="20%" align="center"><input id="lexis4" type="radio" name="Set3" value="2" /></td>
          <td width="20%" align="center"><input id="lexis" type="radio" name="Set3" value="3" /></td>
        </tr>
        <tr>
          <td bgcolor="#CCFFFF">Grammar</td>
          <td align="center"><input id="grammar2" type="radio" name="Set4" value="0" required/></td>
          <td align="center"><input id="grammar3" type="radio" name="Set4" value="1" /></td>
          <td align="center"><input id="grammar4" type="radio" name="Set4" value="2" /></td>
          <td align="center"><input id="grammar" type="radio" name="Set4" value="3" /></td>
        </tr>
        <tr>
          <td width="17%" bgcolor="#CCFFFF">Sources</td>
          <td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
          <td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1" /></td>
          <td width="17%" align="center"><input id="sources3" type="radio" name="Set4" value="2" /></td>
          <td width="17%" align="center"><input id="sources4" type="radio" name="Set4" value="3" /></td>
        </tr>
      </tbody>
    </table>
    <br/>
    <div align="center">numFails: <input id="numFail" type="text" name="" value="" />
    </div>
  </form>

Answer 1

有两种方法可以做到。第一个是向一个表单添加多个事件处理程序。只需：

document.querySelector('#myForm').addEventListener('submit', sendForm);
document.querySelector('#myForm').addEventListener('submit', clearForm);

第二个是创建一个匿名函数并在其中调用这两个函数。

document.querySelector('#myForm').addEventListener('submit', function (event) {
  sendForm(event);
  clearForm(event);
});

Answer 2

您可以像我在这里那样轻松地将它们放在一起：

function setRadios() {

  var i = 0,
    k = 0,
    input, inputs = document.getElementById('f1').getElementsByTagName('input');

  while (input = inputs.item(i++))
    input.onclick = countFail;

}

function countFail() {
  var numFail = 0;
  oForm = this.form;

  for (var i = 1; i <= 5; i++) {
    var radgrp = document.getElementsByName('Set' + i);
    for (var j = 0; j < radgrp.length; j++) {
      var radio = radgrp[j];
      if (radio.value == "0" && radio.checked) {
        numFail++;
      }
    }
  }

  oForm.elements.numFail.value = numFail;
  sumRadios(oForm)
}

function sumRadios(oForm) {
  var total = 0,
    i = 1;

  while (radgrp = oForm.elements['Set' + (i++)]) {
    j = radgrp.length;
    do
      if (radgrp[--j].checked) {
        total += Number(radgrp[j].value);
        break;
      }
    while (j);
  }

  oForm.elements.total.value = total;
}

onload = setRadios;

<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
  <br>
  <form name="f1" method="post" name="buttons" id="f1" onsubmit="return false">
    <table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
      <tbody>
        <tr>
          <td width="20%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
          <td width="20%" align="center" bgcolor="#CCFFFF">Fail</td>
          <td width="20%" align="center" bgcolor="#CCFFFF">Pass</td>
          <td width="20%" align="center" bgcolor="#CCFFFF">Merit</td>
          <td width="20%" align="center" bgcolor="#CCFFFF">Distinction</td>
        </tr>
        <tr>
          <td width="20%" bgcolor="#CCFFFF">Task</td>
          <td width="20%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
          <td width="20%" align="center"><input id="task2" type="radio" name="Set1" value="1" /></td>
          <td width="20%" align="center"><input id="task3" type="radio" name="Set1" value="2" /></td>
          <td width="20%" align="center"><input id="task4" type="radio" name="Set1" value="3" /></td>
        </tr>
        <tr>
          <td width="20%" bgcolor="#CCFFFF">Cohesion</td>
          <td width="20%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
          <td width="20%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1" /></td>
          <td width="20%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2" /></td>
          <td width="20%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3" /></td>
        </tr>
        <tr>
          <td width="20%" bgcolor="#CCFFFF">Lexis</td>
          <td width="20%" align="center"><input id="lexis2" type="radio" name="Set3" value="0" required/></td>
          <td width="20%" align="center"><input id="lexis3" type="radio" name="Set3" value="1" required/></td>
          <td width="20%" align="center"><input id="lexis4" type="radio" name="Set3" value="2" /></td>
          <td width="20%" align="center"><input id="lexis" type="radio" name="Set3" value="3" /></td>
        </tr>
        <tr>
          <td bgcolor="#CCFFFF">Grammar</td>
          <td align="center"><input id="grammar2" type="radio" name="Set4" value="0" required/></td>
          <td align="center"><input id="grammar3" type="radio" name="Set4" value="1" /></td>
          <td align="center"><input id="grammar4" type="radio" name="Set4" value="2" /></td>
          <td align="center"><input id="grammar" type="radio" name="Set4" value="3" /></td>
        </tr>
        <tr>
          <td width="17%" bgcolor="#CCFFFF">Sources</td>
          <td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
          <td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1" /></td>
          <td width="17%" align="center"><input id="sources3" type="radio" name="Set4" value="2" /></td>
          <td width="17%" align="center"><input id="sources4" type="radio" name="Set4" value="3" /></td>
        </tr>
      </tbody>
    </table>
    <br/>
    <div align="center">numFails: <input id="numFail" type="text" name="" value="" />
      <div align="center">total: <input id="total" type="text" name="" value="" />
      </div>
    </div>
  </form>
</form>

Answer 3

没错，就是货。太感谢了。我最终没有看你的代码就得到了它（你的代码更好，更优雅）。我很想听听您对我的解决方案的看法（它可能不是运行作为片段，但它确实运行在我的本地主机上）。当有人确切地了解您的追求时，真是令人欣慰。

<?php
$currentPage = $_SERVER[ "PHP_SELF" ];
?>
<html>
<head>
 <link href="stylesheet.css" rel="stylesheet" type="text/css">
 <title>Basic Report</title>
 <script type="text/javascript">
  function setRadios() {
   function countTotals() {
    var numFail = 0;
    var total = 0;
    oForm = this.form;
    for ( var i = 1; i <= 5; i++ ) {
     var radgrp = document.getElementsByName( 'Set' + i );
     var radgrp1 = document.getElementsByName( 'Set' + i );
     
     for ( var j = 0; j < 5; j++ ) {
      var radio = radgrp[ j ];
      if ( radio.value == "0" && radio.checked ) {
       numFail++;
      }
      var radio1 = radgrp1[ j ];
      if ( radio1.checked ) {
       total += Number( radio.value );
      }
     }
    }
    oForm.elements.numFail.value = numFail;
    oForm.elements.total.value = total;
   }
   var i = 0,
    input, inputs = document.getElementById( 'f1' ).getElementsByTagName( 'input' );
   while ( input = inputs.item( i++ ) )
    input.onclick = countTotals;
    
  }
  onload = setRadios;
 </script>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="17%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="15%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Distinction</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Excellence</td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Task</td>
<td width="15%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="17%" align="center"><input id="task2" type="radio" name="Set1" value="1"/></td>
<td width="17%" align="center"><input id="task3" type="radio" name="Set1" value="2"/></td>
<td width="17%" align="center"><input id="task4" type="radio" name="Set1" value="3"/></td>
<td width="17%" align="center"><input id="task5" type="radio" name="Set1" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Cohesion</td>
<td width="15%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="17%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1"/></td>
<td width="17%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2"/></td>
<td width="17%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3"/></td>
<td width="17%" align="center"><input id="cohesion5" type="radio" name="Set2" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Lexis</td>
<td width="15%" align="center"><input id="lexis1" type="radio" name="Set3" value="0" required/></td>
<td width="17%" align="center"><input id="lexis2" type="radio" name="Set3" value="1"/></td>
<td width="17%" align="center"><input id="lexis3" type="radio" name="Set3" value="2"/></td>
<td width="17%" align="center"><input id="lexis4" type="radio" name="Set3" value="3"/></td>
<td width="17%" align="center"><input id="lexis4" type="radio" name="Set3" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Grammar</td>
<td width="15%" align="center"><input id="grammar1" type="radio" name="Set4" value="0" required/></td>
<td width="17%" align="center"><input id="grammar2" type="radio" name="Set4" value="1"/></td>
<td width="17%" align="center"><input id="grammar3" type="radio" name="Set4" value="2"/></td>
<td width="17%" align="center"><input id="grammar4" type="radio" name="Set4" value="3"/></td>
<td width="17%" align="center"><input id="grammar5" type="radio" name="Set4" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1"/></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set5" value="2"/></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set5" value="3"/></td>
<td width="17%" align="center"><input id="grammar5" type="radio" name="Set5" value="4"/></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">NumFail: <input id="numFail" type="text" name="numFail" value=""/>
<div align="center">Total: <input id="total" type="text" name="total" value=""/>
<input type="reset" class="button1"/>
</div>
</form>

对同一表单使用多个 javascript 函数

Using more than one javascript function for the same form

javascript

forms

radio-group