Formulário para vendas

[Mayon 1]

Boa noite, quero fazer um formulário tipo de vendas mas estou com dificuldades...

 

Em alguma parte do formulário vai aparecer o valor final, por exemplo: R$ 50,00

Caso a pessoa selecione por exemplo, entrega em casa no formulário o valor aumenta para 57,00

 

Acho que se eu souber como fizer isso, o resto do formulário eu resolvo...

 

Obraços!

[L. Henrique 179]

Você só precisa adicionar uma soma ao string que você contém dentro de uma condição if/else ou case, enfim...

Ex.:

$('#id_do_select').change(function(){
   var valorProduto = X;
   
   $('select :selected').each(function(){
      valorProduto += Number($(this).val());
   });
   
   $("#id_do_div_valorProduto").html(valorProduto);
});

Vamos lá! Essa estrutura é baseada com um select com options. Cada option possui um VALUE que é o que o jQuery vai ser responsável por buscar e somar ao html da div onde se encontra o valor do produto.

 

Veja um exemplo disso funcionando aqui no JSFiddle.

Esse código não é simplesmente pra você copiar e colar, mas pra ler e entender o que está sendo feito. Na variável valorFinal você pode alterar a numeração por um parseInt com a variável chamada num .text.

 

Vou explicar como você pode puxar o valor do seu produto:

$('#id_do_select').change(function(){
   var valorProduto = parseInt($('#id_onde_esta_o_valor').text());
   
   $('select :selected').each(function(){
      valorProduto += Number($(this).val());
   });
   
   $("#id_do_div_valorProduto").html(valorProduto);
});

Dentro da variável valorProduto eu inseri um parseInt. Essa condição é a responsável por selecionar o .text dentro da div e transformá-lo em número, podendo criar condições matemáticas.

ESSA CONDIÇÃO DA ERRO: Porquê a condição parseInt selecionando o valor não volta o valor original do produto e fica somando 7 a cada vez que o entregar em casa é selecionado? Confira o erro aqui no JSFiddle.

 

Ele faz isso pois ao somar, ele não recebe nenhuma condição dentro do text. De fato, o que precisa ser feito é a subtração do valor somado, assim igualando novamente o valor original do produto.
Q: Como eu posso fazer isso?

R: Simples, defina o VALUE de IR BUSCAR para -7 e pronto, terá resolvido o problema. A NÃO SER QUE você queira criar uma condição if/else (que acho desnecessário nesse caso).

 

Veja esse teste com -7 também no JSFiddle.

 

OBS.: O "Number" também pode ser alterado por parseInt, conforme necessidade.

[Mayon 1]

Nossa, perfeito! Entendi bastante...Tem como por ele em um RADIO? Assim: https://jsfiddle.net/84z6d140/

 

Ou é melhor deixa-lo em select mesmo?

 

Muito obrigado.

[L. Henrique 179]

Mayon, perdão a demora.

Passei um tempo fazendo e refazendo o código pra evitar que o usuário pudesse inserir um -7 no valor original do produto e enfim cheguei com o código pra você.

 

Eu tentei deixar o mais explicado possível o jQuery pra que você não se perca e entenda o que está acontecendo. Eu deixei tudo isso escrito em linhas de comentário dentro do próprio fiddle.

Se quiser, segue o código abaixo:

HTML:

<!-- Seleção de Produto -->
<label for="produto">
  Selecione um Produto:  
  <select name="produto" id="produto">
    <option value="0" disabled selected>Selecione um produto</option>
    <option value="80">Folder 1</option>
    <option value="60">Cartão 1</option>
  </select>
</label>

<!-- Seleção de método de Entrega -->
<label for="entrega">
  Selecione o método de entrega:
  <input type="radio" name="entrega" VALUE="0" checked="checked" disabled> Ir buscar
  <input type="radio" name="entrega" VALUE="7" disabled> Entregar em casa
</label>

<div>Total: <span id="valorFinal"></span></div>

JS:

// Resgata o valor do Produto.
$('select').change(function(){
  $('select :selected').each(function(){
    // Pega o valor do produto.
    $('#valorFinal').html($(this).val());
    // Retorna o radio para Ir Buscar, evitando que o usuário consiga
    // dar um -7 no valor do produto.
    $('input[value|="0"]').prop('checked', true);
    // Habilita os Radio quando o option for selecionado.
    $('input[name|="entrega"]').prop('disabled', false);
  });
});

// Executa a função de Soma.
$('input[name|="entrega"]').change(function(){
  valorFinal = parseInt($('#valorFinal').text());
  /* 
     Lembre-se: O valor a ser utilizado deve ser o que está dentro do span
     do valor do produto (utilizando parseInt, você resgata esse valor), 
     caso contrário, todos os produtos receberão o valor 100, 
     independente se custam 200, 30, 70... 
  */
  
  if ( $(this).val() == '7' ) {
    valorFinal += Number($(this).val());
  } else {
    valorFinal -= Number('7');
  }
  
  $('#valorFinal').html(valorFinal);
});

Se quiser ver esse código funcionando, acesse o JSFiddle como sempre.

Abraços!

[Mayon 1]

Estou mexendo aqui, caso eu tenha mais problemas eu irei postar, caso não, marco como resolvido!

Muito obrigado, agora pelo visto ficou show! Obrigado amigo.

[Mayon 1]

Boa tarde L. Hernique, desculpe o incomodo, só a última pergunta...
Como posso estar fazendo o select principal estar substituindo as informações do outro select? Basicamente assim:

Selecione o produto:

Quantidade:

Tipo de entrega:

Caso eu selecione Cartões, apareça no select que eu irei fazer com 500 e 1000.
Caso selecione Folder, apareça no select apenas 3000 e 2000. (apenas um exemplo)
Como posso estar fazendo isso ? De resto já montei tudo, muito obrigado.

Abraços

[L. Henrique 179]

Esse método eu vou explicar, pois no momento estou sem tempo de fazer o código, mas se realmente precisar, me da um toque que eu arranjo um tempo pra preparar.

 

Você pode fazer isso de duas maneiras, vamos a primeira e mais fácil:

• Crie 2 select e posicione-os no mesmo local (mesmo que um fique a direita ou abaixo do outro) e defina a propriedade display: none para ambos;
• Agora no jQuery você pode chamar o id do select como o exemplo ao lado: $(select["id|=cartao"] :selected).change(function(){}); e fazer com que quando selecionado, ele adicione a propriedade display: block; ao seu respectivo select de quantidades.

A segunda forma que você pode criar isso, é alterar os value dentro dos select, e ai já vai ficando mais legal e você não precisa criar dois selects dentro de um mesmo HTML.

• Crie um select de quantidades e defina seus valores para nulo "".
• Crie a propriedade change no select do produto (como fizemos já no JSFiddle) e dentro desse evento change, você precisa definir que o value do select abaixo vai mudar, então você chama o id dele dentro do evento .change do select superior e define para .val("qtd que deseja");

 

Se precisar de um help, me chama por mensagem.