JS: controllare se utente ha fatto click in un qualsiasi Text Box all'interno di FORM

**gabcaly** · 15-08-2003, 17:44

....
vorrei realixzare uno script che mi vada a controllare se l'utente abbia fatto click all'interno di un campo Text Box e magari informarlo prima di lasciare la pagina ....

come si fa ? ... un po quando un qualsiasi editor ci avverte che prima di chiudere il programma dovremmo salvare i dati :master:

**Shores** · 15-08-2003, 18:18

Allora, alcune indicazioni:

Se vuoi che qualcosa venga eseguito prima di lasciare la pagina, senza bisogno che l'utente abbia fatto submit alla form, devi usare l'attributo onUnload del tag BODY, ed inserire lì la chiamata alla tua funzione di verifica.
Altrimenti, se vuoi che il controllo avvenda prima del submit della form, devi usare l'attributo onSubmit del tag form, e fare una "return true" all'interno della tua funzione se è tutto ok, una "return false" in caso contrario.

Per quello che riguarda invece la lettura dei campi checkbox, devi usare quasta sintassi:

document.namedellaform.namedellcampo.value

per raggiungere il valore del checkbox.

Dopodichè è semplice scrivere quello che manca...

**gabcaly** · 16-08-2003, 00:13

Ciao !!!
grazie x le indicazioni anche se le conoscevo già.

Mi spego meglio:
ho una Form con svariati campi e con diversi pulsanti tra cui anche uno associato al submit. Uno dei pulsanti esegue una pagina web esterna per compiere altre operazioni. Qualora questa pagina venisse invocata dalla pressione del pulsante, eventuali dati introdotti immessi nella form andrebbero persi. Io devo ovviare a questo problema "democraticamente", nel senso che non posso disabilitare il pulsante prima avvenga un submit ma di dare solo avviso che gli ultimi dati introdotti andrebbero persi se non vengono salvati (submit) . Ho pensato nel comparare i campi caricati da un database con le eventuali modifiche introdotti. Quindi avrei bisogno di array.

Io non so come fare però mi metterò sotto per vedere cosa riesco a fare, visto che gli elementi base li ho ormai acquisiti.
Se ho problemi riposto !!!

Grazie ancora

**gabcaly** · 16-08-2003, 02:03

Eccomi col problema !!!

ho fatto il mio script e mi funziona x quanto riguarda i controlli dei campi modificati. Il problema consiste nell'impedire il submit qualora ci siano dati modificati nella form.

Io che sono un neofita di Javascript sono contneto di essere arrivato almeno a questo punto.
Una mano ??? e magari qualche miglioramento al codice ?

codice:



<script language="Javascript">
field   =new Array(3)
unsaved =new Array(3)
var number = 0;


//SALVA GLI I CAMPI DELLA FORM NELL' ARRAY
function check() {
  for (var i= 0; i < 3; i++) {
    (field[i]=document.modulo.elements[i].value);
  }
}

//ESEGUE UN CONFRONTO DI DIFFERENZA CON L'ARRAY E I CAMPI EVENTUALMENTE MODIFICATI
function compare() {
 compare=true;
 for (var i= 0; i < 3; i++) {
   unsaved[i]=0
   if (field[i] != document.modulo.elements[i].value) {
     (unsaved[i]=1)
   }
 }
 
 
 for (var i= 0; i < 3; i++) {
   number=number+unsaved[i]    
 }
 
   
 if (number != 0) {
   if (confirm("Il modulo contiene " + number + " campi modificati. Continuare ?"))  
     return true
   else return false;  
   
 }
}

</script>





<body onload="check()">

<form method="POST" name="modulo" action="save.asp">
  campo 1

  <input type="text" name="campo1" size="20"></p>
  

campo 2

  <input type="text" name="campo2" size="20"></p>
  

campo3

  <input type="text" name="campo3" size="20"></p>
  


  <input type="submit" value="Invia" onClick="if (compare()) {modulo.submit(); return false;}" name="B1"> 
  <input type="button" value="controlla" name="B3" onClick="check()" > 
  <input type="reset" value="Reimposta" name="B2">
</form>

**oronze** · 16-08-2003, 08:22

codice:

Non ho controllato approfonditamente ma ti posso segnalare 2 o 3 errori:
<script language="Javascript">
field   =new Array(3)
unsaved =new Array(3)
var number = 0;


//SALVA GLI I CAMPI DELLA FORM NELL' ARRAY
function check() {
  for (var i= 0; i < 3; i++) {
    (field[i]=document.modulo.elements[i].value);//non mettere parentesi
  }
}

//ESEGUE UN CONFRONTO DI DIFFERENZA CON L'ARRAY E I CAMPI EVENTUALMENTE MODIFICATI
function compare() {
 compare=true;
 for (var i= 0; i < 3; i++) {
   unsaved[i]=0
   if (field[i] != document.modulo.elements[i].value) {
     (unsaved[i]=1)//non mettere parentesi
   }
 }
 
 
 for (var i= 0; i < 3; i++) {
   number=number+unsaved[i]//number+=unsaved[i], risparmi codice
 }
 
   
 if (number != 0) {
   if (confirm("Il modulo contiene " + number + " campi modificati. Continuare ?")){
    document.modulo.submit();
}
else {return false};//al ciclo else ci vogliono le {}
 }
}

</script>





<body onload="check()">

<form method="POST" name="modulo" action="save.asp">
  campo 1

  <input type="text" name="campo1" size="20"></p>
  

campo 2

  <input type="text" name="campo2" size="20"></p>
  

campo3

  <input type="text" name="campo3" size="20"></p>
  


  <input type="button" value="Invia" onClick="compare()" name="B1"> 
  <input type="button" value="controlla" name="B3" onClick="check()" > 
  <input type="reset" value="Reimposta" name="B2">
</form>

Non ho controllato se lo script funziona ma ho corretto alcuni errori.....cmq tu cosa vuoi? vuoi che i campi non siano vuoti?

**Shores** · 16-08-2003, 09:44

La funzione compare() va bene, ma non devi metterla su onClick al bottone di submit, ma invece, come ti avevo già scritto, su onSubmit al tag FORM:

<form method="POST" name="modulo" action="save.asp" onSubmit="compare();">

Questo fa si che se si clicca il bottone submit viene richiamata la funzione compare(), e se essa restituisce false la submit non avviene.

**Lollys** · 16-08-2003, 12:59

Non ho guardato tutto il tuo script, però anch'io per esegiure dei controlli sul form e bloccare l'invio faccio in due modi.

Il primo come dice Shores devi richiamare la funzione all'invio del form:

<form name="" action="" method="" onsubmit="return controllo();">

E poi ricordarti nella funzione di controllo di ritornare false qualora il modulo non deve essere inviato.

return false;

oppure a volte faccio il form e non metto il pulsante di submit
<form name="" method="">
<input type="button" value="Invia" onclick="controllo();">
</form>

Cosi non cè nessun pulsante che invia il modulo ma viene inviato dallo script dopo aver eseguito delle funzioni.

Puoi tornare false
return false;
oppure inviare
document.nome_form.submit();

Comunque vada per il primo che funziona bene ed è + pratico!

**oronze** · 16-08-2003, 13:04

Originariamente inviato da Lollys
oppure a volte faccio il form e non metto il pulsante di submit
<form name="" method="">
<input type="button" value="Invia" onclick="controllo();">
</form>

e io che ho detto?:master: :quipy:
Cmq non è vero che il primo è migliore del secondo, non cambia nulla!

**gabcaly** · 16-08-2003, 13:10

Grazie

... in effetti nel fare un esempio mi sono discostato molto dalle mie reali esigenze, quindi per non creare confusioni quello che mi serviva era un controllo su un pulsante ma che non fosse di tipo "submit". Un normale pulsante che esegue un redirect ad una pagina esterna ma che ancor prima lo facesse, andasse a controllare eventuali campi modificati dall'utente (x evitare che vngano aggiunti dati, si esegua il pulsante di rediret e non quello di submit).

Ho apportato qualche modifica allo script xchè ogni volta che veniva invocato dall'evento onClick il valore "number" - il numero di campi modificati si incrementava a dsimisura.
Poi ho creato un campo hidden - (campo di servizio x passaggio valori) se valore = 0 allora esegue Redirect altrimenti no.

Vedi listato :

Nella form ho fatto così:

codice:

<script ...>

...
 if (number != 0) {
   document.modulo.c_n.value=1
   if (confirm("Il modulo contiene " + number + " campi modificati. Continuare ?")){
    //document.modulo.submit();
    document.modulo.c_n.value=0
 }
....
</script>


<body onload="check()">

<Form ....>
 <input type="hidden" name="c_n" value="0"> 

 <input type="button" value="Redirect" onClick="compare(); if (document.modulo.c_n.value==0) {window.location.href='http://www.sito.it/view.asp'; return true}" name="operazioni">


</form>


Ecco per quale motivo non potevo utilizzare l'evento onSubmit come propostomi. Quest'ultima è una tecnica validissima ma non in questo contesto.

**Lollys** · 16-08-2003, 13:13

Originariamente inviato da oronze
e io che ho detto?:master: :quipy:
Cmq non è vero che il primo è migliore del secondo, non cambia nulla!

bah!
Cambia sotto certi aspetti!

Discussione: JS: controllare se utente ha fatto click in un qualsiasi Text Box all'interno di FORM

Strumenti discussione

Ricerca discussione

Visualizza

JS: controllare se utente ha fatto click in un qualsiasi Text Box all'interno di FORM

Permessi di invio