6

Como faço para contar quantas mudanças ocorrem em todos os campos de um formulário com uma determinada classe?

Update: O que quero saber é se houve qualquer mudança em cada campo (one), e não quantas vezes houve mudança em cada campo (mesmo que o usuário mude a opção, conta apenas como uma vez - a primeira...). Resumindo, apenas quantos campos com a classe em questão foram modificados uma vez (pelo menos).

Por exemplo:

$("select, input").one('change', function () {

    var totalSelect = $('select').length;
    var totalInputs = $('input').length;
    var ocultosOuOpcionais = $('.ocultosOuOpcionais').length;
    var ocultosOuOpcionaisMudados = ?????
    var total = (totalInputs + totalSelect + ocultosOuOpcionaisMudados) - ocultosOuOpcionais;
});

Toda vez que houver uma mudança de estado em alguns dos campos com a classe .ocultosOuOpcionais, quero atualizar a variável ocultosOuOpcionaisMudados. Como posso fazer isso?

0

2 Respostas 2

2

Você pode usar data-attributes para "armazenar" o estado do elemento. Por exemplo, ter um elemento (input, select, textarea) com o atributo data-foi-modificado:

<input type='text' data-foi-modificado />

E com JQuery você pode mudar esta propriedade:

$('input').one('change', function(){
  $(this).data('foi-modificado', true);
});

Posteriormente você pode fazer um filtro ou usar o próprio seletor para obter somente os elementos que estiverem com foi-modificado = "true". Segue um exemplo testando alguns elementos:

$(function(){

  // Quando houver mudança ou perder o foco, o atributo 'foi-modificado'
  // passará a ter valor 'true'.
  $('.ocultosOuOpcionais').one('change', function(){
  	$(this).data('foi-modificado', true);
  });


  $('button').on('click', function(){
	// Filtrando todos em que 'foi-modificado' é true.
    var modificados = $('.ocultosOuOpcionais').filter(function(){
  	  return $(this).data('foi-modificado');
    });
  
    var mensagem = 'Modificados: ';
    modificados.each(function(indice, elemento){
  	  mensagem += $(elemento).prop('name') + ', ';
    });
    alert(mensagem);
  });
});
span { display: inline-block; width: 100% }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>
  1. <input class='ocultosOuOpcionais' type='text' name='1' data-foi-modificado/>
</span>

<span>
  2. <input class='ocultosOuOpcionais' type='number' name='2' data-foi-modificado/>
</span>

<span>
  3. <input class='ocultosOuOpcionais' type='color' name='3' data-foi-modificado/>
</span>

<span>
  4. <input class='ocultosOuOpcionais' type='tel' name='4' data-foi-modificado/>
</span>

<span>
  5. <select class='ocultosOuOpcionais' name='5' data-foi-modificado>
    <option selected>A</option>
    <option>B</option>
  </select>
</span>

<span>
  6. <input class='ocultosOuOpcionais' type='radio' name='6' data-foi-modificado/>
</span>

<span>
  7. <input class='ocultosOuOpcionais' type='checkbox' name='7' data-foi-modificado/>
</span>

<button>Quem foi Modificado?</button>

3
  • Legal, é bem isso mesmo, mas de uma forma mais elegante! +1
    – gustavox
    Commented 22/12/2015 às 1:52
  • E agora hehe como incluo isso na outra pergunta que você respondeu? :-) Tipo, alguns campos daquela outra pergunta estão com display=none, então quando muda um select por exemplo, abre um campo que não está contabilizado... apesar que não sei, no seu código da outra pergunta isso já está resolvido? Porque por exemplo, pode ter 10 campos, mas apenas 8 visíveis, e se não escolher uma determinada opção, esses dois não abrirão. Neste caso a barra não vai acabar de completar antes? Deu pra entender?
    – gustavox
    Commented 22/12/2015 às 1:57
  • Se o elemento estiver somente escondido com CSS, ele existe no documento e será contado. Não contaria se os inputs fossem criados dinamicamente Commented 22/12/2015 às 22:28
2

Bem, basicamente o que entendi é que você deseja capturar as mudanças de cada elemento da classe ocultosOuOpcionais e depois somá-los:

Capturando a diferença de caracteres

Como vem explicado nessa pergunta a melhor maneira de se calcular a diferença entre duas strings é utilizando o algoritmo da Distância de Levenshtein:

function levenshtein(str1, str2) {
  var m = str1.length,
      n = str2.length,
      d = [],
      i, j;

  if (!m) return n;
  if (!n) return m;

  for (i = 0; i <= m; i++) d[i] = [i];
  for (j = 0; j <= n; j++) d[0][j] = j;

  for (j = 1; j <= n; j++) {
    for (i = 1; i <= m; i++) {
      if (str1[i-1] == str2[j-1]) d[i][j] = d[i-1][j-1];
      else d[i][j] = Math.min(d[i-1][j], d[i][j-1], d[i-1][j-1])+1;
    }
  }
  return d[m][n];
}

Nesse meu exemplo a função recebe o nome de captureChanges().

Para capturar essa diferença do valor inicial e atual de uma input, usa-se o .defaultValue e o .value, respectivamente. Eu adaptei ao seu código da seguinte maneira:

var ocultosOuOpcionais = [].slice.call(document.querySelectorAll(".ocultosOuOpcionais"));
var mudados = [];
var mudancas = [];
var ocultosOuOpcionaisMudados = 0; 

ocultosOuOpcionais.forEach(function (input, indice) {
  input.addEventListener("input", function (event) {
    if (event.target.defaultValue == event.target.value) {
      mudados[event.target.id] = 0;
    } else {
      mudados[event.target.id] = event.target.defaultValue;
    }
    mudancas[indice] = captureChanges(mudados[event.target.id], event.target.value);
  });

O código acima é uma adaptação ao JsFiddle do TobyMosque presente nos comentários da pergunta.

Feito isso, basta somar as diferenças de cada input:

input.addEventListener('keyup', function(){
  mudancas.forEach(function(el, index){
    ocultosOuOpcionaisMudados += parseFloat(el);
  })
  ocultosOuOpcionaisMudados = 0; // É importante que ao final se zere o valor para que não se acumule exacerbadamente
})

Juntando todo o código

function captureChanges(str1, str2) {
  var m = str1.length,
    n = str2.length,
    d = [],
    i, j;

  if (!m) return n;
  if (!n) return m;

  for (i = 0; i <= m; i++) d[i] = [i];
  for (j = 0; j <= n; j++) d[0][j] = j;

  for (j = 1; j <= n; j++) {
    for (i = 1; i <= m; i++) {
      if (str1[i - 1] == str2[j - 1]) d[i][j] = d[i - 1][j - 1];
      else d[i][j] = Math.min(d[i - 1][j], d[i][j - 1], d[i - 1][j - 1]) + 1;
    }
  }
  return d[m][n];
}

var ocultosOuOpcionais = [].slice.call(document.querySelectorAll(".ocultosOuOpcionais"));
var mudados = [];
var mudancas = [];
var n = 0;
var ocultosOuOpcionaisMudados = 0;

ocultosOuOpcionais.forEach(function(input, indice) {
  input.addEventListener("input", function(event) {
    if (event.target.defaultValue == event.target.value) {
      mudados[event.target.id] = 0;
    } else {
      mudados[event.target.id] = event.target.defaultValue;
    }
    mudancas[indice] = captureChanges(mudados[event.target.id], event.target.value);
  });
  input.addEventListener('keyup', function() {
    mudancas.forEach(function(el, index) {
      n += parseFloat(el);
    })
    ocultosOuOpcionaisMudados = n;
    n = 0;

    document.getElementsByTagName("h4")[0].innerHTML = "Mudanças no total:";
    document.getElementsByTagName("p")[0].innerHTML = ocultosOuOpcionaisMudados;
  })
});
<input type="text" class="ocultosOuOpcionais">
<br>
<input type="text" class="ocultosOuOpcionais">
<br>
<input type="text" class="ocultosOuOpcionais">
<br>
<input type="text" class="ocultosOuOpcionais">
<br>
<h4></h4>
<p></p>

1
  • 1
    Outra excelente resposta! O SOpt é demais ou não é!? :-)
    – gustavox
    Commented 22/12/2015 às 2:37

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 .