Add values from jquery or javascript fields

Question

I have the following form below:

How would I multiply the values according to the quantities and the total value automatically appears in the Total Value field? Below is the HTML code:

<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>

Answer 1

Try something like:

SE6+:

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);

SE5:

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);