Loop does not return values on the screen

Asked

Viewed 59 times

0

Hello, I’m developing a purchase and sale cost calculation using JS and PHP.

The JS me returns the values correctly, however does not send to the fields, If anyone can enlighten me I’d be grateful.

Follows the JS:

$(document).ready(function() {
          $('.calc').change(function() {
            calculaCustoCompra();
          })
          insira o código aqui
        }

        function calculaCustoCompra() {
          var i;
          for (i = 1; i < 7; i++) {
            var parametros = {
              tipo: $('#custoProdutoTipoCompra' + i).val(),
              preco: $('#custoProdutoProCompra').val(),
              perc: $('#custoProdutoPercentualCompra' + i).val(),
              valor: $('#custoProdutoValorCompra' + i).val(),
            };

            $.ajax({
              url: urlBase + '/custosProdutos/calculaCustoCompra',
              type: "POST",
              data: parametros,
              beforeSend: function() {
                waitingDialog.show('Calculando', {
                  dialogSize: 'sm'
                });
              },
              success: function(data) {
                data = jQuery.parseJSON(data);
                $('#custoProdutoTotal').val(data.custoTotalCompra);
                $('#custoProdutoValorCompra' + i).val(data.valor);
                $('#custoProdutoPercentualCompra' + i).val(data.perc);

                waitingDialog.hide();

              },
              error: function(error) {
                alert(error);
                waitingDialog.hide();
              }
            });

          }

        }

HTML:

<tbody>
      <tr>
        <td>
          ICMS </td>
        <td>
          <div class="input select">
            <select name="data[custoProduto][TipoCompra1]" class="form-control form-control-sm calc" id="custoProdutoTipoCompra1">
              <option value="1">Somar</option>
              <option value="2" selected="selected">Subtrair</option>
            </select>
          </div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][PercentualCompra1]" value="18,00" style="width:60%;" class="form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoPercentualCompra1"></div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][ValorCompra1]" style="width:60%;" value="0,00" class=" form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoValorCompra1"></div>
        </td>
      </tr>
      <tr>
        <td>
          IPI </td>
        <td>
          <div class="input select">
            <select name="data[custoProduto][TipoCompra2]" class="form-control form-control-sm calc" id="custoProdutoTipoCompra2">
              <option value="1" selected="selected">Somar</option>
              <option value="2">Subtrair</option>
            </select>
          </div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][PercentualCompra2]" value="0,00" style="width:60%;" class="form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoPercentualCompra2"></div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][ValorCompra2]" style="width:60%;" value="0,00" class=" form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoValorCompra2"></div>
        </td>
      </tr>
      <tr>
        <td>
          ISS </td>
        <td>
          <div class="input select">
            <select name="data[custoProduto][TipoCompra3]" class="form-control form-control-sm calc" id="custoProdutoTipoCompra3">
              <option value="1" selected="selected">Somar</option>
              <option value="2">Subtrair</option>
            </select>
          </div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][PercentualCompra3]" value="0,00" style="width:60%;" class="form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoPercentualCompra3"></div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][ValorCompra3]" style="width:60%;" value="0,00" class=" form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoValorCompra3"></div>
        </td>
      </tr>
      <tr>
        <td>
          PIS </td>
        <td>
          <div class="input select">
            <select name="data[custoProduto][TipoCompra4]" class="form-control form-control-sm calc" id="custoProdutoTipoCompra4">
              <option value="1" selected="selected">Somar</option>
              <option value="2">Subtrair</option>
            </select>
          </div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][PercentualCompra4]" value="2,00" style="width:60%;" class="form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoPercentualCompra4"></div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][ValorCompra4]" style="width:60%;" value="0,00" class=" form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoValorCompra4"></div>
        </td>
      </tr>
      <tr>
        <td>
          COFINS </td>
        <td>
          <div class="input select">
            <select name="data[custoProduto][TipoCompra5]" class="form-control form-control-sm calc" id="custoProdutoTipoCompra5">
              <option value="1" selected="selected">Somar</option>
              <option value="2">Subtrair</option>
            </select>
          </div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][PercentualCompra5]" value="0,00" style="width:60%;" class="form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoPercentualCompra5"></div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][ValorCompra5]" style="width:60%;" value="0,00" class=" form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoValorCompra5"></div>
        </td>
      </tr>
      <tr>
        <td>
          FRETE/SEGURO </td>
        <td>
          <div class="input select">
            <select name="data[custoProduto][TipoCompra6]" class="form-control form-control-sm calc" id="custoProdutoTipoCompra6">
              <option value="1" selected="selected">Somar</option>
              <option value="2">Subtrair</option>
            </select>
          </div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][PercentualCompra6]" value="10,00" style="width:60%;" class="form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoPercentualCompra6"></div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][ValorCompra6]" style="width:60%;" value="0,00" class=" form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoValorCompra6"></div>
        </td>
      </tr>
      <tr>
        <td>
          II </td>
        <td>
          <div class="input select">
            <select name="data[custoProduto][TipoCompra7]" class="form-control form-control-sm calc" id="custoProdutoTipoCompra7">
              <option value="1" selected="selected">Somar</option>
              <option value="2">Subtrair</option>
            </select>
          </div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][PercentualCompra7]" value="1,60" style="width:60%;" class="form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoPercentualCompra7"></div>
        </td>
        <td>
          <div class="input text"><input name="data[custoProduto][ValorCompra7]" style="width:60%;" value="0,00" class=" form-control form-control-sm valor calc" onkeypress="return SomenteNumero(event)" type="text" id="custoProdutoValorCompra7"></div>
        </td>
      </tr>
    </tbody>

The elements are returning me the calculation correctly, for example:

{"costTotalCompra":"17,6400","value":"3,36","Perc":"16,00"} {"costTotalCompra":"23,1000","value":"2,10","Perc":"10,00"}

But the fields are not being filled in with the values reported.

php javascript jquery
  • 1

    Put the rendered HTML code, it is better to simulate.

  • Whoa, I got him

  • Your console is showing some error?

  • none, but I kept the Alert('i'); to check, and it appears only the number 7 several times, should show, 1,2,3,4,5,6 not?

2 answers

1

I was able to solve the problem with the following solution:

function calculaCustoCompra(){
for(var i = 1;i < 10;i++){
    (function(){
        var id = i;
        var parametros = {
            tipo: $('#custoProdutoTipoCompra'+id).val(),         
            preco: $('#custoProdutoProCompra').val(),     
            perc: $('#custoProdutoPercentualCompra'+id).val(),        
            valor: $('#custoProdutoValorCompra'+id).val(),   
        };

            $.ajax({
                url: urlBase + '/custosProdutos/calculaCustoCompra',
                type: "POST",
                data: parametros,
                beforeSend: function(){
                    waitingDialog.show('Calculando',{dialogSize: 'sm'});
                },
                success: function (data) {   
                    data = jQuery.parseJSON(data);
                    $('#custoProdutoTotal').val(data.custoTotalCompra);
                    $('#custoProdutoValorCompra'+id).val(data.valor);
                    $('#custoProdutoPercentualCompra'+id).val(data.perc);
                    alert(id);
                    console.log(data);

                    waitingDialog.hide();

                },
                error: function (error) {
                    alert(error); 
                    waitingDialog.hide();      
                }
            });
    }) ();
};

}

adding the Function(){

for(var i = 1;i < 10;i++){ (function(){

0

Oops, let’s try to solve your problem.

Try to change the code:

  $('#custoProdutoTotal').val(data.custoTotalCompra);

For:

  $('#custoProdutoTotal').html(data.custoTotalCompra);

  • No effect, with . val() appears the last "generated" total number, but with html.

  • Make a console.log(data) and show the way out.

  • Object { custoTotalCompra: "21,0000", valor: "0,00", perc: "0,00" } costProducts.js:97:29 Object { custoTotalCompra: "21,4200", valor: "0,42", perc: "2,00" } costProducts.js:97:29 Object { custoTotalCompra: "21,0000", valor: "0,00", perc: "0,00" } costProducts.js:97:29 Object { custoTotalCompra: "18,9000", valor: "2,10", perc: "10,00" } costProducts.js:97:29 Object { custoTotalCompra: "21,0000", valor: "0,00", perc: "0,00" } costProducts.js:97:29 Object { custoTotalCompra: "21,0000", valor: "0,00", perc: "0,00" } costProducts.js:97:29

Browser other questions tagged php javascript jquery

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