Come utilizzare i form con il linguaggio javascript.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 26 Mar 2017
aggiungi in preferiti  
Home    Mappa directory    Script




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.