时间戳

首页 > 解决方案 > 对同一个表单使用多个 javascript 函数

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

问题描述

我有一张桌子，里面有一个广播组。有 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>

标签： javascriptformsradio-group

解决方案

有两种方法可以做到这一点。第一个是将多个事件处理程序添加到一个表单。简单地：

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

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

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

推荐阅读