JavaScript Submit Form on Click

1. Envie um formulário clicando em um link e usando a função submit() em JavaScript
2. Envie um formulário clicando em um botão e usando a função submit() em JavaScript

Este tutorial discutirá como enviar um formulário usando a função submit() em JavaScript.

Envie um formulário clicando em um link e usando a função submit() em JavaScript

Em JavaScript, você pode criar um formulário usando a tag form, você pode dar ao formulário um id usando o atributo id, e depois disso, você tem que escolher um método para enviar seu formulário, como, você pode enviar o formulário quando um link ou botão é clicado. Agora, existem dois métodos para enviar um formulário, e você pode fazê-lo dentro do código HTML usando o atributo onclick ou fazê-lo dentro do JavaScript. Por exemplo, vamos enviar um formulário dentro do HTML usando o atributo onclick. Veja o código abaixo.

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

Você pode alterar o id do form e o id do link no código acima de acordo com suas necessidades. Este método não é recomendado porque você está misturando HTML com código JavaScript. Você também pode fazer isso separadamente em JavaScript usando o id do formulário e do link. Por exemplo, vamos fazer a operação acima usando JavaScript separado. Veja o código abaixo.

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

Este método é recomendado porque o HTML e o JavaScript estão em arquivos separados. Observe que você deve usar o id do formulário e o id do link que definiu no HTML para obter esses elementos em JavaScript. O formulário será enviado quando o link for clicado.

Envie um formulário clicando em um botão e usando a função submit() em JavaScript

Você pode usar um botão para enviar um formulário. Existem dois métodos para enviar um formulário, e você pode fazê-lo dentro do código HTML usando o atributo onclick ou fazê-lo dentro do JavaScript. Por exemplo, vamos enviar um formulário dentro do HTML usando o atributo onclick. Veja o código abaixo.

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

Semelhante ao método acima, este método não é recomendado porque você está misturando HTML com código JavaScript. Vamos fazer a operação acima usando JavaScript separado.

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