Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Somar input text, radio, checkbox, select com total jQuery

07-10-2012 11:20

Esse script permite somar valores de vários inputs diferente: select option, input radio, input checkbox, input text, e ao somar esses valores, exibe o total em um input text e em uma div.

Bem útil para quando for necessário fazer cálculos diretamente na página, exibindo o resultado da soma sem atualizar o documento.

A base para o campo do formulário ser somado é a class soma

<script src="jquery.js"></script>   <script> $(document).ready(function() {   $(".soma").bind("blur change check", function() { total = 0;   $("input[type='checkbox']:checked,input[type='radio']:checked").each(function() { total+=parseFloat($(this).val()); });   $(".soma").each(function() { if( $(this).attr('type')=='text' || $(this).is('select') ) { total+=parseFloat($(this).val()); } });   $("#input_resultado").val(total.toFixed(2)); $("#resultado").html(total.toFixed(2)); });   }); </script>


<form> v1 <input type="text" name="" class="soma" value="0"> <br /> v2 <input type="text" name="" class="soma" value="0"> <br /> <select class="soma"> <option value="0">selecione</option> <option value="10.00">10.00</option> <option value="20.00">20.00</option> <option value="30.00">30.00</option> </select> <br /> 50 <input type="checkbox" name="" class="soma" value="50"> <br /> 10 <input type="radio" name="radio1" class="soma" value="10"> <br /> 20 <input type="radio" name="radio1" class="soma" value="20"> <br /> resultado <input type="text" id="input_resultado" name="" value="0"> </form>   <div id="resultado"></div>

0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 7
Sexo: Masculino

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 11:02

Bom dia Web,

tentei utilizar o script e não deu certo, não me retorna nenhum resultado.

O que pode esta errado?


Obs: No meu caso, preciso apenas efetuar a soma dos valores inseridos em alguns campos text e retornar o valor total no fim da página.


Pode me ajudar?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 13:02

O resultado é enviado para 2 lugares

$("#input_resultado").val(total.toFixed(2)); $("#resultado").html(total.toFixed(2));

Você tem que observar se tem ambos ai.

Posta seu código.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 7
Sexo: Masculino

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 14:58

Na Verdade... eu apenas copiei esse código que você postou. Eu devia ter acrescentado algo?

Fiz um código (Que por sinal, foi com a sua ajuda em outro tópico) onde eu consegui pegar os valores de um campo select e efetuar a soma. Mas o ideal seria que o usuario digitasse no campo txt um valor.

Ex:

Campo 1 -
valor interno = 0.7
valor externo(que seria inserido pelo usuario) = 2
Total = 1,4

Não sei se fui o suficientemente claro...
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 15:15

Você tem a biblioteca jQuery na mesma pasta onde está rodando o script? Porque se tiver esse exemplo já funciona.

Posta o seu exemplo, ou, coloca online.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 7
Sexo: Masculino

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 15:29

Sim, a biblioteca esta na mesma pasta.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 15:47

Esse link é praticamente igual o que indiquei. A única coisa que vai precisar fazer é colocar um input para cada item que tem

<input type="text" name="" class="soma" value="0">

É obrigatório somente ter a class soma, que deixei em negrito em cada input seu. Peque o script do modo que postei, e vai só adicionando os novos inputs.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 7
Sexo: Masculino

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 16:05

Então....Consegui fazer rodar aqui!! Achei o erro eu estava chamando minha biblioteca de maneira errada.

Mas apenas a soma dos numeros inserido não é o que eu preciso. Eu preciso do que o numero inserido multiplique o valor "default" do campo.

Exemplo.. existe este outro modelo de Script que você postou.

Somar-valores-de-select-e-mostrar-resultado_13_520.html


Eu preciso fazer a mesma coisa, porém, utilizando um campo text e não um um select.

Entende?

Muito obrigado pela ajuda!!


att.
Eduardo
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 16:48

Nesse script de soma, a função é ativada pelo onchange, chama a função no onblur, em um input text

onblur="checar()"
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 7
Sexo: Masculino

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 17:09

Ainda não deu certo!

=/
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 17:15

Seria isso?

<script> function checar() { total = document.form.campo_interno.value*document.form.valor_externo.value; document.form.total.value = total; } </script>


<form name="form"> campo interno: <input type="text" name="campo_interno" value="0.7"> <br /> valor externo: <input type="text" name="valor_externo" value="0" onblur="checar()"> <br /> Total <input type="text" name="total" value=""> </form>

0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 7
Sexo: Masculino

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 17:49

Ainda não, embora seja quase isso. =/

O campo interno e o externo são na verdade o mesmo campo. Por "tras" do campo é definido um valor no caso seria 0,7 (Porém, esse 0.7 não pode vir já marcado ao campo) o usuario colocaria um valor por Exemplo... 2 o resultado seria 1,4.

Finalizando...

O usuario preencheria varios campos(cada campo possui um valor interno diferente) e no final, depois de preencher todos os campos um valor final com a somatoria de todos eles seja mostrado.
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 7
Sexo: Masculino

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 18:12

Olá Web,

Consegui criar o Script que eu queria.


Deixo aqui para outros que possam ter dúvida.

<script> function soma(){   v1=document.getElementById("arca").value; v1a=0.7; v1b=v1*v1a;   v2=document.getElementById("cabideiro").value; v2a=0.3; v2b=v2*v2a;   v3=document.getElementById("colchao-casal").value; v3a=0.8; v3b=v3*v3a;         total=document.getElementById("total"); total.value=eval(v1b)+eval(v2b)+eval(v3b);   } </script>


<label>Arca<input type="text" value="" id="arca"  onblur="soma()"/></label> <label>Mesa<input type="text" value="" id="cabideiro"  onblur="soma()"/></label> <label>Colchão Casal<input type="text" value="" id="colchao-casal"  onblur="soma()"/></label> <label>Total aproximado em m³:<input type="text" value="" id="total"  readonly="readonly"/></label>

Muito obrigado pela ajuda e pela atenção!!


Forte abraço!!
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Somar input text, radio, checkbox, select com total jQuery

07-02-2013 19:22

Bom que conseguiu. Vou deixar um exemplo que fiz também.

<script src="jquery.js"></script>   <script> $(document).ready(function() {   $(".soma").bind("blur", function() {   total = 0;   $(".soma").each(function() { total+=$(this).val()*$(this).attr('id'); });   $("#total").val(total); });   }); </script>


<form name="form"> valor externo 1: <input type="text" class="soma" name="" id="0.7" value=""> <br /> valor externo 2: <input type="text" class="soma" name="" id="0.8" value=""> <br /> Total <input type="text" id="total" value=""> </form>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado