Change element with jquery

Question

Change element with jquery

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Hello, I have a problem, in the code below I have a product table, where they have a value (R $) and an input for the customer to choose a quantity. I need that when the customer changes the quantity, it is multiplied by the value of the product and is shown in the total value field (element in the footer of the page).

This function is already working, however, only for the first item in the product list, that is, from the moment that I change the quantity of the first item, it is multiplied by the value and the total value field is updated, but when the next amount is set the total value field is not updated.

I do not know what is wrong, if anyone can help, thank you very much, follow code: To save page, I left out the header where I refer to JS files and other documents.

Table: Product Value Quantity

                <tr id="produto">
                    <td><?=$produto['nomeProduto'] ?></td>
                    <td><div id="valor"><?=$produto['valorProduto']?></div></td>
                    <td>
                        <input id="quantidade" type="number" size="1" maxlength="2" max="10" min="0" step="0">
                    </td>
                </tr>

                <?php
                     endforeach;
                ?>
            </table>                
    <footer>
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <label> Total: </label>
            <div id="total" class="navbar-right">
              R$ 0,00
            </div>
        </nav>
    </footer>

Functions:

    function dinheiroTextoParaFloat(text) {  //"Transofram" em float.
    var limpaTexto = text.replace("R$", "").replace(",", ".");
    return parseFloat(limpaTexto);
}

function floatParaDinheiroTexto(value) { //"Transforma" em texto.
    var text = (value < 1 ? "0" : "") + Math.floor(value * 100);
    text = "R$ " + text;
    return text.substr(0, text.length - 2) + "," + text.substr(-2);
}

function leTotal() {                      
    var total = $("#total").text();      //Le o texto do elemento com ID total.
    return dinheiroTextoParaFloat(total); //Retorna o texto convertido em float. 
}

function escreveTotal(value) {
    var text = floatParaDinheiroTexto(value); //Armazena na variavel text o valor convertido em texto.
    $("#total").text(text); //escreve o total no elemento com id total.
}   

function calculaTotalProdutos(){
    var produtos = $("#produto");
    var totalProdutos = 0;

    for (var cont = 0; cont < produtos.length; cont++){
        var $produto = $(produtos[cont]);
        var quantidade = dinheiroTextoParaFloat(
            $produto.find("#quantidade").val());
        var valor = dinheiroTextoParaFloat(
            $produto.find("#valor").text());
        var subtotal = quantidade * valor;
        totalProdutos += subtotal;
    } 

    return totalProdutos;
}

$(document).ready(function() {
    $("#quantidade").change(function() {
        escreveTotal(calculaTotalProdutos());
    });

php javascript jquery

asked by anonymous 02.09.2015 / 21:39

2 answers

0

The problem is that you are repeating the id element within your foreach , except that it does not take the collection of all id=produto or all id=quantidade because the attribute id is only represented by a single element, however you can use the class attribute, this way it will consider all of the list as a collection, in this sense you can implement this way and see if it works:

However, before starting foreach , start the $count=0; .

                <tr id="produto_<?=$count?>" class="lista_produtos">
                    <td><?=$produto['nomeProduto'] ?></td>
                    <td><div id="valor_<?=$count?>"><?=$produto['valorProduto']?></div></td>
                    <td>
                        <input id="quantidade_<?=$count?>" class="qtde" type="number" size="1" maxlength="2" max="10" min="0" step="0">
                    </td>
                </tr>
                <?php
                     $count++;
                     endforeach;
                ?>
            </table>                
    <footer>
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <label> Total: </label>
            <div id="total" class="navbar-right">
              R$ 0,00
            </div>
        </nav>
    </footer>

And no javascript:

function calculaTotalProdutos(){
    var produtos = $(".lista_produtos");
    var totalProdutos = 0;

    for (var cont = 0; cont < produtos.length; cont++){
        var $produto = $(produtos[cont]);
        var quantidade = dinheiroTextoParaFloat(
            $produto.find("#quantidade_"+cont).val());
        var valor = dinheiroTextoParaFloat(
            $produto.find("#valor_"+cont).text());
        var subtotal = quantidade * valor;
        totalProdutos += subtotal;
    } 

    return totalProdutos;
}

But if you prefer, you can do it this way:

link

03.09.2015 / 14:45

Show a single DIV with Ajax How to make website accessible with and without "www"

score 2 · Accepted Answer

You are using the same ID id="quantidade" in multiple elements, IDs must be unique (not repeated). Change the element by removing the ID and placing a class, change id="quantidade" to class="quantidade" and also in javascript change $("#quantidade") to $(".quantidade") .

Example:

function total(valor){
$('span').text(valor);
}

$('.quantidade').change(function(){
    var valor = 0;
    $('.quantidade').each(function(index, element){
        if (element.value == undefined || element.value == '' || isNaN(element.value))
            element.value = 0;
        valor += parseInt(element.value);
    });
	total(valor);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>Quantidades:</p><p><inputclass="quantidade" type="number" size="1" maxlength="2" max="10" min="0" step="0">
    
<input class="quantidade" type="number" size="1" maxlength="2" max="10" min="0" step="0">
    
<input class="quantidade" type="number" size="1" maxlength="2" max="10" min="0" step="0">
</p>

<p>Total: <span></span></p>