0

Hey so right now i have the code below that functions as a Ctrl+F search but within a search box. The website im using this on only have one code area so i need the code to function within the same one.

The code below does what i want it to do but at this moment we need to click on the search button the first time and then we can follow up with enter after that. What i want it to do is make it possible to accept the enter key from the start and at the same time have the button as an option.

Is this possible? 

<!--BEGIN SEARCH BOX -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
<div class="search_box">
<div><input id="search" type="textarea" /> <input id="submit_form" onclick="checkInput()" type="button" value="Sök" /></div>

<div>&nbsp;</div>

<div>
<p>2019-11-11 - 2020-01-10 - Testing line 837<br />
<a href="">PDF</a></p>

<p>2019-11-04 - 2019-11-24 - Testing 2, line 607, 627, 697<br />
<a href="">PDF</a></p>

<p>2019-10-30 - 2019-11-29 - Testing 3, line 55, 75, 291<br />
<a href="">PDF</a></p>

<p>2019-10-31 - 2019-11-04 - Testing 4, line 423,424<br />
<a href="">PDF</a></p>
</div>
</div>
<!--END SEARCH BOX --><script>
    function checkInput() {
        var query = document.getElementById('search').value;
        window.find(query);
        return true;
    }                           
</script>
JorgeB
  • 103
  • 2
  • 9
Robert
  • 13
  • 1

3 Answers3

0

Your input type is a textarea, so hitting Enter will be interpreted as creating a new line within that box. Change it to:

<input id="search" type="text" />

for a single line text field, and Enter will submit the form. Which, by the way, you should probably enclose your inputs in, and change button type to submit:

<form onsubmit="checkInput()">
<input id="search" type="text" /> <input id="submit_form" type="submit" value="Sök" />
</form>
Thomas Timbul
  • 1,634
  • 6
  • 14
  • Thank you for the answer Thomas! This works better but now it reloads my page as soon as i click enter tho – Robert Nov 08 '19 at 11:45
  • return false from your javascript function to stop submission of the form. – Thomas Timbul Nov 08 '19 at 11:47
  • its not making a difference for me, although the site im putting this on works as database for our company in which we search for guides. This means my code area is limited and i now notice that when i use the
    tag and ones i save and enter the code area again that tag is removed. I guess it does not like that tag :/
     – Robert Nov 08 '19 at 12:12
0

If i only use the following it works even if i have return set to true or false. It works almost perfectly, if i type anything in the box i need to click the button the first time and can then continue by clicking enter on my keyboard and it continues the search going down. I just have to click the button the first time and thats what annoys me :/

<div><input id="search" type="text" /> <input id="submit_form" onclick="checkInput()" type="button" value="Sök" /></div>

the "onclick" is what i want as onsubmit i guess but i cant just change that to onsubmit couse that will brake it.

Robert
  • 13
  • 1
0

You have indicated that you cannot use a form tag due to restrictions on your hosting system. I dare say that your company may need to look into that, but a workaround solution may be to catch the Enter keypress on your input, as described here: execute function on enter key

In your case this might look like this:

var searchbox = document.getElementById("search");
searchbox.addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
        checkInput();
    }
});
Thomas Timbul
  • 1,634
  • 6
  • 14