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

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.

10 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
  3. Vanessa mercoledì 8 aprile 2020 alle ore 16.06

    Ciao,
    Ho fatto tutto e in seguito del Submit si apre Outlook come predefinito. Come faccio ad ovviare a questo problema e ricevere direttamente la mail del form che mi sono creata sull'indirizzo mail che ho indicato?

    Rispondi a questo commento
    • Michele PisaniAutore giovedì 9 aprile 2020 alle ore 01.31

      Ciao Vanessa,
      se si apre il client di posta predefinito (nel tuo caso Outlook) mi viene da pensare che il bottone nella tua pagina utilizzato per effettuare il submit sia un link con l'attributo mailto. Dovresti rimuovere quell'attributo dal tag HTML.
      Il codice proposto nell'articolo non richiama alcun client di posta.

      Rispondi a questo commento
  4. vanessa martedì 14 aprile 2020 alle ore 11.13

    Ciao Michele,
    scusa se insisto, ma allora non c’è nessun modo di inviare il form via e-mail -> usando puro html e/o js?
    Ci sto provando, però a parte utilizzare malito non ho trovato nessun altra modalità.

    Rispondi a questo commento
    • Michele PisaniAutore martedì 14 aprile 2020 alle ore 23.31

      Ciao Vanessa,
      la funzione presente in questo articolo ha lo scopo di mostrare come effettuare il submit di un form via JavaScript, non fa riferimento all'invio di email. Nel caso lo facesse dovrebbe effettuare il submit inviando i dati ad una pagina che li processi server side e che si interfacci con il server di posta.
      Per rispondere in breve alla tua domanda: non puoi inviare una mail direttamente da JavaScript.

      Rispondi a questo commento
  5. vanessa mercoledì 15 aprile 2020 alle ore 21.45

    Grazie Michele,
    Ho risolto usando action="https://formspree.io/mioemail@dominio.com"

    Rispondi a questo commento
    • Michele PisaniAutore mercoledì 15 aprile 2020 alle ore 21.53

      Grazie a te per il feedback,
      quella di appoggiarsi ad un servizio esterno che fa il lavoro server side di invio delle email è sicuramente una soluzione efficace se non abbiamo un proprio server di posta.
      Buon proseguimento e buon lavoro :)

      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

Alessandro

Grazie mille Michele. Un caro saluto Alessandro

Michele Pisani

Ciao Alessandro, se dal pannello di Google Play l'app risulta effettivamente pubblicata direi che …

Alessandro

Ciao Michele, Ho pubblicato uns cordova app su googje play. Tuttavia cercandola per nome o …

Michele Pisani

Ciao Gioia, in questo caso, essendo un account business, ti proporrei di contattare direttamente …