Add inputs in report with more than one table!

Asked

Viewed 308 times

4

I’m generating a report and it has several tables. In jQuery I have to add 2 inputs from each table, the problem is that it only adds up the one from the first table. I tried to use the next(), but it didn’t work out.

Follow the HTML code:

<td id=\"tabela\">
<input type=\"text\" id=\"tabelainput\" class=\"janmembros\" maxlength=\"3\" name=\"janmembros\" value=\"$row[janmembros]\" disabled>
</td>
<td id=\"tabela\">
<input type=\"text\" id=\"tabelainput\" class=\"janvisitantes\" maxlength=\"3\" name=\"janvisitantes\" value=\"$row[janvisitantes]\" disabled>
</td>
<td id=\"tabela3\" class=\"jantotal\">
</td>

<td id=\"tabela\">
<input type=\"text\" id=\"tabelainput\" class=\"janmembros\" maxlength=\"3\" name=\"janmembros\" value=\"$row[janmembros]\" disabled>
</td>
<td id=\"tabela\">
<input type=\"text\" id=\"tabelainput\" class=\"janvisitantes\" maxlength=\"3\" name=\"janvisitantes\" value=\"$row[janvisitantes]\" disabled>
</td>
<td id=\"tabela3\" class=\"jantotal\">
</td>

<td id=\"tabela\">
<input type=\"text\" id=\"tabelainput\" class=\"janmembros\" maxlength=\"3\" name=\"janmembros\" value=\"$row[janmembros]\" disabled>
</td>
<td id=\"tabela\">
<input type=\"text\" id=\"tabelainput\" class=\"janvisitantes\" maxlength=\"3\" name=\"janvisitantes\" value=\"$row[janvisitantes]\" disabled>
</td>
<td id=\"tabela3\" class=\"jantotal\">
</td>

jQuery:

if ( $( ".janmembros" ).val().length >= 1 && $( ".janvisitantes" ).val().length >= 1 )
{
$( ".jantotal" ).html( parseInt($( ".janmembros" ).val()) + parseInt($( ".janvisitantes" ).val()) );
}

Jsfiddle

jquery
  • 1

    You have several elements on the page with the same ID, jQuery when locating elements by ID, only looks for one element, so only the first is added... ID is a unique identifier, you should make use of class or rectify these ID’s so that they do not repeat themselves.

  • @Zuul, but in jquery I am using classes!

1 answer

5


Since you have several elements to be located to perform the sum value operation and display the result, you can make use of the iteration function .each() jQuery that will allow you for each group of elements located, perform certain operation on the same:

Jsfiddle Working Example

// se estão presentes e não estão vazios
if ( $( ".janmembros" ).val() != '' && $( ".janvisitantes" ).val() != '' )
{

    // por cada tabela encontrada
    $('table').each(function() {

        /* coloca em cache o objecto referente à tabela
         * e trabalha com os elementos dentro da mesma
         */
        var $this = $(this),                                             // cache da <table>
            janmembros = parseInt($this.find( ".janmembros" ).val()),
            janvisitantes = parseInt($this.find( ".janvisitantes" ).val());

        // soma e enviar para o destino
        $this.find( ".jantotal" ).html( janmembros+janvisitantes ); 
    });
}

  • Great, that’s what I needed!!!

Browser other questions tagged jquery

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