PDA

View Full Version : [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:

<!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:

<!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>
anonimizzato
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:

form.input.value

E' meglio che fai.


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


Poi il valore lo recuperi sempre con:

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:

<!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
<!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
<!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?
email = document.getElementById('dati');

va sostituito con

email = document.getElementById('email');

Mannaggia, m'è sfuggito :muro:

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?

<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
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 :D ). 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:

<!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>