Come utilizzare i form con il linguaggio javascript.
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 04 Feb 2012
rss directory aggiungi in preferiti  
Home    Mappa directory    Giochi    XXXDirectory    Script    Forum




Form javascript:

N.B.
Per capire l'esempio prodotto dovete sapere come creare i form in HTML.


Ad ogni webmaster capita di dover interagire con i form. Sicuramente è il metodo più pratico per manipolare e restituire i dati senza dover sfruttare il traffico sul web, tuttavia rende il codice visibile ad ogni altro webmaster.

Ogni oggetto che costituisce un form ha un nome ed un valore.
A volte il valore è già preinserito dal programmatore (checked o valori hidden), spesso è quello inserito dall'utente.
La cosa più importante da comprendere è che per manipolare i dati inseriti in un form dobbiamo conoscere la 'strada' per arrivare ai dati.
Una volta che conosciamo la 'strada' la inseriamo nel programma javascript al posto dei dati reali.


Per capire cosa abbiamo appena detto analizziamo una parte del codice javascript che abbiamo inserito in un form che rilasciava (prima di modificarlo) del codice js per produrre finestre pop-up.

ESEMPIO:
url    
toolbar width (larghezza):   
Tipo di Pop-Up
In entrataIn entrata nascosto
       



Codice script:

<script> //Inizio script
<!--
function crea(){ //Crea la funzione

var a //La variabile 'a' guarda se toolbar è cliccato
if (key.primo.checked) //Ciclo if su 'a'
a=1;
else
a=0;

var g='Risultato: '; //Creo la variabile 'g' e gli associo un messaggio
g+='Hai scelto in entrata Url='+key.undici.value+' Toolbar='+a+' Width='+key.settimo.value+''; // Sommo questo messaggio al precedente, ora g è più lunga..
var h='Risultato: '; //Creo la variabile 'h' e gli associo un messaggio
h+='Hai scelto in entrata nascosto Url='+key.undici.value+' Toolbar='+a+' Width='+key.settimo.value+''; //Sommo questo messaggio al precedente, ora h è più lunga..
if (key.simo[0].checked) //Se 'in entrata' è cliccato il valore di areatext è 'g'
key.sorgente.value = g ;
if (key.simo[1].checked) //Se 'in entrata nascosto' è cliccato il valore di areatext è 'h'
key.sorgente.value = h;
}
-->
</script>



<form name="key" action="#">
<table border="1" bgColor="#085664">
<tr><td align="right">url</td>
<td colspan="3"><input type="text" size="25" value="http://" name="undici">
</td></tr> <tr><td align="right">toolbar</td>
<td><input name="primo" type="checkbox"></td>
<td align="right">width (larghezza):</td>
<td><input type="text" size="3" value="300" name="settimo"></td>
</tr><tr>
<td align="center" colspan="4">Tipo di Pop-Up
</td>
</tr><tr>
<td align="right" colspan="2">In entrata
<input name="simo" type="radio" value="uno" checked>
</td><td align="right">In entrata nascosto
<input name="simo" type="radio" value="due">
</td></tr><tr><td align="center" colspan="4">
<textarea name="sorgente" rows="5" cols="50"></textarea>
</td></tr><tr><td align="center" colspan="4"> <input onclick=crea(); type="button" value="Crea codice">
<input type="reset" value="Reset" name="cancella">
</td></tr></table>
</form>



Spiegazione:

Con questo semplice esempio possiamo già intuire il funzionamento, l'unico problema è che per ogni tag che influenza un form c'è una procedura ed una 'strada' diversa.
Analizziamo ogni tag:


Form:

<form name="key" action="#">
Con questo tag inizializziamo un form e gli associamo un nome. Il nome dato può servire a trovare il percorso dati.
  • Come si accede (strada): document.nomeform
  • Proprietà: action, elements[], encoding, length, method, name, target.
  • Metodi: handleEvent(), reset(), submit().
  • Gestori di eventi: onReset, onSubmit.



Text:

<input type="text" size="25" value="http://" name="undici">
Text è una casella di una sola colonna in altezza dove possiamo inserire del testo, solitamente dall'utente, ma non è detto.
  • Come si accede (strada): document.nomeform.nometext
  • Proprietà: defaultValue, form, name, type, value.
  • Metodi: blur(), focus(), handleEvent(), select().
  • Gestori di eventi: onBlur, onChange, onFocus, onSelect.



Checkbox:

<input name="primo" type="checkbox">
Il checkbox è soltanto una casella cliccabile, pertanto può avere solo due valori.
  • Come si accede (strada): document.nomeform.nomecheckbox
  • Proprietà: checked, defaultChecked, form, name, type, value.
  • Metodi: blur(), click(), focus(), handleEvent().
  • Gestori di eventi: onBlur(), onClick(), onFocus().



Radio:

<input name="simo" type="radio" value="uno" checked>
<input name="simo" type="radio" value="due">
if (key.simo[0].checked)
key.sorgente.value = g ;
if (key.simo[1].checked)
key.sorgente.value = h;
Il pulsante radio è una scelta che dobbiamo fare, comunque vada almeno uno risulterà sempre cliccato.
  • Come si accede (strada): document.nomeform.nomeradio oppure document.nomeform[numero radio partendo da zero]
  • Proprietà: checked, defaultChecked, form, name, type, value.
  • Metodi: blur(), click(), focus(), handleEvent().
  • Gestori di eventi: onBlur, onClick, onFocus.



Textarea:

<textarea name="sorgente" rows="5" cols="50">
</textarea>
Textarea è una casella dove possiamo inserire del testo, sia per farlo leggere sia per dare il risultato dello script. Un esempio sono le leggi che in ogni form di registrazione dobbiamo convalidare.
  • Come si accede (strada): document.nomeform.nometextarea
  • Proprietà: defaultValue, form, name, type, value.
  • Metodi: blur(), focus(), handleEvent(), select().
  • Gestori di eventi: onBlur, onChange, onFocus, onSelect.



Button:

<input onclick=crea(); type="button" value="Crea codice">
  • Come si accede (strada): document.nomeform.nomepulsante
  • Proprietà: form, name, type, value.
  • Metodi: blur(), click(), focus(), handleEvent().
  • Gestori di eventi: onBlur, onClick, onFocus, onMouseDown, onMouseUp.



Reset:

<input type="reset" value="Reset" name="cancella">
  • Come si accede (strada): document.nomeform.nomepulsante
  • Proprietà: form, name, type, value.
  • Metodi: blur(), click(), focus(), handleEvent().
  • Gestori di eventi: onBlur, onClick, onFocus.