0

Eu tenho 5 campos de um formulário e gostaria de, através de uma função, rearranjar os valores dos mesmos fazendo com que os primeiros campos sejam preenchidos e os últimos vazios, de acordo com os valores existentes na ordem crescente.

Por exemplo:

HTML:

<input id="campo1" type="text" /><br>
<input id="campo2" type="text" value="uva" /><br>
<input id="campo3" type="text" /><br>
<input id="campo4" type="text" value="laranja" /><br>
<input id="campo5" type="text" /><br>

Ao chamar a função, ficaria assim:

<input id="campo1" type="text" value="uva" /><br>
<input id="campo2" type="text" value="laranja" /><br>
<input id="campo3" type="text" /><br>
<input id="campo4" type="text" /><br>
<input id="campo5" type="text" /><br>

Atualizando: A ordem dos valores devem obedecer o id dos campos na ordem crescente (campo1, campo2...).

1 Resposta 1

2

Podes fazer isso assim:

var inputs = Array.from(document.querySelectorAll('#campox input'));
var valores = inputs.filter(el => el.value.trim());
inputs.forEach((el, i) => el.value = valores[i] && valores[i].value || '');

jsFiddle: https://jsfiddle.net/x3ormw3y/2/

Basicamente os passos são:

  • coloca os inputs todos numa array
  • filtra os elementos vazios
  • percorre os inputs de novo usando os valores da nova array só com os inputs preenchidos

Em JavaScript ES5 poderia ser

var inputs = [].slice.call(document.querySelectorAll('#campox input'));
var valores = inputs.filter(function(el){
    return el.value.trim();
});
inputs.forEach(function(el, i){
    el.value = valores[i] && valores[i].value || '';
});
8
  • Sergio, seu código tem 2 problemas: se eu mudar a "laranja" para o campo1, o resultado seria "uva, laranja"; o correto seria "laranja, uva"... Outra coisa é que existem outros campos no formulário, e seu código seleciona todos eles, e não apenas os campos "campo1" a "campo5".
    – Sam
    14/09/2016 às 14:22
  • @DavidFernandes ah, então não queres ordenar os campos em ordem alfabética mas sim ordenar para não ter campos vazios no meio, é isso? Em relação aos inputs, qual é o elemento pai desses inputs? tem alguma classe específica?
    – Sergio
    14/09/2016 às 14:25
  • Ah sim, tem uma id pai só para esses campos: campox
    – Sam
    14/09/2016 às 14:31
  • @DavidFernandes seria assim então: jsfiddle.net/x3ormw3y/2
    – Sergio
    14/09/2016 às 14:35
  • Funcionou perfeitamente!
    – Sam
    14/09/2016 às 15:26

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 .