Come inviare un modulo usando JavaScript

JavaScript è un linguaggio di programmazione web di alto livello che sta diventando popolare giorno per giorno. Fornisce alle nostre pagine Web e alle applicazioni Web la possibilità di eseguire determinate azioni e renderle interattive. JavaScript offre forme agli sviluppatori Web che aiutano gli sviluppatori a raccogliere dati dagli utenti e archiviare tali dati in un database. Quando si lavora con numerose app e siti Web, la presentazione del modulo è un fenomeno critico.

In questo post, esamineremo come inviare un modulo usando JavaScript in dettaglio, ma prima vedremo come creare un modulo HTML.

Creazione di forma HTML

Un modulo HTML può essere creato utilizzando il tag offerto da HTML stesso e impiega due attributi:

• Il primo è l '"azione" che contiene un URL (che gestisce la presentazione del processo di forma).
• Il secondo attributo è il "metodo" che ha un metodo HTTP.

Un metodo HTTP può essere di vari tipi e i due più comunemente usati sono:

• Ottieni (utilizzato per ottenere alcuni dati da un server)
• Post (utilizzato per scrivere i dati sul server)

Tuttavia, non useremo questi due attributi in questo post in quanto non stiamo lavorando con un server.

Scriviamo ora il codice HTML per la creazione di moduli:

Invia

Nel codice sopra, abbiamo creato un modulo e abbiamo dato il id attributo alla forma il cui significato vedremo tra un po '. Successivamente, abbiamo definito due campi di input e quindi definito un pulsante che ha un tipo di invia. Alla fine, abbiamo messo un sceneggiatura tagga e riferito il nome file "codice.js"Ciò conterrà il nostro codice JavaScript.

Accedere al modulo e recuperare i valori dal modulo

Ora che abbiamo finito con la creazione del nostro modulo, accediamo a questo modulo da JavaScript e poi recupera i valori di nome utente E parola d'ordine che sono presenti all'interno del tag modulo. Per accedere al modulo useremo il id attributo menzionato in precedenza tramite il seguente codice:

var myform = document.getElementById ('MyForm');

Allo stesso modo, possiamo anche ottenere i valori dai campi di input usando il id attributo dato nel modulo html. L'unica differenza è che daremo il valore alla fine del getelementbyid in modo che possiamo recuperare il valore dal campo di input e non l'elemento stesso:

var nome utente = documento.getElementById ('nome utente').valore;
var password = documento.getElementById ('Password').valore;

Invia il modulo e convalida i dati

Per inviare il modulo, useremo il Ascoltatore di eventi che ascolta continuamente un ascoltatore specificato. Un evento è semplicemente un'interazione di HTML e JavaScript attivato da un utente o un browser quando l'utente manipola una pagina e questo evento viene gestito dall'ascoltatore di eventi.

var myform = document.getElementById ('MyForm');
// ascoltatore di eventi che ascolta per l'invio evento
myform.addEventListener ("invio", funzione (e)
e.preventDefault ();
// Recupera i valori
var nome utente = documento.getElementById ('nome utente').valore;
var password = documento.getElementById ('Password').valore;
// Convalida campi di nome utente e password
if (username == "|| password ==")
avviso ("riempire tutti i campi richiesti");

altro
avviso ("sottomissione del modulo riuscita");

)

Nel codice sopra, in primo luogo, otteniamo il riferimento del modulo usando il id attribuire e quindi avviare un ascoltatore di eventi di "invia" in questa forma. La funzione specificata nell'ascoltatore di eventi verrà invocata una volta che l'utente fa clic sul pulsante di invio.

All'interno della funzione, abbiamo eseguito la nostra convalida, ovvero se i campi di input di nome utente o password sono vuoti, vedremo un messaggio nella casella di avviso che dice Si prega di compilare tutti i campi richiesti Altrimenti riceveremo il messaggio di Presentazione del modulo riuscito.

Controllaci prima facendo clic sul pulsante di invio lasciando vuoti i due campi di input:

Pieniamo ora i due campi e vediamo l'output:

Conclusione

I moduli sono molto utili per raccogliere dati dagli utenti e quindi manipolare o giocare con quei dati in JavaScript. In questo post, abbiamo preso aiuto da un HTML Tag per inizializzare un modulo e poi è andato a definire due campi di input e un pulsante. Successivamente, abbiamo accesso all'elemento del modulo all'interno di un file JavaScript e quindi recuperati i valori dei campi di input del modulo usando il id attributo.

Alla fine, abbiamo risposto alla domanda su come inviare un modulo usando JavaScript avviando un ascoltatore di eventi che ascolterà l'evento di invio e ogni volta che un utente fa clic sul pulsante di invio, questo evento verrà licenziato. Abbiamo anche convalidato i nostri campi di input all'interno della funzione dell'ascoltatore di eventi.