-1

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.

zagpoint
  • 85
  • 1
  • 10
  • I don't think jQuery events trigger non-jquery listeners, do they? – mhodges Feb 02 '17 at 23:08
  • @mhodges If you mean does `$('#searchbutton').click();` trigger the function in the `onclick` attribute, it does. Simple demo: https://jsfiddle.net/v11y6kab/. Details in the docs for [`trigger`](http://api.jquery.com/trigger/). – Heretic Monkey Feb 02 '17 at 23:18
  • Possible duplicate of [Trigger a button click with JavaScript on the Enter key in a text box](http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box) – Heretic Monkey Feb 02 '17 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 Feb 02 '17 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 `` does work with `$.change()`... /shrug – mhodges Feb 02 '17 at 23:35
  • @MikeMcCaughan. I saw that thread and actually used its solution but that did not quite work out for me. I've also remove the 'javascript' part from the xmlhttpPost call and indeed it works just fine. – zagpoint Feb 03 '17 at 00:06

3 Answers3

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>
Jack Brown
  • 5,802
  • 2
  • 12
  • 27
  • Yep works for me on a chrome browser. Whenever I select the text field and press enter I get an alert dialog. – Jack Brown Feb 03 '17 at 14:55
  • 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. – GolezTrol Feb 03 '17 at 19:16
  • .onchange triggers an event when the user commits a change to the value of the text field that it is attached to. – Jonathan Pool Mar 12 '18 at 19:36
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.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • Cannot do that as I am trying to avoid a page reload. – zagpoint Feb 02 '17 at 23:21
  • 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. – GolezTrol Feb 02 '17 at 23:44
  • Care to elaborate a bit (preferably with some sample code;-) on how to create an onsubmit() listener to prevent a page reload? – zagpoint Feb 03 '17 at 00:14
  • Paste that exact phrase *"onsubmit() listener to prevent a page reload"* into Google, and you'll find 4 SO questions ([this](http://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted), [this](http://stackoverflow.com/questions/5150532/how-do-i-stop-the-form-from-reloading-using-javascript), [this](http://stackoverflow.com/questions/27018422/prevent-page-from-reloading-after-form-submit) and [this](http://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit)) as the first 4 results. Surely you can find a solution there. :-) – GolezTrol Feb 03 '17 at 10:08
  • 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. – GolezTrol Feb 03 '17 at 10:14
0

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

xlm
  • 6,854
  • 14
  • 53
  • 55
Marc Puigventós Sanz
  • 188
  • 8