Invia modulo utilizzando JavaScript

1. Crea modulo HTML
2. Accedi al modulo
3. Ottieni i valori dei campi modulo in JavaScript
4. Convalida i dati dai campi modulo in JavaScript

Questo tutorial introdurrà come inviare un modulo utilizzando JavaScript.

I moduli aiutano a prendere i dati dagli utenti e ad archiviarli in un database strutturato. L’invio di moduli è un evento chiave quando lavoriamo con varie app e siti web. Non è semplice come chiamare form.submit() o fare clic sul pulsante di invio. Quando il modulo viene inviato, l’evento di invio viene attivato subito prima che la richiesta venga inviata al server. È qui che JavaScript entrerà in azione e convaliderà i dati inseriti. Possiamo persino creare oggetti e aggiungere vari attributi.

Quindi, per inviare un modulo, dobbiamo prima creare un modulo, accedere al modulo, ottenere i valori di vari campi, convalidare tutti i valori e quindi fare clic sul pulsante di invio / chiamata for.submit().

Crea modulo HTML

Possiamo creare un modulo HTML usando l’elemento <form>.

<form action="/" method="post" id="signup-form">
    <input type="text" name="Username" placeholder="Full Name">
    <input type="email" name="EmailAddress" placeholder="Email Address">
    <button type="submit">Submit</button>
</form>

Il modulo sopra ha due attributi: action e method.

1. action: specifica l’URL che gestirà il processo di invio del modulo.
2. method: specifica il metodo HTTP utilizzato per inviare il modulo. Il metodo post aiuta a memorizzare i dati in un database inviando i dati al server nel corpo della richiesta. Il metodo get aggiunge i dati del modulo a un URL che ha ?.

Accedi al modulo

Possiamo accedere agli elementi del modulo utilizzando uno qualsiasi dei selettori JavaScript come getElementByTag, getElementById, ecc.

let form = document.getElementById('signup-form');

Ottieni i valori dei campi modulo in JavaScript

Possiamo accedere ai campi di input nel modulo utilizzando l’array degli elementi del modulo o facendo riferimento all’id del campo. Dopo aver effettuato l’accesso al campo, possiamo utilizzare l’attributo .values per ottenere i valori memorizzati all’interno di quel campo. Una volta acquisiti i dati del modulo, possiamo convalidare i dati prima di procedere con l’invio del modulo finale.

// Syntax1:
let name = form.elements[0];
let username = name.value;
// Syntax2:
let name = form.elements['name'];
let username = name.value;

Convalida i dati dai campi modulo in JavaScript

Aggiungiamo un listener di eventi al pulsante di invio e chiamiamo la nostra procedura di convalida prima di passare alla pagina successiva. Ad esempio: per una pagina di registrazione, l’utente deve fornire sia l’email che la password.

// Function to check that the input field is not empty while submitting
function requireValue(input) {
  return !(input.value.trim() === '');
}
// Event listener to perform the validation when user clicks on submit button
form.addEventListener('submit', (event) => {
  requiredFields.forEach((input) => {
    valid = valid | requireValue(input.input);
  });
  if (!valid) {
    event.preventDefault();
  }
});

Nel codice sopra, abbiamo scritto un piccolo controllo di convalida per vedere se il campo di input è vuoto. Quindi abbiamo allegato un listener di eventi al pulsante di invio per elaborare i dati prima di trasmetterli all’URL dell’azione. Ci assicuriamo che il campo di input non sia vuoto e, nel caso lo sia, impediamo l’invio del form chiamando event.preventDefault(). In questo modo, JavaScript e HTML gestiscono l’invio completo del modulo.