Use um link normal para enviar um formulário


130

Quero enviar um formulário. Mas não estou seguindo a maneira básica de usar um botão de entrada com o tipo de envio, mas um um link.

A imagem abaixo mostra o porquê. Estou usando links de imagens para salvar / enviar o formulário. Como tenho marcação CSS padrão para links de imagem, não quero usar os botões de envio de entrada.

Tentei aplicar onClick = "document.formName.submit ()" ao elemento a, mas preferiria um método html.

texto alternativo

Alguma ideia?


3
use o botão e o css para exibir a imagem ou usar javascript, não há maneira real de fazer o href simples enviar um formulário sem javascript.
Anton S

i segundo que, infelizmente estes is not uma maneira fácil w / o javascript
benhowdle89

4
Sua razão para fazer isso parece uma economia falsa. É melhor criar um css padrão para os botões de envio e usar os formulários da maneira como foram projetados para serem usados. Há uma pilha de técnicas de CSS de botão descritas aqui: tripwiremagazine.com/2009/06/…
dnagirl

Respostas:


169

Dois caminhos. Crie um botão e estilize-o para que pareça um link com css ou crie um link e use-o onclick="this.closest('form').submit();return false;".


55
Aaaaaaaand aqui é uma referência para como estilo de um botão como um link: stackoverflow.com/questions/1367409/...
flipchart

3
nota que form.submit()não vai funcionar sem JavaScript
baptx

3
@baptx telefones inteligentes, mesmo velhos permitiram javascript
Mahdi Jazini

2
@MahdiJazini muitas pessoas desativam o JavaScript por padrão, o que pode ser intrusivo e afetar o desempenho em alguns casos. Se o JavaScript falhar, ele pode interromper o site inteiro (por exemplo, usando uma CDN sem fallback local e o domínio de terceiros está bloqueado). Se houver um erro de HTML, você ainda poderá usar o site. Os desenvolvedores devem seguir o princípio de aprimoramento progressivo.
baptx

3
Se você deseja oferecer suporte a usuários sem javascript, execute a primeira opção descrita nesta resposta, denomine um botão como um link. Por exemplo, input[type=submit].link { border: none; background: none; display: inline; color: blue; text-decoration: underline; }e<input type=submit class="link" />
Jan Sverre

87

Você realmente não pode fazer isso sem alguma forma de script, com o melhor de meu conhecimento.

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

Exemplo daqui .


1
e queridos visitantes ... não se esqueça de definir o >>> id = "my_form", não é o nome: D
Mahdi Jazini

Essa deve ser a resposta melhor e explícita, obrigado!
yehanny 27/04

28

Apenas um estilo input type="submit"como esse funcionou para mim:

.link-button { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}
<input type="submit" class="link-button" />

Testado no Chrome, IE 7-9, Firefox


apenas para o registro: você deve selecionar o inputelemento apropriado usando seletores CSS sem anexar uma classe ao elemento HTML.
Erik Kaplun

Embora o seu comentário é a forma preferida, este nem sempre é possível
Serj Sagan

Por que essa é a maneira preferida?
Mark

É uma prática semi-estabelecido de codificação, geralmente deixa para trás html limpo ... mas não é um grande negócio
Serj Sagan

1
Esta resposta não depende de javascript, o que é uma coisa a menos para se preocupar.
Matthew Lock


5

usar:

<input type="image" src=".."/>

ou:

<button type="send"><img src=".."/> + any html code</button>

mais algum CSS


0

Definitivamente, não há solução com HTML puro para enviar um formulário com um link (a tag ). O HTML padrão aceita apenas botões ou imagens. Como alguns outros colaboradores disseram, é possível simular a aparência de um link usando um botão, mas acho que esse não é o objetivo da pergunta.

IMHO, acredito que a solução proposta e aceita não funciona.

Eu testei em um formulário e o navegador não encontrou a referência ao formulário.

Portanto, é possível resolvê-lo usando uma única linha de JavaScript, usando o thisobjeto, que faz referência ao elemento que está sendo clicado, que é um nó filho do formulário, que precisa ser enviado. O mesmo this.parentNodeacontece com o nó do formulário. Depois é só chamar o submit()método dessa forma. Não é necessária pesquisa de todo o documento para encontrar a forma correta.

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

Suponha que eu entre com meu próprio nome:

Formulário preenchido

Eu usei getno atributo method method porque é possível ver os parâmetros corretos no URL na página carregada após o envio.

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

Essa solução obviamente se aplica a qualquer tag que aceite o onclickevento ou algum evento semelhante.

thisé uma excelente opção para recuperar o contexto juntamente com a eventvariável (disponível em todos os principais navegadores e no IE9) que pode ser usada diretamente ou transmitida como argumento para uma função.

Nesse caso, substitua a linha pela atag pela linha abaixo, usando a propriedade targetque indica o elemento que iniciou o evento.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>

@ Nathan, eu não tenho muita prática de escrever Stackoverflow. Espero que suas correções me ajudem a melhorar meu estilo. Meu inglês também não é bom.
Paulo Buchsbaum

0

você pode usar OnClick = "document.getElementById ('formID_NOT_NAME'). SUBMIT ()"

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.