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

Asked

Viewed 501 times

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>
javascript checkbox

1 answer

2

Problem

Your current problem 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 involves changing function names and updating calls to them on 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;
}

To Markup of your HTML

Your Markup HTML is a little confused and incorrect because you are using the form opening and closing tags in the middle of the Markup table.

Follow an enhanced 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 you use the W3C Markup validator (English) so that you can receive feedback about your HTML code in order to know if it is correct. It is important to have the Markup correct for everything to work as expected across browsers.

Complete example at work

Below follows example working using the Markup 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>

Browser other questions tagged javascript checkbox

You are not signed in. Login or sign up in order to post.