List and add selected items

Question

List and add selected items

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I need to list the value in (R $) of the inputs and select the html, as if it were a shopping cart, however I need this list and total value to be presented in real time to the user to be sent the list by and -mail ... Could anyone help me?

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>

javascript html5 css3 ajax bootstrap-3

asked by anonymous 26.04.2018 / 15:50

2 answers

3

There are n ways to do what you want, here's an example of one, I do not know if it's the best shape for you, but I think it'll give you a basis on how to do exactly what you need.

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>iPhoneXR$6000<buttondata-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>

26.04.2018 / 16:40

Redeem id passed by URL without using GET NetworkOnMainThreadException error while retrieving device's local IP [duplicate]

score 0 · Accepted Answer

Well, first of all, it would be interesting for you to define whether you are using some Javascript framework for this type of question so that we can respond appropriately. As you have not defined I think you are using jQuery for this ... I made the template in pure javascript so you can change it if you want.

In theory, what you need is a function to capture the data of all these elements and, based on this make the final calculation and then use it as you need, either to save or show the user, like this: / p>

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

Note: I recommend refactoring your HTML because the HTML5 framework does not conform to HTML5 metrics. You do not set input within label but it's just advice ...

Note 2: Another detail, I urge you to start studying more robust frameworks such as React , Angular , VueJS is going to do treatments like these because they improve the structure of the code and prevents some "clever" access your form by inspection and change the final values ... I say this because by the logic of your solution I could have a party with all the options for free, just changing the values to 0 ...