Problem
Your current issue is that you are using two JavaScript functions both with the same name:
// Antes do teu primeiro formulário
var total = 4;
function soma(campo) { /*...*/ }
// Antes do teu segundo formulário
var total1 = 4;
function soma(campo) { /*...*/ }
Solution
A quick solution is to change function names and update calls to them in onclick
:
See example in JSFiddle .
/* Para tabela com nome "sistema1"
*/
var total1 = 4;
function soma1(campo) {
console.log(campo.checked);
if (campo.checked) total1 -= eval(campo.value);
else total1 += eval(campo.value);
document.sistema1.total1.value = total1;
}
/* Para tabela com nome "sistema2"
*/
var total2 = 4;
function soma2(campo) {
if (campo.checked) total2 -= eval(campo.value);
else total2 += eval(campo.value);
document.sistema2.total2.value = total2;
}
A markup of your HTML
Your HTML markup is a bit confusing and incorrect because you're using the form's open and close tags through the markup of the table.
>
Here's an improved version of your table:
<table>
<tr>
<td>
<form method="post" action="" name="sistema1">
<table border='2'>
<tr>
<td>Rodrigo Nunes</td>
<td>1
<input type="checkbox" name="valor1" value="1" onClick="soma1(this)"/>
</td>
<td>2
<input type="checkbox" name="valor1" value="1" onClick="soma1(this)"/>
</td>
<td>3
<input type="checkbox" name="valor1" value="1" onClick="soma1(this)"/>
</td>
<td>4
<input type="checkbox" name="valor1" value="1" onClick="soma1(this)"/>
</td>
<td>Total de Faltas
<input type="text" name="total1" value=""/>
</td>
</tr>
</table>
</form>
</td>
<td>
<form method="post" action="" name="sistema2">
<table border='2'>
<tr>
<td>Rodrigo Lima</td>
<td>1
<input type="checkbox" name="valor2" value="1" onClick="soma2(this)"/>
</td>
<td>2
<input type="checkbox" name="valor2" value="1" onClick="soma2(this)"/>
</td>
<td>3
<input type="checkbox" name="valor2" value="1" onClick="soma2(this)"/>
</td>
<td>4
<input type="checkbox" name="valor2" value="1" onClick="soma2(this)"/>
</td>
<td>Total de Faltas
<input type="text" name="total2" value=""/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
I recommend using the W3C markup validator (English) so you can receive feedback about your HTML code so you know if it is correct. It's important to have the correct markup to make everything work as expected across browsers.
Complete example working
Below is an example of using markup for suggested HTML as well as suggested JavaScript usage:
var total1 = 4;
function soma1(campo) {
console.log(campo.checked);
if (campo.checked) total1 -= eval(campo.value);
else total1 += eval(campo.value);
document.sistema1.total1.value = total1;
}
var total2 = 4;
function soma2(campo) {
if (campo.checked) total2 -= eval(campo.value);
else total2 += eval(campo.value);
document.sistema2.total2.value = total2;
}
<table>
<tr>
<td>
<form method="post" action="" name="sistema1">
<table border='2'>
<tr>
<td>Rodrigo Nunes</td>
<td>1
<input type="checkbox" name="valor1" value="1" onClick="soma1(this)"/>
</td>
<td>2
<input type="checkbox" name="valor1" value="1" onClick="soma1(this)"/>
</td>
<td>3
<input type="checkbox" name="valor1" value="1" onClick="soma1(this)"/>
</td>
<td>4
<input type="checkbox" name="valor1" value="1" onClick="soma1(this)"/>
</td>
<td>Total de Faltas
<input type="text" name="total1" value=""/>
</td>
</tr>
</table>
</form>
</td>
<td>
<form method="post" action="" name="sistema2">
<table border='2'>
<tr>
<td>Rodrigo Lima</td>
<td>1
<input type="checkbox" name="valor2" value="1" onClick="soma2(this)"/>
</td>
<td>2
<input type="checkbox" name="valor2" value="1" onClick="soma2(this)"/>
</td>
<td>3
<input type="checkbox" name="valor2" value="1" onClick="soma2(this)"/>
</td>
<td>4
<input type="checkbox" name="valor2" value="1" onClick="soma2(this)"/>
</td>
<td>Total de Faltas
<input type="text" name="total2" value=""/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>