Использование более одной функции JavaScript для одной и той же формы - PullRequest
Новая
       11

Использование более одной функции JavaScript для одной и той же формы

0 голосов
/ 17 сентября 2018

У меня есть таблица, в которой есть радиогруппа.Есть 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>

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Вы можете легко собрать их вместе, как я сделал здесь: 

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>
0 голосов
/ 18 сентября 2018

Да, это товар. Огромное спасибо. В конце концов я получил его, не глядя на ваш код (ваш намного лучше и намного элегантнее). Я хотел бы услышать, что вы думаете о моем решении (оно может не работать как фрагмент, но оно работает на моем локальном хосте). Это так приятно, когда кто-то понимает, что именно вы ищете. 

<?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 голосов
/ 17 сентября 2018

Есть 2 способа сделать это. Первый - добавить несколько обработчиков событий в одну форму. Просто: 

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

Второй - создать анонимную функцию и вызвать внутри нее эти две функции. 

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