from elements event

[shivimangat]

perchè il mio codice non va non capisco che errore sto facendo grazie

function ValidateFormValidation(){
    var frm = document.getElementById("frm");
    var frmElementsLength = frm.elements.length;
    
    for(var i = 0; i < frmElementsLength; i++){
       if(frm.elements[i].type == "text"){
           frm.elements[i].addEventListener("keyup",function(e){
               alert(frm.elements[i].value);
           });
       }else if(frm.elements[i].type == "password"){
           frm.elements[i].value = "password feild";
       }else if(frm.elements[i].type == "button"){
           frm.elements[i].value = frm.elements[i].getAttribute("value");
       }
    }
}

 

[WmbertSea]

Considera questa parte in particolare:

frm.elements[i].addEventListener("keyup",function(e){
   alert(frm.elements[i].value);
});

Devi tener presente che l'evento keyup (come tutti gli eventi) funziona in maniera asincrona.
Questo significa che la funzione, associata a tale evento, non sarà eseguita finché lo stesso evento non viene a verificarsi.
Lo stesso script, dentro tale funzione, non viene "letto" nel momento in cui avviene quel ciclo for, ma viene letto ed eseguito successivamente (quando, appunto, avviene l'evento). Per tale motivo, in questo caso, non puoi fare affidamento alla variabile "i" utilizzata per iterare gli elementi dentro il ciclo for, perché avrà, presumibilmente, il valore finale mantenuto in memoria all'uscita del ciclo, quindi frm.elements (che hai messo nell'alert) risulterà indefinito.

Per risolvere puoi utilizzare, all'interno della funzione associata all'evento, la parola chiave this in questo modo:

frm.elements[i].addEventListener("keyup",function(e){
   alert(this.value);
});

O, in modo analogo, usare la proprietà target dell'argomento "e" passato a tale funzione, in questo modo:

frm.elements[i].addEventListener("keyup",function(e){
   alert(e.target.value);
});

Entrambe fanno riferimento a quell'elemento specifico, da cui viene richiamata tale funzione.

 

[shivimangat]

con il tuo aiuto ho risolto il problema di prima però sto facendo la ricerca con for loop per trovare tutti input di tipo text e poi assegnare una funzione per tutti campi text se la loro lunghezza supera più di 20 caratteri però che succede una volta supero il limite del primo campo scattano anche quelli successivi anche se non inserisco nulla perchè parte il ciclo for loop

function ValidateFormValidation(){
    var frm = document.getElementById("frm");
    var frmElementsLength = frm.elements.length;
    for(var i = 0; i < frmElementsLength; i++){
       if(frm.elements[i].type == "text"){
           frm.elements[i].addEventListener("input",textFeildValidation,false);
       }
}

function textFeildValidation(){
    var frm = document.getElementById("frm");
    for(var num = 0; num < frm.elements.length;num++){
        if(frm.elements[num].type == "text"){
            
            if(this.value.length > 20){
                alert(frm.elements[num].getAttribute("id") + " length max 20 charecters");
            }
        
        }
    }  
}

 

[WmbertSea]

Il tuo ragionamento mi sembra contorto. Forse mi sto perdendo qualcosa.
Come già ti ho indicato, this fa riferimento all'elemento da cui è stata chiamata quella specifica funzione textFeildValidation() (in questo caso attraverso l'evento input).
Quella funzione viene quindi richiamata al verificarsi dell'evento input in modo distinto per ogni singolo elemento a cui l'hai già associata.
Ora ti chiedo: che senso ha ripetere il ciclo for all'interno di tale funzione?

Non puoi semplicemente scrivere la condizione e stop?

function textFeildValidation(){
    if(this.value.length > 20){
        alert(this.id + " length max 20 charecters");
    }
}

Ad ogni modo, se l'intento è quello di limitare il numero di caratteri che è possibile inserire nell'input text, puoi utilizzare l'attributo html maxlength da applicare direttamente sul tag input.

 

[shivimangat]

ok grazie mille ho risolto grazie per il tuo bellissimo esempio