Tenho o seguinte formulário abaixo:
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>