Browser independent javascript

Question

Why is the behaviour of this code different in each browser? What should I change to accomplish the same behaviour in all of them? In Firefox it is fine, it uses the url /some/path/?searchedText=sometext, in IE it does nothing when I click on inputButton and in Chrome it fails because it encodes ? like this: /some/path/%3FsearchedText=sometext instead of the /some/path/?searchedText=sometext

html

<input id="inputText" type="text" class="form-control" placeholder="Searched text"> <input id="inputButton" type='button' value='Search' class="btn" onclick="myFunction()"/>

javascript

function myFunction() {
var text = document.getElementById('inputText').value;
var location = "some/path/?searchedText=";
window.location.pathname = location + text;
}

• user663031: What version of IE?
• T.Poe: It is the newest version 11.

Answer 1

You are using window.location.pathname which is great way to avoid explicity passing the starting (http://www.something.com) hostname but it also treats query string as path and therefore encodes them you can avoid that by manully constructing each url component and then use window.location.href

function myFunction() {
 var text = document.getElementById('inputText').value;
 var protocol = window.location.protocol;
 var hostname = window.location.hostname;
 var url = protocol + '//' + hostname + "/some/path?searchedText=" + text;
 window.location.href = url;
}

Answer 2

You could use the property search.

window.location.search = '?searchedText=' + text;