Enable and Disable Save Button

Question

I am developing a Revenue/Expenditure launch system and it works according to what I initially need.

Lawsuits.
Revenue Launch, add the Revenue value to the account table.
Example:
Opening account balance = 0,00
Revenue Launch = 100,00
Balance Account = 100,00

Expense Launch, subtract the Revenue value from the account table.
Example:
Opening Account Balance = 100,00
Expenditure Launch = 50,00
Balance Account = 50,00

Launch Charge, subtract or sum according to the type of launch (Revenue or Expense) and added value.
Example:
Estorno de Receita
Opening Balance = 100,00
Chargeback Revenue = 100,00
Balance Account = 0,00

Chargeback
Opening Balance = 100,00
Chargeback Revenue = 100,00
Balance Account = 200,00

The problem is when I click edit the release, do not change anything in the register and save again. Just because I have clicked on Save, The Update balance calculation is done again, when I should not update anything, since I have not changed any checkbox.

Therefore, there is some way to disable the button and enable only when there is indeed some change in the fields(A way to validate between the values before and after)?

So the button SAVE CHANGES will only be available if the person actually changes something in the modal.

Or, if there is any other option, it would be of great help.

Answer 1

When you edit:

$('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);
});

Answer 2

Using the reply from @ggui as a basis, you can save the field value with the event .phocus() and by .change() or any other event you are using, you perform the check whether the value is equal or not. It would look something like this:

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

You could also use the .date-* to store the old value and perform the check if the value was changed or not. It would look something like this:

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

This second way you have the persistence of the original value all the time, different from the first way.

You can also do several other ways, such as localStorage, cookies, hiddens, etc...

However, client validations may not be the best solution if you don’t have server validation as well. So I think it’s best to ensure validation on the server and then think about client validation.