JQuery

Em 24/03/2015 às 11:03h por Leonardo

Somando campos dinamicamente com JQuery

No artigo de hoje, vamos aprender como somar vários campos input do formulário dinamicamente e mostrar seu resultado final a cada mudança de campo com JQuery e cadastrar os dados inseridos no Banco de Dados MySql.

Somando campos dinamicamente com JQuery

Primeiramente vamos criar nosso BD para exemplo, lembrando que você pode adaptar o exemplo da melhor maneira que te atenda.

 CREATE DATABASE IF NOT EXISTS `test`; USE `test`; CREATE TABLE IF NOT EXISTS `prod` ( `id` int(11) NOT NULL AUTO_INCREMENT, `a` int(11) NOT NULL, `b` int(11) NOT NULL, `c` int(11) NOT NULL, `d` int(11) NOT NULL, PRIMARY KEY (`id`) );

Criado nosso BD, vamos criar nosso arquivo índex.php, na qual ele conterá nosso formulário.

 <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8" /> <title>Exemplo</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-2.1.3.js"></script> </head> <body> <form name="formulario" id="formulario" method="post"> <fieldset> <legend>Dados</legend> <label for="prodA">Produto A</label>&nbsp; <input type="text" class="meuform soma" name="prodA" id="prodA" value="" required="required"></input> <br/> <label for="prodB">Produto B</label>&nbsp; <input type="text" class="meuform soma" name="prodB" id="prodB" value="" required="required"></input> <br/> <label for="prodC">Produto C</label>&nbsp; <input type="text" class="meuform soma" name="prodC" id="prodC" value="" required="required"></input> <br/> <label for="prodD">Produto D</label>&nbsp; <input type="text" class="meuform soma" name="prodD" id="prodD" value="" required="required"></input> <br/><br/> <input type="hidden" value="inserir" name="acao"></input> <input class='btn' type='submit' value='Salvar' name='save' id='save'/> <label for="sub">Sub Total</label>&nbsp; <input type="text" class="meuform" name="sub" id="sub" readOnly="true"value=""></input> <br/> <div id="messageV"></div> <div id="messageF"></div> <div id="loading"></div> </fieldset> </form> </body> </html>

Muito bem, feito nosso índex, vamos criar os códigos JavaScript para darmos o dinamismo ao código.

Para fazermos a soma dinamicamente, vamos utilizar uma função JQuery chamada blur. Essa função faz uma requisição toda vez que você mudar o foco de um determinado campo que você escolher. Em nosso caso, vamos criar uma classe (soma) em todos os campos que desejarmos que sejam somados.

Quando nossa função for acionada, ou seja, nosso campo com a class=”soma” perder o foco, vamos utilizar o seletor “each” para percorremos todos os input com a classe (soma) e capturando os valores e fazendo a soma e jogando o resultado final em um input na tela.

 $(".soma").blur(function(){ //declaro uma var para somar o total var total = 0; //faço um foreach percorrendo todos os inputs com a class soma e faço a soma na var criada acima $(".soma").each(function(){ total = total + Number($(this).val()); }); //mostro o total no input Sub Total $("#sub").val(total); });

Após criar nossa função onde fazemos a soma dinamicamente, vamos criar a nossa função cadastrar em AJAX, com o evento submit para cadastrarmos os dados dinamicamente também desta maneira:

 $("#formulario").submit(function(){ //pegamos totos os valores do form var valores = $("#formulario").serializeArray(); var ok = false; var id = null; $.ajax ({ async: false, type: "POST", //metodo POST dataType: 'json', url: "ajax/insert.php", beforeSend: function(){ loading_show(); }, data: valores, success: function(data) { ok = data.msg; }, error: function(data){ alert('ERROR: Houve algum erro no sistema, pois nao foi possivel completar a acao'); ok = false; }, complete: function(){ loading_hide(); return ok; } }); if(ok == true){ $("#messageV").html("Realizado com sucesso!").fadeIn('fast'); }else{ $("#messageF").html("Falha no processo!").fadeIn('fast') } return false; }); }); //função para mostrar o loading function loading_show(){ $('#loading').html("<img src='images/loader.gif'/>").fadeIn('fast'); } //função para esconder o loading function loading_hide(){ $('#loading').fadeOut('fast'); }

Muito bem, essa função vai realizar a tarefa de pegar todos os dados do formulário e enviar para nossa página controller, que em nosso exemplo chama-se insert.php, na qual vamos receber os dados vindos do formulário.

 <?php //dados vindo do ajax da pag index $prodA = isset($_POST['prodA']) ? $_POST['prodA']:""; $prodB = isset($_POST['prodB']) ? $_POST['prodB']:""; $prodC = isset($_POST['prodC']) ? $_POST['prodC']:""; $prodD = isset($_POST['prodD']) ? $_POST['prodD']:""; $acao = isset($_POST['acao']) ? $_POST['acao']:""; if($acao == "inserir"){ //chamo meu arquivo de funcoes onde contem meu metodo gravar require_once('../class/Functions.class.php'); try { //instancio minha classe $Functions = new Functions(); //metedos gets and sets (metodos magicos) $Functions->a = $prodA; $Functions->b = $prodB; $Functions->c = $prodC; $Functions->d = $prodD; //chamo o metodo e recebo um return como resultaod, false ou true $result = $Functions->inserir(); if($result != false){ $res['msg'] = true; echo json_encode($res); }else{ $res['msg'] = false; echo json_encode($res); } }catch (PDOException $e){ echo json_encode($e->getMessage()); } } ?>

Após setarmos todas as variáveis, enviamos todos os dados para nossa função inserir para realizar o cadastramento desta maneira:

 public function inserir(){ if(parent::getPDO() == null){parent::conectar();} //preparacao da query a ser executada $stmt = $this->pdo->prepare("INSERT INTO prod(a,b,c,d) VALUES(:pa,:pb,:pc,:pd)"); $stmt->bindValue(':pa', $this->a, PDO::PARAM_INT); $stmt->bindValue(':pb', $this->b, PDO::PARAM_INT); $stmt->bindValue(':pc', $this->c, PDO::PARAM_INT); $stmt->bindValue(':pd', $this->d, PDO::PARAM_INT); try{ if($stmt->execute()){ parent::desconectar(); return true; }else{ parent::desconectar(); return false; } }catch (PDOException $e){ return $e; die('Sistema indisponível, verifique com o Administrador do Sistema!!!'); } }

Se todos os passos estiverem corretos, todas as chamadas, nossa função Ajax vai retorna true, realizando assim o cadastro, e retornando dinamicamente na tela SUCESSO. Se ainda sim você seguiu todos os passos e recebe um erro retornado do JSON de caracteres inválidos, ou “parseError”, leia esta matéria que irá te ajudar a entender alguns problemas que podem acontecer com codificação UTF-8 com BOM.

A metodologia adotada neste exemplo pode não ser a mais “bonita” de se fazer, porém foi uma maneira que encontrei de conseguir resolver quando fui solicitado para fazer um exemplo para questões didáticas e foi esse que saiu na hora.

Para fazer o download do arquivo completo clique AQUI...

Dúvidas, criticas ou sugestões comentem abaixo que teremos o prazer em tentar lhe ajudar.=)

Olá, deixe seu comentário para Somando campos dinamicamente com JQuery

Já temos 3 comentário(s). DEIXE O SEU :)

Marcelo A

Parabéns pelo artigo, você tem algum tutorial para fazer em PHP com mysql, com passo a passo, assim um sistema de conferência de 15 a 18 dezenas para Lotofácil, onde o sistema possa ler um arquivo txt e depois carregar os dados no sistema e conferir pelo resultado, se teve pontos de 0 a 15 pontos.

★★★★★DIA 01.11.18 01h151 GOSTEI :)RESPONDER

Marcos Martins

Donaldo Veneziano

Olá Leonardo. Muito bom essa sua dica.
Estou precisando de algo parecido apenas que são valores monetários.
Nos inputs estou usando uma máscara para formatar "xxx.xxx,xx" e preciso que no campo total o valor da soma também venha formatado.
Você poderia me ajudar.
Grato.

★★★★★DIA 30.04.17 11h160 GOSTEI :)RESPONDER

N/A