Eu tenho um formulário, com 2 botões
<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>
Também uso o botão da interface do usuário do jQuery, simplesmente assim
$('button').button();
No entanto, o primeiro botão também envia o formulário. Eu teria pensado que, se não tivesse type="submit"
, não teria.
Obviamente, eu poderia fazer isso
$('button[type!=submit]').click(function(event) { event.stopPropagation(); });
Mas existe uma maneira de impedir que esse botão voltar envie o formulário sem a intervenção do JavaScript?
Para ser sincero, usei apenas um botão para poder estilizá-lo com a interface do usuário do jQuery. Tentei ligar button()
no link e ele não funcionou como esperado (parecia bastante feio!).
<button type="button">
para aquele que não envia o formulário e<input type="submit">
para o outro. Em seguida, pegá-lo com jquery$('#formID').submit(function(e){});
Respostas:
O valor padrão para o
type
atributo debutton
elementos é "enviar". Configure-o paratype="button"
produzir um botão que não envie o formulário.Nas palavras do padrão HTML : "Não faz nada".
fonte
O
button
elemento tem um tipo padrão desubmit
.Você pode fazer com que ele não faça nada definindo um tipo de
button
:fonte
Basta usar o bom e velho HTML:
Embrulhe-o como o assunto de um link, se desejar:
Ou, se você decidir que o javascript fornece outras funcionalidades:
fonte
<input type="button" />
Button
é um contêiner em HTML. Isso permite que você coloque coisas como imagens ou tabelas (não sei por que você faria isso, mas você poderia) etc, enquantoinput
não suporta isso. Há uma diferença entre os dois, e cada um tem seu caso de uso apropriado.fonte
Honestamente, eu gosto das outras respostas. Fácil e sem necessidade de entrar no JS. Mas notei que você estava perguntando sobre o jQuery. Portanto, por uma questão de integridade, no jQuery, se você retornar false com o manipulador .click (), isso negará a ação padrão do widget.
Veja aqui um exemplo (e mais brindes também). Aqui está a documentação também .
em poucas palavras, com seu código de exemplo, faça o seguinte:
Como um benefício adicional, com isso, você pode se livrar da marca de âncora e apenas usar o botão
fonte
e.preventDefault()
não faz nada para interromper o envio (onde começafunction(e)
).Sem definir o
type
atributo, você também pode retornarfalse
do seuOnClick
manipulador e declarar oonclick
atributo comoonclick="return onBtnClick(event)"
.fonte
Sim, você pode fazer um botão não enviar um formulário adicionando um atributo do tipo de botão de valor:
<button type="button"><button>
fonte
fonte