Input value sometimes doesn't apply

Question

To be straightforward, on a page, there is a search input.

var input = document.getElementById('search-input');

function handle(e) {
  if (e.keyCode === 13) {
    window.location = '../?s=' + input.value;
  }
}

<div class="search-form-mobile">
  <input type="text" id="search-input" onkeypress="handle(event)" class="form-control" placeholder="Search">
</div>

I know that this is a correct JavaScript code, but my question is, why does it sometimes accepts the input value and sometimes it doesn't? I've been scratching my head for a while and can't figure out what's wrong.

Should I wrap it up in a <form> or can i leave it like that?

The <script> is at the very bottom in footer.php.

It's a WordPress site.

what do you mean by sometimes accepts the input value and sometimes it doesn't — Sanchit Patiyal, Oct 29 '17 at 21:44
Sometimes it returns the input value (string) and sometimes it returns `null`. — Vladimir Jovanović, Oct 29 '17 at 21:45
Yeah it doesn't return `null` for couple of times, but there comes a period where it does return `null` and after sometime it returns the value and then `null` again and so on. — Vladimir Jovanović, Oct 29 '17 at 21:51
As you suggests yourself, I would use a `
` element as it will by default submit the form when enter is pressed. If you need a custom handler, I'd recommend you use an event listener over an inline `onkeypress` attribute. Try `input.onEventListener('onkeyup', function(e) { //... }`. — agrm, Oct 29 '17 at 22:03

tao · Accepted Answer · 2017-10-29T22:43:54.923

1

Use onkeydown (or onkeyup, if you want the event to fire when the key is released, not when pressed) instead of onkeypress.

You can find a full list of keys that fire onkeypress event here.

Following the comments, it looks like this is not a JavaScript issue at all, but has to do with escaping the query string, specifically about what characters you can and cannot use without escaping in a $_GET parameter.

This has been asked and answered before.

edited Oct 29 '17 at 22:43

answered Oct 29 '17 at 21:55

tao

82,996
16
114
150

It works. I'll do some QA, and if it returns the `string` a couple of times in a row in different browsers, I'll vote up and verify the answer. – Vladimir Jovanović Oct 29 '17 at 22:00
Worked for the first time, tried one more time, doesn't work anymore. I'll wrap it up in a `
` and see if that helps. I'll leave `onkeydown` instead of `onkeypress`.
– Vladimir Jovanović Oct 29 '17 at 22:02
Could you set up a [mcve]? I believe the problem is not with the code itself, but with how you (re)initiate it after you change `window.location`. – tao Oct 29 '17 at 22:03
Go to www.karnopedia.com. In the search form type anything. The url should be `www.karnopedia.com/?s=input.value`. As of now, sometimes it accepts `?s=input.value` and sometimes the url is `?s=` when it should return the `input value` every time. It's a multilingual site, so when switching to other language it should be `www.karnopedia.com/sr/?s=input.value` for example. – Vladimir Jovanović Oct 29 '17 at 22:19
It works every single time for me with Chrome, on both Win and Ubuntu. However, you should escape the search string, If I search for `something&something=else` I get to pass `$_GET` params inside the field. It's not a real risk, but it still shouldn't happen. Another interesting case is searching for `irrelevant&s=relevant`. Regardless, can you provide any info on how you're testing this? Is there any error in your browser's console? – tao Oct 29 '17 at 22:35
I was testing with Chrome, Firefox and Edge. All on Windows. No, I forgot to watch the console in dev tools. I forgot the most important thing as a developer, sorry for that. About the params, it doesn't matter, people will only search for **one word** anyways. I'll monitor the search via dev console, but I will upvote your answer and verify it. – Vladimir Jovanović Oct 29 '17 at 22:44
The console is clean on Chrome. At this point it's not very clear what your are asking, though. The JavaScript your reported as malfunctioning seems to work fine. Could you provide an example in which it does not? What's the query string, what's the expected result and what's the actual result, eventually specifying browser/OS/device, if relevant? – tao Oct 29 '17 at 22:50
Just one more question, how can i keep the language attribute? For example if I switch the language, the site is now `www.karnopedia.com/sr/` but if search for something it deletes the `/sr/` and returns the url like `www.karnopedia.com/?s=input.query`. How do I search on Google, on how to keep the language attribute and to add `/?s=input.query` so that the end result is `www.karnopedia.com/sr/?s=inpute.value` ? – Vladimir Jovanović Oct 29 '17 at 22:51
That's a completely different question. If I try to answer it here, it will only help you, and that's violating the basic principle of SO (provide an answer once, help many future visitors). In particular, there are three distinct ways to organize multilingual content. You should document first, see which fits your bill and ask when something doesn't work as expected. – tao Oct 29 '17 at 22:54
1

Yeah, I get it. Thank you so much for your help and your time, I appreciate it. – Vladimir Jovanović Oct 29 '17 at 22:58

Input value sometimes doesn't apply

1 Answers1