Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

cabralia

como descobrir indice de um campo num form?

Recommended Posts

pessoal to com uma dúvida aqui e não achei resposta para ela. fiz pesquisas no forum e na net e nada. bem queria ver se tem como descobrir o indice do campo atual num formulario para poder passar para o proximo campo apenas adicionando +1 nesse indice. minha ideia é validar alguns selects. se eles estiverem preenchido passa para o proximo campo e se não manda uma mensagem e permanece no select.

 

fiz algo assim para validar um select

<script>
function mudar(atual,proximo)
{
if(atual==""){
alert('Escolha um valor');
atual.focus();
}else{
proximo.focus();
}
}
</script>

funfa mas eu queria um jeito de nao precisar colocar o proximo. seria algo assim

...
atual.index+1.focus;
...

sei que posso fazer isso percorrendo o length do form até chegar aonde o nome do campo seja igual o atual e então aumentar 1 no índice dele mas a ideia é não precisar disso e ter algo mais rápido ou seja capturar direto o índice do campo.

pra ver se dá pra entender melhor eu tentei descobrir o indice do campo com um alert assim
...
alert(nomeCampo.tabIndex);
...

isso para simplificar a chamada no select. no lugar de onchange='mudar(this.value,nomeproximocampo)' eu queria colocar só onchange='mudar(this.value)' e o proximo campo seria definido na função com tabIndex + 1. alguma ideia de como fazer isso?

___________________________________________________________________

 

EDITANDO O POST...

 

resolvi por enquanto fazendo o loop mesmo assim

<script>
function mudar(campo)
{
for(var I = 0; I < document.cadastro.length; I++) {
if((document.cadastro[I].name == campo.name)){
var N = I + 1;
}
}


if(campo.value==""){
alert('Insira um valor!');
campo.focus();
}else{
document.cadastro[N].focus();
}
}
</script>

nas selects que quero chamar a função assim

onChange='mudar(this)' onBlur='mudar(this)'

melhorou porque nao preciso ficar passando o nome do proximo campo. funciona do jeito que preciso mas ainda gostaria de saber se tem como passar o indice direito tipo document.cadastro.campo.index+1.focus(); pois assim nao ia precisar fazer o for().

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tem um forma de pegar o próximo irmão (sibling) de um node, com nextSibling. Mas é preciso tomar cuidado pois as vezes vem um node invisível no elemento pai, como no exemplo abaixo, onde o pai (form #meu_form) tem 4 selects, mas 9 nodes, pois cada select tem um [inline]#text[/inline] de cada lado como irmãos, por conta disso foi necessário chamar a propriedade nextSibling duas vezes.

<form id="meu_form">
  <select name="sel1" id="sel1">
    <option value="val1">val 1</option>
    <option value="val2">val 2</option>
    <option value="val3">val 3</option>
    <option value="val4">val 4</option>
  </select>
  <select name="sel2" id="sel2">
    <option value="val1">val 1</option>
    <option value="val2">val 2</option>
    <option value="val3">val 3</option>
    <option value="val4">val 4</option>
  </select>
  <select name="sel3" id="sel3">
    <option value="val1">val 1</option>
    <option value="val2">val 2</option>
    <option value="val3">val 3</option>
    <option value="val4">val 4</option>
  </select>
  <select name="sel4" id="sel4">
    <option value="val1">val 1</option>
    <option value="val2">val 2</option>
    <option value="val3">val 3</option>
    <option value="val4">val 4</option>
  </select>
</form>


<script>
(function(){
    var selects;
       
    selects = document.querySelectorAll("#meu_form select");
        
    for (i = 0, len = selects.length; i < len; i++) {
        selects[i].onchange = function(){
            var next = document.getElementById(this.id).nextSibling.nextSibling;
            if (next) {
                next.focus();   
            }
        }
    }
    
}).call(this);
</script>

Observe que eu usei o for aqui apenas para adicionar os EventListeners para cada elemento, se você for chamar por uma função, isso não será necessário.

 

Dica: você pode ver os filhos de um elemento pai usando pai usando [inline]pai.childNodes[/inline].

 

Ademais, pesquise no Google por "javascript auto tab", talvez ache algo interessante...

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.