enter to trigger button click?

Question

I have an html form like this:

<form name="f1">
<center>
<strong>Search VMs:</strong> 
<input id='vms' name="word" type="text"  size="50" placeholder="Name or IP, space delimited, partial name OK."  autofocus autocomplete="off" pattern=".{3,}" required title="3 chars minimum"  /> in
<select name="vc" id='whichvc'>
    <option value="all" selected="selected">all VCs</option>
</select>
<input type="checkbox" id="check4detail" name="detail">Include details
<input name='searchbutton' value="Search VMs" type="button" onclick='xmlhttpPost("/cgi-bin/search-vm.pl")' />
<input value="Clear" type="button" onclick="clearBox('result')" />
</center>
</p>
<div id="loading"></div>
<div id="result"></div>
</form>

As you can see, there are a text input field and a few other buttons, one of which has a onclick() listener associated to it. How do I trigger the onclick event on that button when user enters text and press enter?

Tried this solution from the forum but it somehow does not work:

$('#vms').keypress(function(event){
if (event.which === 13){
$('#searchbutton').click();}
});

BTW, when I enter a text in the field and click on the search button, it work just fine. But enter text and press enter does not trigger a search event somehow.

I don't think jQuery events trigger non-jquery listeners, do they? — mhodges
– mhodges, Commented Feb 2, 2017 at 23:08
@mhodges If you mean does $('#searchbutton').click(); trigger the function in the onclick attribute, it does. Simple demo: jsfiddle.net/v11y6kab. Details in the docs for trigger. — Heretic Monkey
– Heretic Monkey, Commented Feb 2, 2017 at 23:18
Possible duplicate of Trigger a button click with JavaScript on the Enter key in a text box — Heretic Monkey
– Heretic Monkey, Commented Feb 2, 2017 at 23:19
You don't need the JavaScript: before the xmlhttpPost call in your onclick attribute it's kind of redundant. You'd only need it if you had an anchor and were using the href to trigger a JavaScript function. — Heretic Monkey
– Heretic Monkey, Commented Feb 2, 2017 at 23:21
@MikeMcCaughan Fair enough, I thought I remembered having to create a native event for something to trigger properly, but I couldn't remember what it was. Now that I think about it, I think it was with an addEventListener("change") does not get triggered by $.change() but <DOMELEMENT onchange="myFunction()"/> does work with $.change()... /shrug — mhodges
– mhodges, Commented Feb 2, 2017 at 23:35

Jack Brown · Accepted Answer · 2017-02-03 00:35:38Z

1

Modified @GolezTrol code so that onChange listener on the input text field indirectly triggers the click of the search button.

<form action="" method="get">
  Test field:
  <input type="text" name="test" onChange="aliasonclick">
  <br>
  <button name="searchbutton" id="clickthis" onclick="alert('it works!');">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

<script>
  function aliasonclick() {
    var searchbutton = document.getElementById("clickthis")
    searchbutton.click()
  }
</script>

answered Feb 3, 2017 at 0:35

Jack Brown

5,8902 gold badges15 silver badges28 bronze badges

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

3 Comments

Jack Brown Over a year ago

Yep works for me on a chrome browser. Whenever I select the text field and press enter I get an alert dialog.

GolezTrol Over a year ago

ok. Works now. If you do this, you can remove the form tag altogether, which is nice, since OP doesn't want to form to do anything anyway.

Jonathan Pool Over a year ago

.onchange triggers an event when the user commits a change to the value of the text field that it is attached to.

xlm · Accepted Answer · 2017-02-03 00:25:23Z

0

Change $('#searchbutton').click(); to $('#searchbutton').trigger('click');

edited Feb 3, 2017 at 0:25

xlm

7,72415 gold badges59 silver badges60 bronze badges

answered Feb 2, 2017 at 23:55

Marc Puigventós Sanz

1888 bronze badges

1 Comment

zagpoint Over a year ago

Unfortunately this does not change the behavior either - the search still does not happen..

GolezTrol · Accepted Answer · 2017-02-03 10:10:55Z

0

Change the type of the button to submit. Submit buttons grab the enter key when it is pressed in one of the edits in the same form. In the example below you can test it. Put the cursor in the edit box and press enter. You should get an alert.

<form action="" method="get" onsubmit="return false;">
Test field: <input type="text" name="test"><br>
<button type="submit" value="Submit" onclick="alert('it works!');">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>

Note that this is a browser implementation detail. I don't know of any browser in which this won't work, but at the same time I can't guarantee that it will work on any browser and on any platform.

edited Feb 3, 2017 at 10:10

answered Feb 2, 2017 at 23:09

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

5 Comments

zagpoint Over a year ago

Cannot do that as I am trying to avoid a page reload.

GolezTrol Over a year ago

You can prevent a page reload using JavaScript in the onsubmit event of the form. With the added benefit that you can get a page reload in a non-javascript environment, should you care for that.

zagpoint Over a year ago

Care to elaborate a bit (preferably with some sample code;-) on how to create an onsubmit() listener to prevent a page reload?

GolezTrol Over a year ago

Paste that exact phrase "onsubmit() listener to prevent a page reload" into Google, and you'll find 4 SO questions (this, this, this and this) as the first 4 results. Surely you can find a solution there. :-)

GolezTrol Over a year ago

But in your case, if you always want to prevent it, you could add onsubmit="return false;" to the form, as I've added in the answer.

Collectives™ on Stack Overflow

enter to trigger button click?

3 Answers 3

3 Comments

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related