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).
Salve! Ottimo articolo, chiaro, comprensibile e molto utile. Complimenti.
Grazie a te per il feedback Pierpaolo!
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"
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.
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?
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.
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à.
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.
Grazie Michele,
Ho risolto usando action="https://formspree.io/mioemail@dominio.com"
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 :)
Ciao Michele, perdona il disturbo.
Per il mio sito, mi hanno inoltrato questa form. Ma qualunque indirizzo mail io vada ad inserire, apre sempre il programma di posta. Come posso fare l'invio diretto? Grazie
form name="invio_dati" action="mailto:miamail@miosito.net" method="post"
Ciao Manuel,
come risposto nel commento a 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.
Salve, ho un problema con html e javascript.
Ho creato un html con all'interno dell'head il javascript e nel body l'html per un form. Poi in un altro file .asp ho creato il codice per salvare tutto ciò che ho creato nel precedente file ma non si apre.Perchè?
Ciao Mara,
la descrizione dello scenario purtroppo non è sufficiente a determinare quale possa essere il problema, mi viene da pensare che non sia stato messo il submit al bottone per l'invio dei dati o che la pagina di destinazione non sia stata definita come action del form, ma andrebbe analizzato nel dettaglio. Spero che questi suggerimenti appena forniti possano esserti di aiuto.
ciao michele, sono in difficoltà:
vorrei che scegliendo una città da un form si generasse una url del tipo
www.miosito/citta/index.html
dove citta è la variabile scelta da form.
il passaggio non penso sia difficile, ma io di js ne so meno di un acciuga.
ti ringrazio e spero in un tuo aiuto
Salve, piuttosto complicato... ho questa riga di codice...
devo inviare il valore empId (tramite ajax quel id assume un valore) ad un altra pagina in javascript, è possibile?
la riga di codice non l'ha inviata
il valore presente in id lo devo inviare in un altra pagina come se fosse un valore di un campo input (il valore che desume da name)
ultimo tentativo non prende il codice < td id="empId" >< /td >
Ciao mariella,
dovresti utilizzare il DOD e il metodo getElementById, qui trovi alcune info, riferimenti e esempi di utilizzo: https://www.michelepisani.it/guide/javascript-guida-introduttiva-al-dom-oggetto-document/