文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >对同一表单使用多个javascript函数

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

Stack Overflow用户
提问于 2018-09-17 14:27:10
回答 3查看 215关注 0票数 2

我有一张桌子上有一个无线电组。有5个项，每个项有4个选项(其值为0、1、2、3)。我不仅需要计算所有这些的总和，还需要计算失败的次数(值= 0)。这两件我都有工作。我怎么才能在一起使用这些？如能提供任何协助，将不胜感激。谢谢。

计数失败(value = 0)：

代码语言：javascript
复制
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;

合计：

代码语言：javascript
复制
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;

最后，这里是用于计算失败次数的表单(无线电组)：

代码语言：javascript
复制
<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>
forms
radio-group
javascript
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-09-18 10:05:05

是的，那是货物。非常感谢。最后，我没有看您的代码就得到了它(您的代码更好，更优雅)。我很想听听您对我的解决方案的看法(它可能不是以代码段的形式运行，但它确实运行在我的本地主机上)。当有人确切地理解你想要的是什么时，这是如此令人欣慰的。

​

代码语言：javascript
复制
<?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>

​

票数 0
EN

Stack Overflow用户

发布于 2018-09-17 14:32:46

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

代码语言：javascript
复制
document.querySelector('#myForm').addEventListener('submit', sendForm);
document.querySelector('#myForm').addEventListener('submit', clearForm);

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

代码语言：javascript
复制
document.querySelector('#myForm').addEventListener('submit', function (event) {
  sendForm(event);
  clearForm(event);
});
票数 1
EN

Stack Overflow用户

发布于 2018-09-17 14:37:23

你可以像我一样很容易地把它们放在一起：

​

代码语言：javascript
复制
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;
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52370026

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档