How to make the Enter button do something else rather than submit a form?

Question

I have a form in which I use autocomplete, and a link. When some text is entered into the form, and the link is clicked, the contents of the text go into the the textarea.

You can see it working in this test page: http://www.problemio.com/test.php

The problem I am having is that when the cursor is in the textfield, and "enter" is pressed, the form gets submitted. But the more intuitive thing is that the "add category" link gets clicked.

Is there a way to change things so that when the cursor is on the textfield, and enter is pressed, the page acts as though the link for "add category" is pressed?

Thanks!!

Roman Goyenko · Accepted Answer · 2011-10-31 22:17:12Z

2

You can override the pressing of the Enter in the form:

<script type="text/javascript"> function stopRKey(evt) { var evt = (evt) ? evt : ((event) ? event : null); var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if ((evt.keyCode == 13) && (node.type=="text")) {return false;} } document.onkeypress = stopRKey; </script>

answered Oct 31, 2011 at 22:17

Roman Goyenko

7,1027 gold badges56 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pimvdb Over a year ago

You could replace the evt assignment with evt = evt || event. The same goes for node.

Genadinik Over a year ago

@Romario thanks...not sure I completely understand what is happening here. Could you help me understand what that code is doing and in what sequence it gets executed? Thanks!!

Roman Goyenko Over a year ago

first - we try to get the event in the function. If it is null we get window.event instead

Roman Goyenko Over a year ago

then we get the node. If the node type is text and event key code is 13 (enter) then we return false, so event doesn't fire. Main thing to know is "? :" - look here hscripts.com/tutorials/javascript/ternary.php

Fatih Acet · Accepted Answer · 2011-10-31 22:17:10Z

1

What about to use a normal button instead of submit. You can bind click to it and do what you want even submit a form.

answered Oct 31, 2011 at 22:17

Fatih Acet

29.8k9 gold badges55 silver badges58 bronze badges

3 Comments

Genadinik Over a year ago

Well, actually, on second thought, the problem is that there isn't a click to that button whenever the uses presses enter. What I need is to somehow catch the event when the user presses enter from the textfield.

Fatih Acet Over a year ago

Hmm the point is, by default behavior submit buttons in a form, submits the form automatically by pressing Enter on any text field. But the rule is not valid for normal buttons. You can submit your form manually.

Fatih Acet Over a year ago

Btw, submit button is more semantic in a form rather than normal button. If you want to use it, you can simply prevent default behavior by event.preventDefault()

ConnorLaCombe · Accepted Answer · 2011-10-31 22:58:36Z

You can add the onsubmit event to your form tag. So it looks like this:

<form onsubmit="return doSubmit();">

Then in your JavaScript you can have:

function doSubmit() { //Do all your JS stuff here document.getElementById("addCategoryId").click(); //Not sure if this is completely right, but that will click your addCategory button/link as long as the ID is set correctly. return false; //Don't submit form }

Thanks - but in the part of the doSubmit() where I do the JS, how do I tell where the cursor was? Is that possible?

Collectives™ on Stack Overflow

How to make the Enter button do something else rather than submit a form?

3 Answers 3

4 Comments

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Related