array che permette di accedere a tutti gli elementi <form> nella pagina

sintassi:

document.forms[x].comando accede form nella pagina n. x (conteggio parte da 0)

document.forms["xxxx"].comando accede al form con name="xxxx"
document.xxxx.comando forma abbreviata per accede al form con name="name"



comandi/metodi:

  • reset() resetta i valori dei campi nei moduli (come cliccare sul pulsante "reset" del form)
  • submit() invia il form (come cliccare sul pulsante "submit" o "invia" del modulo)


    • esempio: il form si invia automaticamente quando l'utente sceglie un'opzione dal menu a discesa


    <form name="opz">
    <select name="opzione" onchange="document.opz.submit()">
    <option value="modifica">modifica</option>
    <option value="elimina">elimina</option>
    <option value="...">...</option>
    </select>
    </form>

    campi del modulo


    elements
    oggetto del form, permette di accedere a tutti i campi contenuti form dal loro name

    sintassi:

    document.NOMEFORM.elements[x].attributo accede all'elemento n. x (conteggio parte da 0) del form NOMEFORM
    document.NOMEFORM.elements["xxxx"].attributo accede all'elemento con name="xxxx" del form NOMEFORM
    document.NOMEFORM.xxxx.attributo forma abbreviata

    attributo:


    casella di testo: impostata con tag HTML input
    é possibile agire sui vari attributi del tag.
    per il testo digitato l'attributo é value

    esempio: creo una casella di testo ed un pulsante per visualizzare il valore (value) usando JavaScript
    <form name="form1">

    <input type="text" name="testointero" value="" size="25" maxlength="100" id="nome">
    <input type="button" name="txt" value="scrivi un testo" onClick='mostratext()'>
    </form>

    <script type="text/javascript">
    function mostratext()
    {
    alert(document.form1.elements["testointero"].value);
    }
    </script>


    area di testo: impostata con tag HTML input
    é possibile agire sui vari attributi del tag.



    pulsante: impostata con tag HTML input
    é possibile agire sui vari attributi del tag.



    pulsante di opzione: possono essere pulsante di opzione o casella di controllo
    é possibile agire sui vari attributi del tag.
    particolare importanza ha la proprietà checked, che indica se pulsante/casella é marcato.

    per i pulsanti di opzione é possbile avere più pulsanti con lo stesso name, quindi per individuare il pulsante giusto si userà un array> di pulsanti
    é possbile ottenere il value del polsante marcato prendendo il valore dell'elemento senza specificare l'indice array>.


    esempio: supponiamo di avere 5 opzioni con name="età"
    document.dati.età[1].checked=true; seleziona la seconda opzione
    alert(document.dati.età.value); restituirà il valore del campo della casella marcata (se non si indica l'array di default da il valore della casella marcata)
    alert(document.dati.età[3].value); restituisce il valore del quarto elemento (bisogna indicare l'indice array perché non é marcata)




    liste: in HTML sono le caselle di riepilogo
    é possibile agire sui vari attributi del tag.

    proprietà da analizzare dell'elemento select (es: document.NAMEFORM.NAMESELECT)



    é possbile individuare automaticamente l'oggetto con il comando array .selectedIndex: restituisce l'indice dell'elemento al momento selezionato dall'utente

    esempio: ricavo il testo del: form "dati" - dell'elemento select "città" - dell'options selezionato.
    function mostraCittà() {

    var testo = document.dati.città.options[document.dati.città.selectedIndex].text;}




    aggiungere options
    é sufficiente creare un nuovo oggetto option e assegnarlo ad una posizione dell'array
    il browser si occuperà poi di far scalare le posizioni degli altri elementi dell'array

    esempio:
    var nuovaOpzione = new Option("Bologna", "bo");
    document.dati.città.options[0] = nuovaOpzione;

    esempio: aggiunge una città come ultimo elemento nella lista
    function aggiungiCittà () {

    var testo = prompt("Che città vuoi aggiungere?");
    var sigla = prompt("Inserisci la sigla della città");
    var nuovaCittà = new Option(testo, sigla);
    document.dati.città.options[document.dati.città.options.length] = nuovaCittà}




    togliere options
    é sufficiente assegnare all'elemento dell'array il valore null

    esempio:
    document.dati.città.options[2] = null;