Prevent form submit from triggering buttons

Question

I have a form with a few textboxes in it and a few buttons. I have a couple custom form elements that I am working on. One, in particular, is a textbox that will search a database onEnterClicked. This works just fine, but I also have a button that will run code onClick. Both of these appear to be linked to submitting the form.

<form onsubmit="return false;"> <input type="text" id="autofill"> ... <button id="upload">

When I run this jQuery code:

$("input#autofill").keyUp(function(e){ //Do stuff }); $("button#upload").click(function(){ alert("test"); });

Pressing enter in the autofill textbox will show the test alert, but will not do any of the //do stuff code.

How can I prevent this from happening?

$(function(){ $("#autofill").keyup(function(e){ if(e.keyCode == 13) alert("Enter pressed"); }); $("#upload").click(function(){ alert("Button clicked"); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form onsubmit="return false;"> <input type="text" id="autofill"/> <button id="upload">Click me to show an alert</button> </form>

@EternalHour I want //do stuff to run when I press enter in the text box; right now it is showing the alert("test"), when it should not be, as I show in the snippet. Try pressing enter in the text box. It will show "Button Clicked" instead of "Enter pressed" — Liftoff
– Liftoff, Commented Nov 5, 2014 at 4:05

EternalHour · Accepted Answer · 2014-11-11 02:18:37Z

In order to prevent the form from submitting with a <button>, you need to specify type="button".

<button id="upload" type="button">Click me to show an alert</button>

If you do not specify the type, the default is type="submit", which will submit the form when you press enter.

wizzardz · Accepted Answer · 2014-11-05 04:40:01Z

If you have strong reason for using the button type 'submit', then try this solution. Catch the 'keypress' event of the textbox and suppress it

$(function() { // handle the 'keypress' event to prevent the form submission $('#autofill').keypress(function(e) { if (e.keyCode == 13) { e.preventDefault(); e.stopPropagation(); } }); $("#autofill").keyup(function(e) { if (e.keyCode == 13) alert("Enter pressed"); }); $("#upload").click(function() { alert("Button clicked"); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="f"> <input type="text" id="autofill" /> <button id="upload">Click me to show an alert</button> </form>

Collectives™ on Stack Overflow

Prevent form submit from triggering buttons

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related