3 Replies - 528 Views - Last Post: 26 November 2016 - 11:25 AM

#1 chris98  Icon User is offline

  • D.I.C Lover

Reputation: 40
  • View blog
  • Posts: 1,100
  • Joined: 06-July 13

When user presses enter submit the form - but only in one input

Posted 26 November 2016 - 10:26 AM

When the user is hovering over the input, I'd like them to be able to press enter to submit the form through AJAX. This works very well with the following code. Once you view the page, and you press enter, nothing happens. You then type something into the input and on pressing enter, the form will submit.

However ... this is where the problem starts. Now that you've clicked to go into the input, even if you click out of the input and press enter while you're anywhere on the page, the form will still submit. I only want that to happen when you're specifically in this one input.

Is this possible?

This is my jQuery:

	$(document).on('focus', '#search', function()
	{
		$(document).keypress(function(e)
		{
			if (e.which == 13)
				refresh_ticket_list();
		});
	});


And my HTML is a simple input:
<input type="text" id="search" />


Is This A Good Question/Topic? 0
  • +

Replies To: When user presses enter submit the form - but only in one input

#2 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: When user presses enter submit the form - but only in one input

Posted 26 November 2016 - 10:49 AM

"When the user is hovering over the input, I'd like them to be able to press enter to submit the form through AJAX."

This is ambiguous. Hovering and a keypress are not connected, the keypress happens wherever the focus currently is, which might be much further down the page.

If focus is anywhere in the form the default enter key behaviour is to submit the form. A first step is to prevent this behaviour, see here:

http://stackoverflow...y-hitting-enter

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

Then you would check for a key event on the specific input and submit the form.

Nesting event handlers like you are isn't usually the correct approach. You are also calling a function, not submitting the form? Clarification is required. It will also help you greatly if you can state clearly your requirement.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: When user presses enter submit the form - but only in one input

Posted 26 November 2016 - 11:15 AM

Here's an example that I whipped up:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<form action="nowhere.html">
<input type="text" id="search" />
<button>Some Button for focus</button>
</form>

<script>
$(window).keypress(function(event){
    if(event.keyCode == 13) {
        event.preventDefault();
        console.log("keypress on window..");
        return false;
    }
});

$('#search').keypress(function (e) {
    if (e.keyCode == 13) {
        console.log("keypress on input..");
        e.preventDefault(); // for form submit
        e.stopPropagation(); // to window
    }
});
</script>
</body>
</html>

Tabbing to the button and pressing Enter - or just clicking somewhere blank and pressing Enter - will show the window message and not submit the form. (Clicking the button will still submit the form.)

Pressing Enter inside the input will currently both prevent the form submission and prevent the propagation of this event to the window. Removing preventDefault will cause the form submission as normal.
Was This Post Helpful? 0
  • +
  • -

#4 chris98  Icon User is offline

  • D.I.C Lover

Reputation: 40
  • View blog
  • Posts: 1,100
  • Joined: 06-July 13

Re: When user presses enter submit the form - but only in one input

Posted 26 November 2016 - 11:25 AM

Believe it or not, this example code was exactly what I was looking for. Thank you very much!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1