9

Foi-me dado um layout de um formulário:

<form method="post" action="" id="mail_form">
   <div id="newsletter"> 
      <input type="text" name="email_newsletter" />
      <div class="newslink">
         <input type="hidden" name="submit_newsletter" />
         <a href="">ENVIAR</a>
      </div>
   </div>
</form>

Como é que posso fazer para que, ao clicar em "ENVIAR", o formulário seja submetido à partir do <a href="">?

Eu sei que há outras formas de se enviar um formulário, mas neste caso, gostaria de enviar assim.

2
  • Para isso você terá que fazer em javascript ou jquery.. tudo bem pra você se eu der a resposta em javascript? Commented 1/04/2014 às 12:05
  • 4
    @pc_oc Acredito que o código que o Bacco meteu é a melhor solução da sua pergunta.. Commented 1/04/2014 às 12:22

2 Respostas 2

15

Desta forma, somente com javascript.

O método correto é usar um botão do tipo <input type="submit">, um <button type="submit"> ou uma <input type="image">, estes dois últimos tem efeito parecido com submit, sendo que o button permite outros elementos aninhados (imagens inclusive), e o segundo permite o envio ao se clicar em uma imagem específica (enviando junto as coordenadas clicadas).

Se mesmo assim quiser um <a>, segue o código. Não recomendo, pois afeta a acessibilidade do formulário.

<form method="post" action="" id="mail_form">
    <div id="newsletter"> 
        <input type="text" name="email_newsletter" />
        <div class="newslink">
            <input type="hidden" name="submit_newsletter" />
            <a href="#" onClick="document.getElementById('mail_form').submit();">ENVIAR</a>
        </div>
    </div>
</form>

Lembre-se que hoje em dia, usando CSS, você consegue deixar o submit convencional com aparência igual a um link comum, com a vantagem de não "quebrar" a funcionalidade normal do form.

Ainda teria uma gambiarra que é usar um <label for="botaodeenvio"> e esconder o botão original com posição, opacidade, etc, mas vai continuar não sendo um <a>. Melhor usar CSS e os métodos convencionais.

1
  • Obrigado pela ajuda!
    – pc_oc
    Commented 1/04/2014 às 13:43
2

Você pode usar um código simplificado como este javascript:x.submit()

<a href='javascript:formName.submit()'>ENVIAR</a>

Onde formName corresponde ao name do formulário, exemplo:

<form name='pagamento' action=teste.html>
/*Conteúdo do formulário*/
</form>

E o link ficaria desta forma:

<a href='javascript:pagamento.submit()' target='_blank'>ENVIAR</a>
<form name='pagamento' action='teste.html' >
<input value='10' name='valor' type='hidden'/>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .