Come inviare un modulo facendo clic su un link in JavaScript?

Un modulo HTML può essere facilmente inviato facendo clic su qualsiasi elemento HTML con l'aiuto di JavaScript. L'elemento modulo ha un file invia() metodo e invocare questo metodo con una chiamata esterna invierà il modulo.

Questo articolo si concentrerà sull'invio di un modulo per premere un collegamento. Per mostrarlo, verrà creato un modulo che assumerà i dettagli di iscrizione dall'utente e, dopo l'invio del modulo, sta per stampare semplicemente il nome dell'utente sulla console.

Passaggio 1: imposta gli elementi HTML

Crea un nuovo documento HTML e in quel documento crea un modulo con un ID particolare e all'interno di quel modulo, crea il campo di input per nome utente e password. Successivamente, invece del pulsante di invio, crea un nuovo collegamento utilizzando il tagga e usa l'attributo OnClick e impostalo uguale a LinkPress () funzione:

Digita il tuo nome utente

Digita la tua password

Link per l'invio

A questo punto, questo documento HTML produce la seguente pagina web:

La nostra pagina web include due campi di input e un collegamento che ha un attributo onclick () impostato su di esso.

Passaggio 2: realizzare il modulo "Invia" su Link Press

Ogni elemento del modulo nell'HTML contiene il metodo invio (). Per inviare un modulo, deve essere referenziato nel JavaScript, quindi il metodo invio () deve essere chiamato usando quel riferimento. Nel file di script, crea la funzione LinkPress () e aggiungere la funzionalità usando le seguenti righe:

funzione linkPress ()
Form = documento.getElementById ("forma");
modulo.invia();

La prima riga ottiene il riferimento del nostro tag di forma e lo memorizza all'interno della variabile "modulo". La seconda riga utilizza quel riferimento e quindi chiama l'invio () del modulo. L'esecuzione di questo documento HTML fornisce il seguente risultato:

Premendo il collegamento presenta il modulo, ma poiché non esiste un file di back -end collegato per ricevere il modulo, quindi ripristina il campo.

Passaggio 3: richiedere il "nome utente" al momento della presentazione

Vuoi aggiungere una funzione pronto() al carico completo della pagina web; Pertanto, aggiungi la proprietà di "Onload"Sul tag come:

E poi nel file di script, aggiungi le seguenti righe:

funzione pronta ()
Form = documento.getElementById ("forma");
modulo.addEventListener ("invio", funzione (evento)
evento.preventDefault ();
name = document.getElementById ("nome").valore;
avviso ("benvenuto" + nome);
);

Quando il documento HTML è completamente caricato:

• Un ascoltatore di eventi viene aggiunto all'elemento modulo usando il suo riferimento.
• Questo listener di eventi ascolta l'evento di invio
• Al momento della presentazione, impedisce il comportamento predefinito del modulo (fermare il reindirizzamento).
• Alla fine, saluta l'utente usando il suo nome utente.

Se la pagina web è carica ora, fornisce il seguente output:

Come puoi vedere, il modulo è stato inviato e, impedendo il comportamento predefinito, siamo stati in grado di evitare la necessità di un backend per gestire i dati dai campi.

Conclusione

È davvero facile inviare un modulo facendo clic su un link con l'aiuto di JavaScript. L'elemento modulo di un documento HTML ha questo metodo chiamato invia(). Per inviare il modulo, devi solo fare una chiamata esplicita a questo metodo, che abbiamo fatto in questo articolo.