Como enviar um formulário com JavaScript, clicando em um link?


123

Em vez de um botão de envio, tenho um link:

<form>

  <a href="#"> submit </a>

</form>

Posso fazê-lo enviar o formulário quando ele é clicado?


Eu uso isso para integrar um formulário completamente oculto em uma página. Mas há quebras de linha antes e depois do link. Eles vêm do elemento de formulário? E eu gostaria de abrir o link em uma nova guia / página, target="_blank"não parece funcionar.
JPT

1
tl; dr <a role="button" aria-label="submit form" href="javascript:void(0)" onclick="document.querySelector('form').submit()">Submit</a>
Josh Habdas

Respostas:


210

A melhor maneira

A melhor maneira é inserir uma tag de entrada apropriada:

<input type="submit" value="submit" />

A melhor maneira JS

<form id="form-id">
  <button id="your-id">submit</button>
</form>
var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

Coloque o último código JavaScript por um DOMContentLoadedevento (escolha apenas loadpara compatibilidade com versões anteriores ) se você ainda não o fez:

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

A maneira fácil, não recomendável (a resposta anterior)

Adicione um onclickatributo ao link e um idao formulário:

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

Todas as formas

Qualquer que seja a maneira que você escolher, você formObject.submit()eventualmente ligará (onde formObjectestá o objeto DOM da <form>tag).

Você também precisa vincular esse manipulador de eventos, que chama formObject.submit(), para que seja chamado quando o usuário clicar em um link ou botão específico. Existem duas maneiras:

  • Recomendado: vincule um ouvinte de evento ao objeto DOM.

    // 1. Acquire a reference to our <form>.
    //    This can also be done by setting <form name="blub">:
    //       var form = document.forms.blub;
    
    var form = document.getElementById("form-id");
    
    
    // 2. Get a reference to our preferred element (link/button, see below) and
    //    add an event listener for the "click" event.
    document.getElementById("your-id").addEventListener("click", function () {
      form.submit();
    });
    
  • Não recomendado: insira JavaScript embutido. Existem várias razões pelas quais essa técnica não é recomendável. Um argumento importante é que você mistura marcação (HTML) com scripts (JS). O código torna-se desorganizado e um pouco insustentável.

    <a href="#" onclick="document.getElementById('form-id').submit();">submit</a>
    
    <button onclick="document.getElementById('form-id').submit();">submit</button>
    

Agora, chegamos ao ponto em que você precisa decidir o elemento da interface do usuário que aciona a chamada submit ().

  1. Um botão

    <button>submit</button>
  2. Um link

    <a href="#">submit</a>

Aplique as técnicas mencionadas acima para adicionar um ouvinte de evento.


Eu queria aplicar isso, mas não parece funcionar do meu lado. Aqui está um violino, jsfiddle.net/rbhr9wt2
user1149244 5/16/16

@ user1149244 No painel JavaScript no jsFiddle, clique em "JavaScript" e defina "Load Type" como "No wrap-in <body>" (ou <head>). Por padrão, é definido como "onLoad", após o qual DOMContentReady não é mais acionado.
ComFreek

3
Nota: Se o seu formulário tiver um botão com attr name="submit", o submit()método do seu formulário não estará acessível.
2540625 08/11

Por que o método onclick não é recomendado?
nu everest

@nueverest Um <input type="submit">tem mais significado semântico do que, digamos <a href="#" onclick="...">,. Isso é especialmente importante em relação aos leitores de tela. Se você deve usar o último, sugiro usar o ARIA .
ComFreek 26/02

65

Se você usa jQuery e precisaria de uma solução em linha, isso funcionaria muito bem;

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

Além disso, você pode querer substituir

<a href="#">text</a>

com

<a href="javascript:void(0);">text</a>

para que o usuário não role para o topo da sua página ao clicar no link.


1
Eu acredito que seria preferível fazê-lo em um <span> texto </span>. Não é um link, e href: javascript não é bom. (em breve tornar-se mal com razões próxima de segurança ... javascript inline deve ser banido algum dia.
Milche Patern

Concordo. A julgar pela natureza da pergunta, fui pela resposta simples. O que eu pessoalmente faço é usar href="#"e selecionar todos esses links com jquery e chamar e.preventDefault()no clickmanipulador de eventos para que o navegador não role.
Maurice

3
Eu pessoalmente prefiro esta resposta. Simples, limpo e fácil de implementar, se sua página estiver usando JQuery. Muito flexível também, pois tenho uma página com vários formulários e funciona perfeitamente.
John Contarino

Pode-se usar href = "#" se adicionar no final da chamada javascript onClick "return false"
Lumis 31/10/19

23

Você pode fornecer alguns IDs ao formulário e ao link e depois se inscrever para o onclickevento do link e submitdo formulário:

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

e depois:

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

Eu recomendo que você use um botão de envio para enviar formulários, pois respeita a semântica da marcação e funcionará mesmo para usuários com o javascript desativado.


4

HTML e CSS - Sem solução Javascript

Faça seu botão aparecer como um link de Bootstrap

HTML:

<form>
    <button class="btn-link">Submit</button>
</form>

CSS:

.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

Excelente, por que complicar quando pode ser simples. No entanto, acho que fica ainda melhor se você também adicionar "cursor: pointer;" na classe hover, então o cursor se transforma na mão.
Lumis

3

isso funciona bem sem nenhuma função especial necessária. Muito mais fácil escrever com php também.<input onclick="this.form.submit()"/>


OP indicado clicando em um link, não no elemento de entrada.
Rahil Wazir

Pode este trabalho, fazendo algo parecido<input onclick="this.form.submit()"> Some Text</input>
CodyBugstein

2
<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>

3
Você pode explicar como sua resposta realmente responde à pergunta? Adicione mais contexto a ele, por favor.

1
document.getElementById("theForm").submit();

Funciona perfeito no meu caso.

você pode usá-lo na função também como,

function submitForm()
{
     document.getElementById("theForm").submit();
} 

Defina "theForm" como seu ID de formulário. Está feito.


0

aqui está a melhor solução para sua pergunta: dentro do formulário você tem este código:

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

no arquivo CSS, faça o seguinte:

button{
  display: none;
}

em JS você faz isso:

$("a").click(function(){
   $("button").trigger("click");
})

Ai está.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.