JavaScript Invia modulo al clic

Ammar Ali 12 ottobre 2023
  1. Invia un modulo facendo clic su un collegamento e utilizzando la funzione submit() in JavaScript
  2. Invia un modulo facendo clic su un pulsante e utilizzando la funzione submit() in JavaScript
JavaScript Invia modulo al clic

Questo tutorial discuterà come inviare un modulo utilizzando la funzione submit() in JavaScript.

Invia un modulo facendo clic su un collegamento e utilizzando la funzione submit() in JavaScript

In JavaScript, puoi creare un modulo usando il tag form, puoi dare al modulo un id usando l’attributo id e, successivamente, devi scegliere un metodo per inviare il tuo modulo come, puoi inviare il modulo quando si fa clic su un collegamento o un pulsante. Ora, ci sono due metodi per inviare un modulo e puoi farlo all’interno del codice HTML usando l’attributo onclick o farlo all’interno del JavaScript. Ad esempio, inviamo un modulo all’interno dell’HTML utilizzando l’attributo onclick. Vedi il codice qui sotto.

<form id="FormId">
  <a href="FormLink" id = "LinkID" onclick="document.getElementById('FormId').submit();"> SubmitForm </a>
</form>

È possibile modificare l’id del form e l’id del collegamento nel codice sopra in base alle proprie esigenze. Questo metodo non è consigliato perché stai mescolando HTML con codice JavaScript. Puoi anche farlo separatamente in JavaScript usando l’id sia del form che del link. Ad esempio, eseguiamo l’operazione precedente utilizzando JavaScript separato. Vedi il codice qui sotto.

var myform = document.getElementById('FormId');
document.getElementById('LinkId').addEventListener('click', function() {
  myform.submit();
});

Questo metodo è consigliato perché HTML e JavaScript sono in file separati. Nota che devi usare l’id del modulo e l’id del collegamento che hai definito nell’HTML per ottenere quegli elementi in JavaScript. Il modulo verrà inviato quando si fa clic sul collegamento.

Invia un modulo facendo clic su un pulsante e utilizzando la funzione submit() in JavaScript

È possibile utilizzare un pulsante per inviare un modulo. Esistono due metodi per inviare un modulo e puoi farlo all’interno del codice HTML utilizzando l’attributo onclick o farlo all’interno del JavaScript. Ad esempio, inviamo un modulo all’interno dell’HTML utilizzando l’attributo onclick. Vedi il codice qui sotto.

<form id="FormId">
  <button id = "ButtonId" onclick="document.getElementById('FormId').submit();"> SubmitForm </button>
</form>

Simile al metodo sopra, questo metodo non è consigliato perché stai mescolando HTML con codice JavaScript. Eseguiamo l’operazione sopra utilizzando JavaScript separato.

var myform = document.getElementById('FormId');
document.getElementById('ButtonId').addEventListener('click', function() {
  myform.submit();
});
Autore: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

Articolo correlato - JavaScript Form