0

Tenho o seguinte formulário abaixo:

inserir a descrição da imagem aqui

Como eu faria para multiplicar os valores conforme as quantidades e o valor total aparecer automaticamente no campo Valor Total? Segue abaixo o código HTML:

<form class="" action="#!" method="post">
  <div class="form-group">
    <label>Quantidade de adultos:</label>
    <input type="number" class="form-control" name="QtdAdultos" value="">
  </div>
  <div class="form-group">
      <label>Valor por adulto:</label>
      <input type="text" name="ValorAdulto" class="form-control" id="valorAdulto" maxlength="12" required>
  </div>
  <div class="form-group">
    <label>Quantidade de crianças até 6 anos:</label>
    <input type="number" class="form-control" name="QtdCriancas6Anos" value="">
  </div>
  <div class="form-group">
      <label>Valor por criança até 6 anos:</label>
      <input type="text" name="ValorCrianca6Anos" class="form-control" id="valorCrianca6a12" maxlength="12">
  </div>
  <div class="form-group">
    <label>Quantidade de crianças entre 6 e 12 anos:</label>
    <input type="number" class="form-control" name="QtdCriancas6a12Anos" value="">
  </div>
  <div class="form-group">
      <label>Valor criança até 6 a 12 anos:</label>
      <input type="text" name="ValorCrianca6a12" class="form-control" id="valorCrianca6a12" maxlength="12">
  </div>
  <div class="form-group">
    <label>Quantidade de adolescentes:</label>
    <input type="number" class="form-control" name="QtdAdolescentes" value="">
  </div>
  <div class="form-group">
      <label>Valor ppor adolescente:</label>
      <input type="text" name="ValorAdolescente" class="form-control" id="valorAdolescente" maxlength="12">
  </div>
  <div class="form-group">
    <label>Valor Total:</label>
    <input type="text" id="valorTotal" class="form-control" name="ValorTotal" value="">
  </div>
  <div class="form-group">
      <label>Observações:</label>
      <textarea name="Observacoes" class="form-control" style="height: 230px"></textarea>
  </div>
  <div class="form-group text-center">
    <button type="submit" name="Submit" value="Avancar" class="btn btn-success">Cadastrar e enviar link por e-mail</button>
  </div>
</form>
2
  • Poderia colocar o código do html? Commented 20/03/2019 às 12:35
  • 1
    Tem razão Felipe. Esqueci de colocar o código. Alterei meu post. Os campos dos valores tem máscara.
    – user24136
    Commented 20/03/2019 às 12:37

1 Resposta 1

1

Tente algo como:

ES6+:

let arrTipos = ['Adulto', 'Criancas6Anos', 'Criancas6a12Anos', 'Adolescentes'];
let total = 0;
for (var tipo of arrTipos) {
    if($('[name=Qtd'+ tipo +']').val() && $('#valor'+ tipo).val()){
        total += (parseInt($('[name=Qtd'+ tipo +']').val())*parseFloat($('#valor'+ tipo).val()));
    }
}
$('#valorTotal').val(total);

ES5:

var arrTipos = ['Adulto', 'Criancas6Anos', 'Criancas6a12Anos', 'Adolescentes'];
var total = 0;
for (var index in arrTipos) {
    var tipo = arrTipos[index];
    if($('[name=Qtd'+ tipo +']').val() && $('#valor'+ tipo).val()){
        total += (parseInt($('[name=Qtd'+ tipo +']').val())*parseFloat($('#valor'+ tipo).val()));
    }
}
$('#valorTotal').val(total);
5
  • 1
    Só para complementar você ira precisar importar o Jquery dentro do seu HTML. Commented 20/03/2019 às 12:53
  • Olá Felipe. Tentei com os 02 exemplos, mas não funcionaram. O campo valorTotal permanece 0. Alterei a máscara dos campos de ` $("#valorAdulto").maskMoney({symbol:'R$ ', thousands:'.', decimal:'.', symbolStay: true});` para ` $("#valorAdulto").maskMoney({thousands:'', decimal:'.', symbolStay: true});` e mesmo assim não funcionou.
    – user24136
    Commented 20/03/2019 às 13:37
  • @Fox.11 qual o valor que fica dentro do campo? R$1.000,00 ou 1000.00? Commented 20/03/2019 às 14:55
  • O padrão é R$ 1.000,00. Troquei para 1000.00 para ver se funcionava. Mas pode ser um ou outro.
    – user24136
    Commented 20/03/2019 às 16:32
  • @Fox.11 ele está pegando o valor e a quantidade? Commented 20/03/2019 às 17:05

Você deve fazer log-in para responder a esta pergunta.