MICHELEPISANI.IT
 

Come effettuare il submit di un form e gestirne gli elementi

Effettuare il submit di un form

Javascript - Come effettuare il submit di un form
Giugno 28
07:182014

Generalmente un form viene inviato alla pressione, da parte dell'utente, di un pulsante di invio di tipo submit. Tuttavia, a volte, può essere necessario inviare il form in modo programmatico utilizzando Javascript che fornisce l'oggetto form il quale contiene il metodo submit(). In questo modo è possibile effettuare l'invio del form al verificarsi di un determinato evento.
Nell'esempio di questo articolo verrà mostrato l'esempio di uso più comune, ossia associare il submit all'evento onclick di un pulsante di tipo button (ma la stessa operazione potrebbe essere abbinata ad un link). Per completezza verrà mostrato come poter accedere con semplicità agli elementi del form, nel caso specifico il campo destinato all'inserimento del proprio nome.

Un ipotetico form potrebbe essere il seguente:

<form method="post" action="" name="myform">
  <label for="your_name">nome:</label>
  <input type="text" id="your_name" name="your_name" value="" />
  <input type="button" value="INVIA" onclick="formSubmit();" />
</form>


In breve la pagina mostrerà un'etichetta con scritto "nome:", un campo per l'inserimento del testo ed un bottone che di per se essendo di tipo button non avrebbe alcuna funzionalità ma con l'attributo onclick al quale assegno la funzione "formSubmit();" (creata allo scopo) gli permetto di effettuare le operazioni indicate all'interno della funzione stessa, che nello specifico è la seguente:

  function formSubmit() {
    if (document.myform.your_name.value == "") {
      alert("Submit non effettuato. Inserisci almeno un carattere");
      return false;
    }
    // Se è stato inserito un nome verrà effettuato il submit
    document.myform.submit();
    return true;
  }

 

Soluzione: Come si può notare dalla funzione formSubmit(); è possibile accedere al form e di conseguenza ai suoi elementi grazie all'attributo "name".
Infatti per poter effettuare il submit alla pressione del bottone abbiamo richiamato il form tramite il suo attributo "name", con l'istruzione seguente:

document.myform.submit();


Dove myform è appunto il valore dell'attributo name del form.
N.B.: Il form richiama la pagina stessa in cui è presente in quanto l'attributo action è vuoto ma potrebbe puntare a qualsiasi pagina purchè dichiarata al suo interno.

Stesso principio vale per accedere al valore della casella di testo al fine di verificarne il suo contenuto e mostrare l'alert in caso sia vuota al momento del submit:

document.myform.your_name.value


In questo caso per accedere all'elemento l'istruzione richiama prima il nome del form che lo contiene (myform) e successivamente il nome dell'elemento di interesse (your_name).

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Francesco

Ciao Michele, ti ringrazio per l'articolo. Potresti spiegare il significato della parte …

Michele

Ciao domenico,
hai provato con

Michele

Ciao Luca,
hai provato a contattare l'assistenza di Facebook? Attualmente la via migliore …

domenico

ciao, puoi aiutarmi?

ho creato un form che tramite una chiamata mi restituisce una …