0

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>

2
  • O que vc quer é mostrar uma lista de tudo que foi selecionado para o usuário, é isto?
    – LeAndrade
    Commented 26/04/2018 às 14:16
  • Isso mesmo, porém mostrando o valor de cada item, como se fosse um carrinho de compras Commented 26/04/2018 às 14:36

2 Respostas 2

3

Existem n formas de fazer o que você quer, segue um exemplo de uma delas, não sei se é a melhor forma para o seu caso, mas acredito que vai te dar uma base de como realizar exatamente o que precisa.

var objCarrinho = []
var Total = 0

renderCar()

$('li button').on('click', function(){
  var title = $(this).attr('data-name')
  var valor = $(this).attr('data-valor')
  
  objCarrinho = []
  objCarrinho.push({nome: title, valor})
  
  renderCar()
})

function renderCar(){
  objCarrinho.map(function(item){
    let content = `<li>${item.nome} - R$ ${item.valor}</li>`
    
    $('#carrinho').append(content)
    
    Total = parseFloat(Total) + parseFloat(item.valor)
    
    $('#total').text(Total)
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Produtos</h1>
  <ul>
    <li>
      iPhone X R$ 6000
      <button data-name="iphone" data-valor="6000">Adicionar ao Carrinho</button>
    </li>
    
    <li>
      Xbox One - R$ 2000
      <button data-name="Xbox One" data-valor="2000">Adicionar ao Carrinho</button>
    </li>
    
    <li>
      Macbook Pro - R$ 12000
      <button data-name="Macbook Pro" data-valor="12000">Adicionar ao Carrinho</button>
    </li>
  </ul>
  
  <h1>Carrinho</h1>
  
  <ul id="carrinho"></ul>
  <span>Total: R$ <strong id="total">0</total></span>

2
  • Deu uma ajuda e tanto, só preciso adaptar ao que eu preciso agora, obrigado. Commented 26/04/2018 às 14:53
  • @JvsCorrêa Legal, poderia marcar a resposta como resolvido? Commented 26/04/2018 às 14:57
0

Bom em primeiro lugar, seria interessante você definir se está usando algum framework Javascript para esse tipo de pergunta para que possamos lhe responder adequadamente. Como não definiu creio que você esteja usando jQuery para tal... fiz o modelo em javascript puro assim você pode alterá-lo se quiser.

Em teoria, o que você precisa é de uma função para capturar os dados de todos esses elementos e, com base nisso fazer o cálculo final e então usá-lo como precisar, seja para salvar ou mostrar ao usuário, assim:

(function(){

    var ids = ['list-lugar', 'add-festa-k', 'add-festa-s', 'add-buffet',
               'add-decoracao', 'add-foto', 'add-video', 'add-personagens', 
               'add-convites'];

    // retorna um elemento usando seu seletor (aka jQuery)
    function getEl(id) {
        try {
            return document.getElementById(id);
        } catch(ex) {
            return null;
        }
    }

    // captura o valor do elemento (independente do tipo)
    function getValue(id) {
        try {
            var el = getEl(id), value = 0;
            switch(el.nodeName.toLowerCase()) {
                case 'select': 
                    value = parseFloat(el.options[el.selectedIndex].value);
                    break;
                case 'input' : 
                    switch(el.type) {
                        case 'checkbox': 
                            value = !!el.checked ? parseFloat(el.value): 0;
                            break;
                        // caso haja mais de um tipo de input, entra aqui...
                    }
                    break;
                // caso haja mais algum tipo de elemento, entra aqui...
            }
            return value;
        }
        catch(ex) {
            return 0;
        }
    }

    // faz o cálculo real e retorna
    function calc() { 
        try {

            var value = 0;

            for(var id of ids) value += getValue(id);

            return value;

        } catch(ex) {
            return 0;
        }
    }

    // mostra ao usuario
    function show(valor){
        document.getElementById('result')
                .innerHTML = "R$ " + valor.toString().replace('.',',');
    }

    // init main
    for(var id of ids)
        getEl(id).addEventListener('change', function(){ show(calc()) }, false);

    show(calc());

})();
<div>
    <label for=""></label>
    <select class="form-control" id="list-lugar">
        <option value="0" disabled="true" selected="true">-</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>
    <input id="add-festa-k" type="checkbox" value="1499" />
    <label>Festa K</label>
    <input id="add-festa-s" type="checkbox" value="2000" />
    <label>Festa S</label>
</div>
<div>
    <input id="add-buffet" type="checkbox" value="1000" />
    <label>Buffet</label>
    <input id="add-decoracao" type="checkbox" value="499" />
    <label>Decoração</label>
    <input id="add-foto" type="checkbox" value="800" />
    <label>Foto</label>
    <input id="add-video" type="checkbox" value="100" />
    <label>Vídeo</label>
    <input id="add-personagens" type="checkbox" value="300" />
    <label>Personagens</label>
    <input id="add-convites" type="checkbox" value="150" />
    <label>Convites</label>
</div>
<h1 id="result"></h1>

Nota: aconselho refatorar seu código HTML pois a estrutura do mesmo não está de acordo com as métricas do HTML5. Não se coloca input dentro de label mas é só um conselho...

Nota 2: outro detalhe, aconselho que comece a estudar sobre frameworks mais robustos como o React, Angular, VueJS se vai fazer tratamentos como esses pois eles melhoram a estrutura do código e impede que algum "espertinho" acesse seu formulário por inspeção e mude os valores finais... digo isso porque pela lógica da sua solução eu poderia ter uma festa com todos os opcionais de graça, apenas mudando os "values" para 0...

4
  • 1
    Muito obrigado Leandro, vou seguir suas recomendações, comecei a estudar AngularJS, seria isso mesmo que eu precisava irei reforçar esses pontos que você me aconselhou! Commented 26/04/2018 às 23:41
  • Pra você que ta começando agora, da uma olhada no VueJS primeiro... ele é "menos" complicado de se entender no início... demorei 6 meses pra entender o AngularJS. Hoje parece brincadeira de criança rsrs Commented 27/04/2018 às 15:14
  • Para listar o valor de cada checkbox ou combobox selecionado antes da soma total funciona da mesma forma do exemplo? Commented 27/04/2018 às 16:57
  • sim, a função calc esta pegando todos os elementos que estão listados no var ids=[...] ou seja, se você quiser fazer outro cálculo você precisa apenas fazer seu Loop pegando um a um. Só criei o arrayl ids pra facilitar mesmo Commented 27/04/2018 às 20:31

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .