Calculate values automatically

Navigation
1

I have a form where the user can register more than one passenger:

Beingabletochoosethetypeofpassenger.See:

Foreachtypeofpassenger,ofcourse,adifferentiatedvalue.Ex.:

  • Adult:$140.00
  • Childupto6years:R$60,00
  • Childfrom6to12yearsold:R$90,00
  • Adolescent12-18years:120,00

HowdoI,ifIselectonemorefieldandaccordingtothetypeofpassenger,beautomaticallycalculatedinTotalAmount?

SeebelowthecodeIhave:

<tableborder="0" width="100%">
  <tr class='linhas'>
    <td>
    <table border="0" width="100%">
      <tr>
        <td  style="padding: 5px">
          <select id="TipoPassageiro" name="TipoDocumento[]" class="form-control">
            <option>Pax</option>
            <option value="Adulto">Adulto</option>
            <option value="Adolescente entre 12 e 18 anos">Adolescente entre 12 e 18 anos</option>
            <option value="Criança entre 6 e 12 anos">Criança entre 6 e 12 anos</option>
            <option value="Criança de colo de até 6 anos">Criança de colo de até 6 anos</option>
          </select>
        </td>
      <td  style="padding: 5px"><input type="text" name="NomePAX[]" class="form-control" placeholder="Nome do pax" value=""></td>
      <td  style="padding: 5px">
        <select id="TipoDocumento" name="TipoDocumento[]" class="form-control">
          <option>Tipo de documento</option>
          <option value="Carteira de Identidade">Carteira de Identidade</option>
          <option value="Carteira Nacional de Habilitação">Carteira Nacional de Habilitação</option>
          <option value="Carteira de Trabalho">Carteira de Trabalho</option>
          <option value="Certidão de Nascimento">Certidão de Nascimento</option>
          <option value="Passaporte">Passaporte</option>
          <option value="Cédula de Identidade Estrangeira">Cédula de Identidade Estrangeira</option>
          <option value="Outros">Outros</option>
        </select>
      </td>
      <td  style="padding: 5px">
         <input type="text" name="Documento[]" class="form-control" placeholder="RG da pessoa autorizada" value="">
      </td>
      <td  style="padding: 5px">
         <input type="text" name="OrgaoEmissor[]" class="form-control" placeholder="Órgão Emissor" value="">
      </td>
    </tr>
  </table>
  </td>
      <td style="padding: 5px" valign="top"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
  <tr>
      <td colspan="3"><button type="button" class="adicionarCampo btn btn-primary" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais passageiros</button></td>
  </tr>
  </table>
  <div class="text-right">
    <strong>Valor do Pacote:</strong> <span style="font-family: Arial"> R$ 150,00</span><br>
    <strong>Valor Total:</strong> <span style="font-family: Arial"> R$ 0,00</span>
  </div>

JQuery 

<script type="text/javascript">
 $(function () {
   function removeCampo() {
         $(".removerCampo").unbind("click");
         $(".removerCampo").bind("click", function () {
            if($("tr.linhas").length > 1){
                 $(this).parent().parent().remove();
            }
         });
   }
   $(".adicionarCampo").click(function () {
      if ($('.linhas').length < 15) {
          var adulto = '<?php echo $visualizar[1]->ValorAdulto; ?>';
          var crianca6Anos = '<?php echo $visualizar[1]->ValorCrianca6Anos; ?>';
          var crianca6a12Anos = '<?php echo $visualizar[1]->ValorCrianca6a12Anos; ?>';
          var adolescentes = '<?php echo $visualizar[1]->ValorAdolescentes; ?>';
          novoCampo = $("tr.linhas:first").clone();
          novoCampo.find('input[type="text"]').val("");
          novoCampo.find('select').val("");
          novoCampo.insertAfter("tr.linhas:last");
          removeCampo();
      }
    });
 });
</script>
    
asked by anonymous 25.11.2018 / 18:49

1 answer

1

First you have to change these id 's to class : id="TipoPassageiro" and id="TipoDocumento" ; because when you clone you will duplicate id 's, which is incorrect.

Another error is that the two selects have the same name: name="TipoDocumento[]" .

To sum the values as the selects are changed, the suggestion is to create a change event that will cycle through the selects by adding the sum and then throwing the result into a span that stores the total value.

Put the total value (without R$ ) within span with id : 

<strong>Valor Total:</strong>
<span style="font-family: Arial">
   R$ <span id="valortotal">0,00</span>
</span>

Another thing is to create a way to identify select options by codes. To do this, place a data-tipo in each option with a number that will be the price identifier: 

<select class="TipoPassageiro" name="TipoDocumento[]" class="form-control">
   <option>Pax</option>
   <option data-tipo="1" value="Adulto">Adulto</option>
   <option data-tipo="2" value="Adolescente entre 12 e 18 anos">Adolescente entre 12 e 18 anos</option>
   <option data-tipo="3" value="Criança entre 6 e 12 anos">Criança entre 6 e 12 anos</option>
   <option data-tipo="4" value="Criança de colo de até 6 anos">Criança de colo de até 6 anos</option>
</select>

So, type 1 = adult, type 2 = teenager etc.

In event change , create an object where each item refers to a value type, and you do not need to quote the prices, since the decimals are separated by . (dot): 

$(document).on("change", ".TipoPassageiro", function(){

   // objeto com os preços separados por "tipo"
    var precos = {
       tipo1: 140.50,
       tipo2: 120.00,
       tipo3: 90.00,
       tipo4: 60.10
    }

    // inicia o valor total com 0
    var valor_total = 0;

    // laço que irá percorrer os selects e somar de acordo com o tipo selecionado
    $(".TipoPassageiro").each(function(){

       // pega o valor do tipo (1, 2, 3 ou 4)
       var tipo = $("option:selected", this).data("tipo");

       // só inclui na soma o select que tiver um tipo selecionado
       if(tipo) valor_total += parseFloat(precos['tipo'+tipo]);
    });

    // formata a soma final com duas casas decimais separadas por vírgula
    $("#valortotal").text(valor_total.toFixed(2).replace(".", ","));

 });

Just replace the above prices with PHP code. When I made the sums, I used parseFloat() if at some point to use values with cents.

Example: 

$(function () {
   
   function removeCampo() {
         $(".removerCampo").unbind("click");
         $(".removerCampo").bind("click", function () {
            if($("tr.linhas").length > 1){
                 $(this).parent().parent().remove();
            }
         });
   }
   $(".adicionarCampo").click(function () {
      if ($('.linhas').length < 15) {
          novoCampo = $("tr.linhas:first").clone();
          novoCampo.find('input[type="text"]').val("");
          novoCampo.find('select').val("");
          novoCampo.insertAfter("tr.linhas:last");
          removeCampo();
      }
    });
    
   $(document).on("change", ".TipoPassageiro", function(){
   
       var precos = {
          tipo1: 140.50,
          tipo2: 120.00,
          tipo3: 90.00,
          tipo4: 60.10
       }
       
       var valor_total = 0;
   
       $(".TipoPassageiro").each(function(){
          var tipo = $("option:selected", this).data("tipo");
          if(tipo) valor_total += parseFloat(precos['tipo'+tipo]);
       });
      
       $("#valortotal").text(valor_total.toFixed(2).replace(".", ","));
   
    });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableborder="0" width="100%">
  <tr class='linhas'>
    <td>
    <table border="0" width="100%">
      <tr>
        <td  style="padding: 5px">
         <select class="TipoPassageiro" name="TipoDocumento[]" class="form-control">
            <option>Pax</option>
            <option data-tipo="1" value="Adulto">Adulto</option>
            <option data-tipo="2" value="Adolescente entre 12 e 18 anos">Adolescente entre 12 e 18 anos</option>
            <option data-tipo="3" value="Criança entre 6 e 12 anos">Criança entre 6 e 12 anos</option>
            <option data-tipo="4" value="Criança de colo de até 6 anos">Criança de colo de até 6 anos</option>
         </select>
        </td>
      <td  style="padding: 5px"><input type="text" name="NomePAX[]" class="form-control" placeholder="Nome do pax" value=""></td>
      <td  style="padding: 5px">
        <select class="TipoDocumento" name="TipoDocumento[]" class="form-control">
          <option>Tipo de documento</option>
          <option value="Carteira de Identidade">Carteira de Identidade</option>
          <option value="Carteira Nacional de Habilitação">Carteira Nacional de Habilitação</option>
          <option value="Carteira de Trabalho">Carteira de Trabalho</option>
          <option value="Certidão de Nascimento">Certidão de Nascimento</option>
          <option value="Passaporte">Passaporte</option>
          <option value="Cédula de Identidade Estrangeira">Cédula de Identidade Estrangeira</option>
          <option value="Outros">Outros</option>
        </select>
      </td>
      <td  style="padding: 5px">
         <input type="text" name="Documento[]" class="form-control" placeholder="RG da pessoa autorizada" value="">
      </td>
      <td  style="padding: 5px">
         <input type="text" name="OrgaoEmissor[]" class="form-control" placeholder="Órgão Emissor" value="">
      </td>
    </tr>
  </table>
  </td>
      <td style="padding: 5px" valign="top"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
  <tr>
      <td colspan="3"><button type="button" class="adicionarCampo btn btn-primary" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais passageiros</button></td>
  </tr>
  </table>
  <div class="text-right">
    <strong>Valor do Pacote:</strong> <span style="font-family: Arial"> R$ 150,00</span><br>
    <strong>Valor Total:</strong> <span style="font-family: Arial"> R$ <span id="valortotal">0,00</span></span>
  </div>
    
25.11.2018 / 20:18
How do I make a button draw something new on a screen with tkinter? The text does not fit inside the button in IOS