[JS] Problema alertbox

kwb · 26-02-2010, 20:50

Ciao a tutti, è da qualche giorno che ho inziato a studiacchaire un po di JS.
Oggi ho preso a lavorare con i form, per vedere se riuscivo a farli interagire come si deve; sto seguendo la guida ad esempi presente su html.it.
Si chiede di fare una pagina in cui, inseriti età e email, lo script sia in grado di riconoscere se l'età è un valore valido ( quindi un numero ) e se il valore inserito per la mail è effettivamente un'indirizzo mail ( viene fatto un controllo sulla presenza, o meno, della chiocciola nel textbox ).
Ho provato a scrivere lo script e la pagina tutta da me, tuttavia non funziona e non riesco a venirne a capo...
Lo script mi sembra identico ( come funzionamento ) a quello proposto nella guida ( quello della guida l'ho testato e funziona ), però non va.
Ecco cosa ho steso:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Esempio</title>
<script type="application/javascript">
	function controllo() {
		eta = dati.eta.value;
		email = dati.mail.value;
		
		if ( isNaN(eta) )
			{
			alert('Errore et&agrave;');
			return false;
			}
		if ( email.indexOf("@")==-1 )
			{
			alert('Errore mail');
			return false;
			}
	}
</script>
</head>

<body>
<p>Compila coi tuoi dati</p>
<form name="dati" action="http://www.google.it" onSubmit="return controllo();" >
	Et&agrave;: <input name="eta" type="text"><br />
    Email: <input name="email" type="text" ><br />
	<input type="submit" value="Invia" >
</form>
</body>
</html>

Cosa c'è che non va?
Lo script di html è questo:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<script type="text/javascript">
function valida() {

  //prendo i valori dei campi, abbreviandone i nomi
  eta=dati.eta.value;
  email=dati.email.value;

  if (isNaN(eta)){
    alert ("Inserisci un'età valida");
    return false;
  }

  if (email.indexOf("@")==-1) {
    alert ("Inserisci un'email valida");
    return false;
  }
}
</script>
</head>

<body>

<form name="dati" action="http://www.html.it" onSubmit="return valida();">
<!-notare il return anteposto alla chiamata della funzione-->

La tua età: <input type="text" name="eta"><br/>
La tua e-mail: <input type="text" name="email"><br/>

<input type="submit" value="invia">
</form>

</body>
</html>

27-02-2010, 10:59

Domanda che browser usi?

Perchè quello dovrebbe andare bene per Internet Explorer ma su Firefox ad esempio, se non ricordo male, non puoi accedere al DOM in quel modo:

Codice:

form.input.value

E' meglio che fai.

Codice:

var element = document.getElementById("id_elemento");

Poi il valore lo recuperi sempre con:

Codice:

element.value

Ciao.

kwb · 27-02-2010, 12:53

Bene, ora sembra funzionare meglio, però non capisco perchè il codice di html va e il mio no...
Ad ogni modo, con le nuove modifiche apportare, il campo dell'età mi fa il giusto controllo, quello sulla mail no, penso di aver sbagliato qualcosa sull'indexOf che non so come aggiustare, ecco il codice:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Esempio</title>
<script type="text/javascript">
	function controllo() {
		eta = document.getElementById('eta');
		email = document.getElementById('dati');
		
		if ( isNaN(eta.value) )
			{
			alert('Errore età');
			return false;
			}
		if ( email.indexOf('@').value == -1 )
			{
			alert('Errore mail');
			return false;
			}
	}
</script>
</head>

<body>
<p>Compila coi tuoi dati</p>
<form name="dati" action="http://www.google.it" onSubmit="return controllo();" >
	Et&agrave;: <input name="eta" type="text" id="eta"><br />
    Email: <input name="email" type="text" id="email"><br />
	<input type="submit" value="Invia" >
</form>
</body>
</html>

kk3z · 27-02-2010, 13:35

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Esempio</title>
<script type="text/javascript">
	function controllo(form) {
		if ( isNaN(form.eta.value) )
			{
			alert('Errore età');
			return false;
			}
		if ( form.email.value.indexOf('@') == -1 )
			{
			alert('Errore mail');
			return false;
			}
	}
</script>
</head>

<body>
<p>Compila coi tuoi dati</p>
<form action="http://www.google.it" onSubmit="return controllo(this);" >
	Et&agrave;: <input name="eta" type="text"><br />
    Email: <input name="email" type="text"><br />
	<input type="submit" value="Invia" >
</form>
</body>
</html>

Tadde · 27-02-2010, 13:40

email = document.getElementById('dati');

va sostituito con

email = document.getElementById('email');

kwb · 27-02-2010, 15:19

Quote:

Originariamente inviato da kk3z

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Esempio</title>
<script type="text/javascript">
	function controllo(form) {
		if ( isNaN(form.eta.value) )
			{
			alert('Errore età');
			return false;
			}
		if ( form.email.value.indexOf('@') == -1 )
			{
			alert('Errore mail');
			return false;
			}
	}
</script>
</head>

<body>
<p>Compila coi tuoi dati</p>
<form action="http://www.google.it" onSubmit="return controllo(this);" >
	Et&agrave;: <input name="eta" type="text"><br />
    Email: <input name="email" type="text"><br />
	<input type="submit" value="Invia" >
</form>
</body>
</html>

Non metto in dubbio funzioni questo codice. Però quello che mi ha scocciato non poco è il fatto che all'inizio il mio codice fosse pressochè identico a quello dell'esempio e non funzionasse ( e tutt'ora non lo fa ).
So che definire quelle due variabili era ( ed è ) superfluo però per comodità, per abbreviazione e rapidità ho preferito far così...
Quello che mi preme di capire è cosa c'è di errato nel mio codice che impedisce al motore di JS di eseguirlo... E certo non si tratta dell'utilizzo e del mancato riconoscimento di form.elemento.value, perchè se così fosse nemmeno il codice scritto d'esempio potrebbe funzionare. Non siete d'accordo?

Quote:

Originariamente inviato da Tadde

email = document.getElementById('dati');

va sostituito con

email = document.getElementById('email');

Mannaggia, m'è sfuggito

EDIT: Ora con le dovute modifiche lo script va. Una perplessità che mi rimane ( e che non è stata spiegata ):
A cosa serve il return false; dopo l'alert?
E quello dentro il form?

Codice:

<form action="http://www.google.it" onSubmit="return controllo();">

kk3z · 27-02-2010, 15:53

Perchè la variabile "dati" non esiste e non è dichiarata da nessuna parte. Qualche browser (explorer sicuramente, forse anche firefox) se non trova una variabile con quel nome, cerca un elemento nel document che abbia quel valore come "id" o come "name". Ma non puoi affidarti a una funzionalità di questo tipo, può funzionare in un browser e non funzionare in altri (per esempio a te).

Il codice non è identico, perchè io ho scritto
onSubmit="return controllo(this);"
e "this" è un puntatore al form. Così funziona in qualsiasi browser.

kwb · 27-02-2010, 16:15

Quote:

Originariamente inviato da kk3z

Perchè la variabile "dati" non esiste e non è dichiarata da nessuna parte. Qualche browser (explorer sicuramente, forse anche firefox) se non trova una variabile con quel nome, cerca un elemento nel document che abbia quel valore come "id" o come "name". Ma non puoi affidarti a una funzionalità di questo tipo, può funzionare in un browser e non funzionare in altri (per esempio a te).

Il codice non è identico, perchè io ho scritto
onSubmit="return controllo(this);"
e "this" è un puntatore al form. Così funziona in qualsiasi browser.

No no, non ci siamo capiti. Per codice d'esempio intendenvo quello postato da me all'inizio ( quello scritto da html.it

). Non al tuo

Poi per sta storia dei puntatori devo ancora studiarmela bene perchè non l'ho troppo capita bene. Negli esempi si faceva vedere come con una funzione generica ( che salutava un determinato nome ) si potesse cambiarla in base a questi puntatori, ma non ho troppo assimilato la cosa. Questa storia dei puntatori mi sembra abbastanza di nicchia, fino ad ora nel c ( che è l'unico linguaggio di programmazione serio da me studiato ) non ho avuto ancora modo di usarla, e lo stesso html.it asserisce che probabilmente saranno rare le volte in cui si renderà necessario creare un puntatore.

Quando sarà il caso ci tornerò sopra. Cmq sia, anche senza l'utilizzo di questo puntatore ora lo script funziona a dovere, infatti:

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Esempio</title>
<script type="text/javascript">
	function controllo() {
		eta = document.getElementById('eta');
		email = document.getElementById('email');
		
		if ( isNaN(eta.value) )
			{
			alert('Errore età');
			return false;
			}
		if ( email.value.indexOf('@') == -1 )
			{
			alert('Errore mail');
			return false;
			}
	}
</script>
</head>

<body>
<p>Compila coi tuoi dati</p>
<form name="dati" action="http://www.google.it" onSubmit="return controllo();" >
	Et&agrave;: <input name="eta" type="text" id="eta"><br />
    Email: <input name="email" type="text" id="email"><br />
	<input type="submit" value="Invia" >
</form>
</body>
</html>

27-02-2010, 10:59	#2
anonimizzato Messaggi: n/a	Domanda che browser usi? Perchè quello dovrebbe andare bene per Internet Explorer ma su Firefox ad esempio, se non ricordo male, non puoi accedere al DOM in quel modo: Codice: form.input.value E' meglio che fai. Codice: var element = document.getElementById("id_elemento"); Poi il valore lo recuperi sempre con: Codice: element.value Ciao.

27-02-2010, 13:40	#5
Tadde Senior Member Iscritto dal: Oct 2001 Città: Firenze Messaggi: 585	email = document.getElementById('dati'); va sostituito con email = document.getElementById('email'); __________________ http://www.gnu.org/philosophy/no-wor...hments.it.html http://gprime.net/flash/postingandyou.php [1510 kB]

27-02-2010, 15:53	#7
kk3z Senior Member Iscritto dal: Nov 2003 Messaggi: 980	Perchè la variabile "dati" non esiste e non è dichiarata da nessuna parte. Qualche browser (explorer sicuramente, forse anche firefox) se non trova una variabile con quel nome, cerca un elemento nel document che abbia quel valore come "id" o come "name". Ma non puoi affidarti a una funzionalità di questo tipo, può funzionare in un browser e non funzionare in altri (per esempio a te). Il codice non è identico, perchè io ho scritto onSubmit="return controllo(this);" e "this" è un puntatore al form. Così funziona in qualsiasi browser.

Strumenti
Mostra una versione stampabile Invia questa pagina per email