Image tag onclick event not working when you click enter

Question

Hi and thanks for the help in advance!

I'm currently working in SharePoint 2010. I have a search box that uses an image onclick() event to fire the search. It works great when you click the image icon but doesn't work at all when you click enter once in the text box. Here is the code for the button.

<div style="position:relative; top:-3px; ">
  <label for="Search"><b>SEARCH</b>
  </label>&nbsp;&nbsp;&nbsp;
  <label for="Content">
    <input id="Content" type="radio" name="radiou" value="URL" checked="checked" style="margin-bottom:5px" />Content</label>
  <label for="Employees">
    <input id="Employee" type="radio" name="radiou" value="URL" style="margin-bottom:5px" />Employee</label>
  <input id="search_txt" title="Enter search words" type="text" name="k" maxlength="80" size="25" />&nbsp;
  <img src="/Style Library/Images/Search_button.png" onclick="submitSearch()" alt="Search Button" style="margin:0px; position:relative; top:7px; width:30px;"></img>
</div>

Here is the javascript that activates the code on button click. I'd like this to also be fired after typing a term and clicking the Enter key.

< script type = "text/javascript"
language = "JavaScript" >
  // <![CDATA[  
  function submitSearch() {
    var radiovals = document.getElementsByName("radiou");
    var hostnameforsearch = window.location.hostname;
    if (radiovals[0].checked) {
      queryVal = $('#search_txt').val();
      var searchUrl = 'http://' + hostnameforsearch + '/search/results.aspx?k=' + queryVal + '&u=' + hostnameforsearch + '&cs=This Site';
      window.location = searchUrl;
      return false;
    } else {
      queryVal = $('#search_txt').val();
      window.open('http://search.URL.com/Pages/PeopleResults.aspx?k=' + queryVal);
    };

  }; // ]]>
< /script>

Thanks for all the help! Ken

So, what you actually want is to call submitSearch() when the user press enter in te input? — Louis Castro, Aug 14 '15 at 16:36
Thanks for responding Louis.... Yes... User types in the search text box and hits enter and the search executes. I can't use form tags due to nested form issues. — Kenneth Kerr, Aug 14 '15 at 16:38
Hi mplungjan... You can't have a form nested in another form... I blew up the page several times and from what I am reading this is not acceptable in HTML — Kenneth Kerr, Aug 14 '15 at 17:32
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) — Michał Perłakowski, Jan 22 '16 at 08:54

Farhan · Answer 1 · 2015-08-14T16:56:48.850

0

Use javascript to detect enter key pressed and then submit

$(document).ready(function(){
$("#search_txt").on("keyup",function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
     if(code == 13) { //Enter keycode
       submitSearch();
     }
    });
});

demo : https://jsfiddle.net/farhanbaloch/devevwwy/

edited Aug 14 '15 at 16:56

answered Aug 14 '15 at 16:38

Farhan

1,453
2
15
20

Thanks Farhan I will try that now. – Kenneth Kerr Aug 14 '15 at 16:40
Farhan can you please incorporate into the code I provided. I'm unaware of where this should be placed. I appreciate your help! – Kenneth Kerr Aug 14 '15 at 16:53
just place this anywhere or if you already have document.ready function then place inner keyup function anywhere on your page – Farhan Aug 14 '15 at 16:57
You need to include jquery as well – Farhan Aug 14 '15 at 16:57
demo will not properly work as form submit url is not secured that is is not https – Farhan Aug 14 '15 at 17:01
That worked great.... Thanks so much for the help and visual display in the jsfiddle.net project. Greatly appreciated. – Kenneth Kerr Aug 14 '15 at 17:16

score 0 · Answer 2 · answered Aug 14 '15 at 16:40

0

Use <form> instead of <div> and attach event handler to submit event on form.

answered Aug 14 '15 at 16:40

Michał Perłakowski

88,409
26
156
177

Hi Gothdo! I can't have a nested form tag and the other one I can't remove or reposition or the whole thing explodes. – Kenneth Kerr Aug 14 '15 at 16:44

score 0 · Answer 3 · answered Aug 14 '15 at 16:42

0

Well, it's simple you don't have any reference to submitSearch in the input.

<input id="Employee" type="radio" name="radiou" value="URL" style="margin-bottom:5px" onkeydown="keyPressed(event)"/>Employee</label>

Then in your code

function keyPressed(e){
   if(e.which==13){
     submitSearch()
   }
}

answered Aug 14 '15 at 16:42

Louis Castro

104
2
6

This would have worked also Louis. Thanks for your help also! – Kenneth Kerr Aug 14 '15 at 17:16

score -1 · Accepted Answer · answered Aug 14 '15 at 17:19

Here is what worked for me...

Javascript

function submitSearch() {
  var radiovals = document.getElementsByName("radiou");
  var hostnameforsearch = window.location.hostname;
  if (radiovals[0].checked) {
    queryVal = $('#search_txt').val();
    var searchUrl = 'http://' + hostnameforsearch + '/search/results.aspx?k=' + queryVal + '&u=' + hostnameforsearch + '&cs=This Site';
    window.location = searchUrl;
    return false;
  } else {
    queryVal = $('#search_txt').val();
    window.open('http://search.URL.com/Pages/PeopleResults.aspx?k=' + queryVal);
  };

};

$(document).ready(function() {
  $("#search_txt").on("keyup", function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode
      submitSearch();
    }
  });
});

Missing event handler

<img src="/Style Library/Images/Search_button.png" onclick="submitSearch()" onkeydown="keyPressed(event)" alt="Search Button" style="margin-bottom:0px; width:30px;"></img>

Image tag onclick event not working when you click enter

4 Answers4