Enable and Disable Save Button

Question

Enable and Disable Save Button

Navigation

#1 by (8 votes)
#2 by (6 votes)

7

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

Processes.
Revenue Posting, adds the amount of Revenue to the account table.
  Example:
  Initial Account Balance = 0.00
  Revenue Release = 100.00
  Account Balance = 100.00


Expenditure posting, subtracts the amount from Revenue to the account table.
  Example:
  Initial Account Balance = 100.00
  Expense Release = 50.00
  Balance Account = 50.00


Post Reversal, subtracts or adds according to the type of posting (Revenue or Expense) and value added.
  Example:
  Reversal of Revenue
  Initial Balance = 100.00
  Reversal Reversal = 100,00
  Account Balance = 0.00


Expense Reversal
  Initial Balance = 100.00
  Reversal Reversal = 100,00
  Balance Account = 200.00

The problem is when I click edit the posting, do not change anything in the file, and save it again. Just because I clicked Save, The Calculation of refreshing the balance is done again, when I should not update anything, since I did not change any checkboxes.

So there is some way to disable the button and enable only when there is actually a change in the fields (a way to validate between before and after values)?

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

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

php javascript jquery codeigniter

asked by anonymous 11.10.2016 / 16:55

2 answers

6

Using the @ggui response as a basis, you can save the value of the field with event .focus () and making the change through .change () or any other event you are using, you 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><formaction="#">
  <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 .data- * to store the old value and perform verification whether the value has changed or do 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><formaction="#">
  <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>

In this second form you have the persistence of the original value all the time, different from the first form.

You can also do it in many other ways, such as localStorage, cookies, hiddens, etc ...

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

11.10.2016 / 18:37

Recurring Doubt How to check if an item is contained in an array?

score 8 · Accepted Answer

When editing:

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