Estou precisando listar o valor em (R$) dos inputs e select do html, como se fosse um carrinho de compras, porém preciso que essa lista e valor total seja apresentado em tempo real ao usuário para ser enviada a lista por e-mail... Alguém poderia me ajudar?
h3 {
font-size: 18px;
border-left: 2px solid #cf529e;
padding-left: 10px;
}
label {
font-size: 13px;
}
textarea {
width: 100%;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.form-check-label {
margin-right: 50px;
}
.opcionais {
padding: 20px 0;
}
.selecionados {
background-color: #fcfcfc;
border: 1px solid #848484;
padding: 20px;
border-radius: 5px;
margin-top: 45px;
}
<div class="container">
<div class="row" id="festa">
<div class="col-md-5 col-md-offset-1">
<form>
<h3>Dados Pessoais</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Nome Completo*">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Válido*">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Telefone">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Como ficou sabendo sobre festas?">
</div>
<hr>
<h3>Monte a sua Festa</h3>
<div class="form-group">
<label>Escolha uma unidade</label>
<select class="form-control">
<option>-</option>
<option value="200">1 Shopping</option>
<option value="200">2 Shopping</option>
<option value="100">3 Shopping</option>
<option value="100">4 Plaza</option>
<option value="100">5 Shopping</option>
<option value="100">6 Plaza</option>
</select>
</div>
<div class="form-group">
<input type="date" class="form-control">
</div>
<div class="form-group">
<input type="checkbox" value="1499" /> <label class="form-check-label">Festa K</label>
<input type="checkbox" value="2000" /> <label class="form-check-label">Festa S</label>
</div>
<hr>
<h3>Itens Opcionais</h3>
<div class="row">
<div class="opcionais">
<div class="col-md-3">
<div class="form-group">
<label> <input type="checkbox" value="1000"> Buffet</label>
<label> <input type="checkbox" value="499"> Decoração</label>
<label> <input type="checkbox" value="800"> Foto</label>
</div>
</div>
<div class="col-md-4">
<label> <input type="checkbox" value="100"> Vídeo</label>
<label> <input type="checkbox" value="300"> Personagens</label>
<label> <input type="checkbox" value="150"> Convites</label>
</div>
</div>
</div>
<h3>Finalizar Orçamento</h3>
<div class="finaliza">
<textarea name="address" placeholder="Deseja acrescentar algo?"></textarea>
</div>
<input type="submit" name="submit" class="submit action-button" value="Finalizar" />
</form>
</div>
<div class="col-md-3 col-md-offset-2">
<div class="selecionados">
Itens Selecionados
<div class="total">Total: <span>R$ 0,00</span></div>
</div>
</div>
</div>
</div>