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.

4 Commenti

  1. Pierpaolo Usai lunedì 14 ottobre 2019 alle ore 12.26

    Salve! Ottimo articolo, chiaro, comprensibile e molto utile. Complimenti.

    Rispondi a questo commento
  2. maurizio domenica 17 novembre 2019 alle ore 13.06

    ciao. sto sbattendo la testa... mi daresti un consiglio ?
    lanciare un submit nidificato dentro ad un'altra form
    Metto una prima form
    form action="do" name="my1"
    seguono degli hidden
    /form
    a seguire ho il form principale
    form action="do"
    e qui metto i vari input, tra cui...
    input onclick="document.my1.submit();"
    e seguono altri input
    infine il button della form principale
    input type="SUBMIT" value="SALVA"
    /form
    ----- ma il comando my1.submit mi legge i dati dalla form principale e non dalla form "my1"

    Rispondi a questo commento
    • Michele PisaniAutore domenica 17 novembre 2019 alle ore 19.03

      Ciao maurizio,
      il type="SUBMIT" dovrebbe essere type="button" come nell'esempio dell'articolo altrimenti viene effettuato direttamente il submit del form dove si trova il bottone.

      Rispondi a questo 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

Michele Pisani

Ciao Sandro, in tal caso può essere sufficiente riferirsi all'elemento in posizione [0] dell'array …

Sandro

Il problema mio è più complesso. L'ho risolto con VbScript, ma con JavaScript mi sono …

Michele Pisani

Ciao Nicola, all'epoca l'interfaccia dello strumento e le voci dei menu non lo permettevano, non …

Nicola

Dopo l'esportazione in JPG, chiudi, e Gimop ti chiede se vuoi salvare l'IMG. Lavorando con tante …