[javascript] form

[thewebsurfer]

ho un form con 2 campi di input (login, password) e 3 pulsanti ("reset", "submit", "registrati")
l'esercizio è questo:

Registrazione: dopo aver inserito i dati ed aver cliccato su Registrati, occorre ripulire le caselle di testo per permettere all’utente di reinserire i dati. Inoltre, se la login usata nella registrazione è già utilizzata da un altro utente bisogna comunicarlo all’utente, richiedendogli di usare una login differente.

come faccio a verificare se la login è gia usata?non serve un database?
avevo pensato ad un array che contiene le login e che ad ogni registrazione viene incrementato di un elemento ed alle successive registrazioni con un for scorrere tutti gli elementi per verificare se già è stato usato

...l'esercizio dovrebbe essere strettamente javascript senza nessun altro linguaggio (eccetto html )

[Slide]

Originariamente inviato da thewebsurfer

ho un form con 2 campi di input (login, password) e 3 pulsanti ("reset", "submit", "registrati")
l'esercizio è questo:

Registrazione: dopo aver inserito i dati ed aver cliccato su Registrati, occorre ripulire le caselle di testo per permettere all’utente di reinserire i dati. Inoltre, se la login usata nella registrazione è già utilizzata da un altro utente bisogna comunicarlo all’utente, richiedendogli di usare una login differente.

come faccio a verificare se la login è gia usata?non serve un database?
avevo pensato ad un array che contiene le login e che ad ogni registrazione viene incrementato di un elemento ed alle successive registrazioni con un for scorrere tutti gli elementi per verificare se già è stato usato

...l'esercizio dovrebbe essere strettamente javascript senza nessun altro linguaggio (eccetto html )

Probabilmente l'esercizio non vuole tenere conto di aspetti di sicurezza, ma tende solo a far approcciare ai primi strumenti di javascript. Quindi, secondo me, mappati i nomi utenti a livello di codice (va bene l'array) e tanti saluti.
Sicurezza: in questo modo chiunque può leggere gli account.

Altrimenti, puoi mettere online un semplice file txt ed accederci con javascript attraverso l'url. Anche questa soluzione è priva di ogni aspetto di sicurezza.

Per interagire col database, devi almeno utilizzare ajax (ad esempio, puoi accoppiare javascript con php in modo estremamente semplice).

Resto in ascolto anche io per altre eventuali soluzioni.

Ciao e buon week-end.

[thewebsurfer]

Originariamente inviato da Slide

Probabilmente l'esercizio non vuole tenere conto di aspetti di sicurezza, ma tende solo a far approcciare ai primi strumenti di javascript. Quindi, secondo me, mappati i nomi utenti a livello di codice (va bene l'array) e tanti saluti.
Sicurezza: in questo modo chiunque può leggere gli account.

Altrimenti, puoi mettere online un semplice file txt ed accederci con javascript attraverso l'url. Anche questa soluzione è priva di ogni aspetto di sicurezza.

Per interagire col database, devi almeno utilizzare ajax (ad esempio, puoi accoppiare javascript con php in modo estremamente semplice).

Resto in ascolto anche io per altre eventuali soluzioni.

Ciao e buon week-end.

ovvio che la sicurezza non ci interessa è un esercizio per l'università in javascript...
quello che vorrei capire, e che mi lascia perplesso:
dovrei aggiungere elementi (con la funzione push, vero?) all'array, quindi questo implica scrittura sul file js!è possibile?

come si fa una cosa del genere?

[Slide]

Originariamente inviato da thewebsurfer

ovvio che la sicurezza non ci interessa è un esercizio per l'università in javascript...
quello che vorrei capire, e che mi lascia perplesso:
dovrei aggiungere elementi (con la funzione push, vero?) all'array, quindi questo implica scrittura sul file js!è possibile?

come si fa una cosa del genere?

La funziona push sembra perfetta, bravo
Perchè devi andare a scrivere sui file js ? Mica è richiesto che al successivo accesso di un utente (con il browser), il sistema si ricordi della registrazione
Questo esercizio credo sia pensato per avvenire in una singola sessione di accesso col browser, e fine.

Se davvero il prof. vuole farti gestire una vera registrazione con solo javascript ed html (senza linguaggi lato server) allora alzati e caccialo dall'aula

[thewebsurfer]

Originariamente inviato da Slide

La funziona push sembra perfetta, bravo
Perchè devi andare a scrivere sui file js ? Mica è richiesto che al successivo accesso di un utente (con il browser), il sistema si ricordi della registrazione
Questo esercizio credo sia pensato per avvenire in una singola sessione di accesso col browser, e fine.

Se davvero il prof. vuole farti gestire una vera registrazione con solo javascript ed html (senza linguaggi lato server) allora alzati e caccialo dall'aula

infatti sarà sicuramente come dici tu..è pensato per essere eseguito in singola sessione...
altrimenti non avrebbe senso usare solo js

userò il push..
sai darmi qualche dritta su come far funzionare il tutto?

[Slide]

Originariamente inviato da thewebsurfer

userò il push..
sai darmi qualche dritta su come far funzionare il tutto?

Ti crei il form in html ricordando di usare l'attributo name (o id) per i campi di testo.
All'evento Onsubmit del form richiami la funzione javascript che ti controlla se il nome utente è già in uso. Oppure usi l'evento onclick del bottone. Come ti pare.

Dal lato javascipt usi l'oggetto "document" per ottenere i valori inseriti nelle caselle di testo. Puoi usari vari metodi; ad esempio,
var username = document.<nome del form>.["<nome del campo>"].value
oppure i metodi document.getElementById e document.getelementsbyname
Insomma, guardati l'oggetto Document per interagire con la pagina.

Il messaggio di errore lo puoi dare tramite un pop-up (funzione alert).
Ma una vera chicca, secondo me, che può piacere al prof. è usare il metodo
document.getElementById("<id del tag>").innerHTML .

Dovrei averti dato tutti gli strumenti. Ora vedi se riesci ad assemblare il tutto

[thewebsurfer]

Originariamente inviato da Slide

Ti crei il form in html ricordando di usare l'attributo name (o id) per i campi di testo.
All'evento Onsubmit del form richiami la funzione javascript che ti controlla se il nome utente è già in uso. Oppure usi l'evento onclick del bottone. Come ti pare.

Dal lato javascipt usi l'oggetto "document" per ottenere i valori inseriti nelle caselle di testo. Puoi usari vari metodi; ad esempio,
var username = document.<nome del form>.["<nome del campo>"].value
oppure i metodi document.getElementById e document.getelementsbyname
Insomma, guardati l'oggetto Document per interagire con la pagina.

Il messaggio di errore lo puoi dare tramite un pop-up (funzione alert).
Ma una vera chicca, secondo me, che può piacere al prof. è usare il metodo
document.getElementById("<id del tag>").innerHTML .

Dovrei averti dato tutti gli strumenti. Ora vedi se riesci ad assemblare il tutto

<html>
<head>
<title>Esegui l'accesso - MusicStore</title>
<link href="stile.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<form method="post" enctype="multipart/form-data" action="login.js" name="nomeform">
<div class="login">
	<div class="titolo">Accesso al sito</div>
<br />

<fieldset>
<legend>Inserisci i dati</legend>
<p>Login <input type="text" maxlength="10" size="14"  name="log" /></p>

<p>Password <input type="text" maxlength="10" size="10" name="pass"/></p>

<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<input type="button" value="Registrati"/>
</fieldset>
</div>

</form>
</body>
</html>

questo è il codice..
chiedo a te prima di uscire di testa a provare e riprovare..
dato che il form è dentro 2 div per individuare i vari campi di testo devo mettere tutta la radice? cioè ad esempio per l'alert "inserisci almeno un nome" quando login è vuoto
faccio:

if (document.getElementById(nomeform.login.fieldset.p.log.value)=="")
alert("devi inserire un nome");

[Slide]

Originariamente inviato da thewebsurfer

questo è il codice..
chiedo a te prima di uscire di testa a provare e riprovare..
dato che il form è dentro 2 div per individuare i vari campi di testo devo mettere tutta la radice? cioè ad esempio per l'alert "inserisci almeno un nome" quando login è vuoto
faccio:

if (document.getElementById(nomeform.login.fieldset.p.log.value)=="")
alert("devi inserire un nome");

Uhm... nell'action del form non devi indicare assolutamente il file javascript che contiene il codice. Cerca su google come includere un file js nella pagina html.

Per quanto riguarda il valore dei campi di testo, utilizza:

username = document.nomeform["log"].value;
password = document.nomeform["pass"].value;

Poi devi decidere in quale momento invocare la funzione creata in javascript: la vuoi legare al form oppure al singolo bottone?

[thewebsurfer]

[quote=Slide;19443657]Uhm... nell'action del form non devi indicare assolutamente il file javascript che contiene il codice. Cerca su google come includere un file js nella pagina html.



ok

Per quanto riguarda il valore dei campi di testo, utilizza:

username = document.nomeform["log"].value;
password = document.nomeform["pass"].value;

la mia domanda era questa: indicare solo document.nomeform... vale anche se il form è incluso in qualche div?

Poi devi decidere in quale momento invocare la funzione creata in javascript: la vuoi legare al form oppure al singolo bottone?

non capisco cosa cambi
direi di associare la funzione di push al pulsante "registra" (funzione che verifica se nell'array c'è un login uguale, ed in caso negativo pusha il nome inserito alla fine dell'array) e poi associare un semplice reindirizzamento di pagina al pulsante submit (nel caso login e password siano inutilizzate da altri)

avevo pensato, per il controllo, di fare un ciclo che verifica i login sugli indici dispari e le password sui pari


non mi raccapezzo più

[Slide]

Originariamente inviato da thewebsurfer

la mia domanda era questa: indicare solo document.nomeform... vale anche se il form è incluso in qualche div?

si si, la sintassi funziona anche se è incluso in qualche div o altro. Basta che l'elemento a cui vuoi accedere abbia il suo bell'attributo "name" (e in altri casi il suo bell'attributo id) dichiarato ed associato ad una stringa.

Originariamente inviato da thewebsurfer

non capisco cosa cambi

Sono scelte implementative diverse. Vedi tu quale vuoi adottare

Originariamente inviato da thewebsurfer

direi di associare la funzione di push al pulsante "registra" (funzione che verifica se nell'array c'è un login uguale, ed in caso negativo pusha il nome inserito alla fine dell'array) e poi associare un semplice reindirizzamento di pagina al pulsante submit (nel caso login e password siano inutilizzate da altri)

Su come gestire la situazione non ti voglio dir nulla. Te lo devi trovare tu l'algoritmo. Prova, pensaci e riprova

Originariamente inviato da thewebsurfer

avevo pensato, per il controllo, di fare un ciclo che verifica i login sugli indici dispari e le password sui pari

Ma tieniti due array e pace. Uno per login ed uno per le password. Tanto all'utente devi dire (alle brutte) "Username già in un uso, scegline un altro".

Nemmeno a dire che risparmi memoria facendo un array solo. Se proprio vuoi giocare con le strutture dati, divertiti con le matrici (array multidimensionali).
Anche qui, sta a te scegliere la struttura dati più appropriata

Originariamente inviato da thewebsurfer

non mi raccapezzo più

Esagerato! Su, vedrai che con calma ti riesce tutto.
Ti lascio di seguito un esempietto banale banale per farti vedere come accedo ai campi di input, e non ha nulla a che fare con il tuo esercizio (o quasi nulla )

Spoiler:

<html> <head> <title>Esegui l'accesso - MusicStore</title> <link href="stile.css" rel="stylesheet" type="text/css"/> <script type="text/JavaScript"> <!-- function Test(){ user = document.nomeform["log"].value; pass = document.nomeform["pass"].value; alert("Hai inserito "+user.toUpperCase()+" e "+pass.toUpperCase()); document.nomeform["log"].value = ""; document.nomeform["pass"].value = ""; } //--> </script> </head> <body> <form method="post" name="nomeform"> <div class="login"> <div class="titolo">Accesso al sito</div> <br /> <fieldset> <legend>Inserisci i dati</legend> <p>Login <input type="text" maxlength="10" size="14" name="log" /></p> <p>Password <input type="text" maxlength="10" size="10" name="pass"/></p> <input type="button" value="Submit" onClick="Test()" /> <input type="reset" value="Reset" /> <input type="button" value="Registrati"/> </fieldset> </div> </form> </body> </html>

[thewebsurfer]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Esegui l'accesso - MusicStore</title>
<link href="stile.css" rel="stylesheet" type="text/css"/>
<script type="text/JavaSript">

function valida(){
user = document.loginform["login"].value;
if (user ==""){
alert("devi inserire un nome");
}
}

</script>
</head>
<body>

<form method="post" name="loginform">
<div class="login">
	<div class="titolo">Accesso al sito</div>
<br />

<fieldset>
<legend>Inserisci i dati</legend>
<p>Login <input type="text" maxlength="10" size="14"  name="login" /></p>

<p>Password <input type="password" maxlength="10" size="10" name="pass"/></p>

<input type="submit" value="Submit" onclick="validamodulo()" />
<input type="reset" value="Reset" />
<input type="button" value="Registrati"/>
</fieldset>
</div>

</form>
</body>
</html>

vorrei tanto capire cos'è che non funge

[Slide]

Ti ho dato una aggiustata al codice. C'era qualche errore di sintassi. Vediamo se scopri quali erano

(Il file in cui ho fatto le prove si chiama index.htm).

<html>
<head>
<title>Esegui l'accesso - MusicStore</title>
<link href="stile.css" rel="stylesheet" type="text/css"/>
<script type="text/JavaScript">
<!--

function valida(){
	user = document.loginform["login"].value;
	if (user.length < 1 ){
		alert("devi inserire un nome");
	}
}

//-->
</script>

</head>
<body>

<div class="login">
	<div class="titolo">Accesso al sito</div>
<br />

<form name="loginform" action="index.htm" method="post">

<fieldset>
<legend>Inserisci i dati</legend>
<p>Login <input type="text" maxlength="10" size="14"  name="login" /></p>

<p>Password <input type="password" maxlength="10" size="10" name="pass"/></p>

<input type="submit" value="Submit" onclick="valida()" />
<input type="reset" value="Reset" />
<input type="button" value="Registrati"/>
</fieldset>
</div>

</form>
</body>
</html>

[thewebsurfer]

gli errori non li trovo non c'è niente da fare ho passato la giornata di ieri e stamattina a cercare differenze tra la tua pagina postata (quella dell'alert"hai scritto user e password") e la mia index
dimmi tu cos'è che mi sfugge...


poi tu hai usato
user.length < 1
il prof ci fa usare il metodo che ho scritto io:
user ==""
sbaglio in qualcosa?

[Slide]

Originariamente inviato da thewebsurfer

gli errori non li trovo non c'è niente da fare ho passato la giornata di ieri e stamattina a cercare differenze tra la tua pagina postata (quella dell'alert"hai scritto user e password") e la mia index
dimmi tu cos'è che mi sfugge...

Come al solito, son piccole cose, ma che non fanno funzionare nulla. Per iniziare, avevi scordato di inserire i simboli <!-- dopo il tag script e //--> prima del tag di chiusura </script>.
Poi, nell'evento onliclick del bottone Submit richiamavi la funzione "validamodulo" che non esiste.

Invece, come "pulizia del codice" ho spostato un pezzo di codice fuori del tag form, visto che non aveva nulla a che fare con la form.

Non ricordo di aver cambiato altro.

Originariamente inviato da thewebsurfer

poi tu hai usato
user.length < 1
il prof ci fa usare il metodo che ho scritto io:
user ==""
sbaglio in qualcosa?

Son la stessa cosa, questione di abitudine. Però sia il sistema del tuo prof che il mio, sono subito aggirabili se l'utente inserisce degli spazi bianchi.
In che modo si può fare affinchè l'utente nn ci freghi con l'inserimento di spazi bianchi?

Su, vai avanti, che stai andando bene.

Ciao.

[thewebsurfer]

Originariamente inviato da Slide

Su, vai avanti, che stai andando bene.

Ciao.

hai pvt