CODEWITHSUNDEEP
javascripthtmlbrowser
T.Poe
T.Poe

Reputation: 2079

Browser independent javascript

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;
}

Upvotes: 0

Views: 339

Answers (2)

Vinay
Vinay

Reputation: 7676

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;
}

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386550

You could use the property search.

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

Upvotes: 0

Related Questions