How to separate tables in the same HTML that uses JavaScript and display the result in boxes

0

How to separate tables in the same HTML that uses JavaScript and display the result in different boxes?

<HTML>  
<HEAD>  
<TITLE> Teste </TITLE>  

</HEAD>  

<BODY> 
                    <table border='2'>

<tr>
 <SCRIPT LANGUAGE="JavaScript">  
    <!-- 
    var total = 4;  
    function soma(campo) {  
        if (campo.checked)  
           total -= eval(campo.value);  
       else   
           total += eval(campo.value);  
       document.sistema.total.value = total; 
   }  
   //-->  
</SCRIPT>
<TD>Rodrigo Nunes</TD>
<FORM METHOD=POST ACTION="" name="sistema">  

<TD>1<input type="checkbox" name="valor" value="1" onClick="soma(this)"> </TD> 
<TD>2<input type="checkbox" name="valor" value="1" onClick="soma(this)"></TD>  
<TD>3<input type="checkbox" name="valor" value="1" onClick="soma(this)"></TD>  
<TD>4<input type="checkbox" name="valor" value="1" onClick="soma(this)"></TD>
<TD>Total de Faltas <input type="text" name="total" value=""></TD>

</FORM>
</TR>
<tr>
 <SCRIPT LANGUAGE="JavaScript">  
    <!-- 
    var total1 = 4;  
    function soma(campo) {  
        if (campo.checked)  
           total1 -= eval(campo.value);  
       else   
           total1 += eval(campo.value);  
       document.sistema1.total1.value = total1; 
   }  
   //-->  
</SCRIPT>
<TD>Rodrigo Lima</TD>
<FORM METHOD=POST ACTION="" name="sistema1">  

<TD>1<input type="checkbox" name="valor1" value="1" onClick="soma(this)"> </TD> 
<TD>2<input type="checkbox" name="valor1" value="1" onClick="soma(this)"></TD>  
<TD>3<input type="checkbox" name="valor1" value="1" onClick="soma(this)"></TD>  
<TD>4<input type="checkbox" name="valor1" value="1" onClick="soma(this)"></TD>
<TD>Total de Faltas <input type="text" name="total1" value=""></TD>

</FORM>
</TR>

</BODY>  
</HTML>  
    
asked by anonymous 09.11.2014 / 14:42

1 answer

2

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>
    
09.11.2014 / 15:40