4

Estou a desenvolver um sistema de lançamento de Receita/Despesa e esta funcionado de acordo com o que eu inicialmente preciso.

Processos.
Lançamento de Receita, adiciona o valor da Receita à tabela conta.
Exemplo:
Saldo conta Inicial = 0,00
Lançamento Receita = 100,00
Saldo Conta = 100,00

Lançamento de Despesa, subtrai o valor da Receita à tabela conta.
Exemplo:
Saldo Conta Inicial = 100,00
Lançamento Despesa = 50,00
Saldo Conta = 50,00

Estorno de Lançamento, subtrai ou soma de acordo com o tipo de lançamento(Receita ou Despesa) e valor adicionado.
Exemplo:
Estorno de Receita
Saldo Inicial = 100,00
Estorno Receita = 100,00
Saldo Conta = 0,00

Estorno de Despesa
Saldo Inicial = 100,00
Estorno Receita = 100,00
Saldo Conta = 200,00

O problema está quando clico em editar o lançamento, não altero nada no cadastro e salvo novamente. Só pelo fato de eu ter clicado em Salvar, O Calculo de atualizar o saldo é feito novamente, quando não deveria atualizar nada, já que não alterei nenhum checkbox.

Portanto, existe alguma forma de inabilitar o botão e habilitar somente quando de fato houver alguma alteração nos campos(Uma forma de validar entre os valores de antes e depois)?

Assim o botão SALVAR ALTERAÇÕES só estará disponível se a pessoa de fato alterar alguma coisa no modal.

inserir a descrição da imagem aqui

Ou, se houver alguma outra opção, seria de grande ajuda.

3
  • Este sistema é baseado no mapos? tenho bastante coisa que desenvolvi com base nele, podemos trocar algumas ideias. Commented 11/10/2016 às 15:39
  • @AndréBaill Sim, também! Vamos nos falando!! Commented 11/10/2016 às 15:51
  • Ok, qual seu contato? ou se quiser, me adicione no skype: srandrebaill :) Commented 11/10/2016 às 15:55

2 Respostas 2

5

Quando for editar:

$('form :input').change(function(){
   alert("Algum item no formulário foi alterado");
   //A partir daqui vocÊ pode habilitar o botão
   //Para desabilitar $('#idDoBotao').attr('disabled', true);
   //Para habilitar $('#idDoBotao').attr('disabled', false);
});
1
  • Show de bola, funcionou.. Ajuda até eu consegui desenvolver alguma coisa, vou utilizar seu código. O ideal seria; sempre que eu voltar para o estado inicial(o mesmo estado de quando eu abri o modal) o botão voltasse para o estado disabled novamente. Ou seja, permanecesse habilitado se realmente os valores fossem alterados, diferentes do que já está cadastrado. Commented 11/10/2016 às 15:28
4

Utilizando a resposta do @ggui como base, você pode salvar o valor do campo com o evento .focus() e ao realizar a alteração pelo .change() ou qualquer outro evento que estiver utilizando, você realiza a verificação se o valor é igual ou não. Seria algo parecido com isso:

$(document).ready(function() {
  var valorOriginal;

  $('form :input').focus(function() {
    valorOriginal = $(this).val();
  }).change(function() {
    var novoValor = $(this).val();

    if (valorOriginal != novoValor) {
      $('#btn-salvar').attr('disabled', false)
    } else {
      $('#btn-salvar').attr('disabled', true)
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <div>
    <p>
      Descrição
    </p>
    <input type="text" value="Receita" />
  </div>
  <div>
    <p>
      Fornecedor
    </p>
    <input type="text" value="Wagner" />
  </div>
  <div>
    <p>
      Valor
    </p>
    <input type="text" value="250.00" />
  </div>
  <br/>
  <input type="button" value="Salvar Alterações" id="btn-salvar" disabled="disabled" />
</form>

Você também poderia utilizar o .data-* para armazenar o valor antigo e realizar a verificação se o valor foi alterado ou não. Seria algo parecido com isso:

$(document).ready(function() {
  $('form :input').change(function() {
    if ($(this).val() != $(this).data('valor')) {
      $('#btn-salvar').attr('disabled', false)
    } else {
      $('#btn-salvar').attr('disabled', true)
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <div>
    <p>
      Descrição
    </p>
    <input type="text" value="Receita" data-valor="Receita" />
  </div>
  <div>
    <p>
      Fornecedor
    </p>
    <input type="text" value="Wagner" data-valor="Wagner" />
  </div>
  <div>
    <p>
      Valor
    </p>
    <input type="text" value="250.00" data-valor="250.00" />
  </div>
  <br/>
  <input type="button" value="Salvar Alterações" id="btn-salvar" disabled="disabled" />
</form>

Dessa segunda forma você tem a persistência do valor original o tempo todo, diferente da primeira forma.

Você também pode fazer de várias outras formas, como localStorage, cookies, hiddens, etc...

Todavia, validações no cliente pode não ser a melhor solução se não possuir a validação no server também. Então, acho melhor garantir a validação no server e depois pensar na validação no cliente.

13
  • Até tentei usar da forma que passou, mas não funcionou da forma que achei que funcionaria. Poderia sim usar o cookies, localStorage. Mas não sei como fazer. Commented 11/10/2016 às 18:51
  • @WagnerFilho Qual das duas formas não funcionou conforme o esperado?
    – Randrade
    Commented 11/10/2016 às 18:52
  • Fiz das duas formas. A primeira carrega o botão com o atributo disabled = true. Se eu alterar algum campo, o botão passar a ser disabled = false(Até aí, tudo certo). Mas se eu voltar o campo alterado para o valor de origem, o botão continua habilitado. A segunda opção não funcionou. Commented 11/10/2016 às 18:59
  • @WagnerFilho Como eu disse na resposta, a primeira forma tem esse "problema". Já a segunda deveria funcionar. Se você clicar no botão "executar" em minha resposta, verá que está funcionando normalmente agora (esqueci de adicionar o jQuery anteriormente)
    – Randrade
    Commented 11/10/2016 às 19:04
  • @WagnerFilho Devo informar que estou utilizando o evento .change(), então ele não verifica a cada tecla pressionada. Caso queira validar por tecla, altere o change para keyup que irá funcionar (nos inputs)
    – Randrade
    Commented 11/10/2016 às 19:06

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 .