title: Force spaces to convert to %20 from HTML input field using js or jQuery
body: <p>Hello I have an input field on my site which people can enter search terms.</p>
  
  <p>I am taking the value of the users input and spitting it out onto a url string.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery("#searchButton").click(function(){
      var simpleSearchTermLocal = jQuery('#searchField').val();
      var urlString = "www.mysite.com/" + simpleSearchTermLocal;
      alert(urlString);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" id="searchField" /&gt;
  &lt;button id="searchButton"&gt;search&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So when someone inputs something like "ABC" into the search field, the value of variable <code>urlString</code> becomes <code>www.mysite.com/ABC</code> which is fine.</p>
  
  <p>But when entering a space in the input field, like "ABC 123", <code>urlString</code> becomes <code>www.mysite.com/ABC 123</code> which isnt fine. I would like it to turn into <code>www.mysite.com/ABC%20123</code></p>
  
  <p>Any suggestions?</p>
  
  <p>Thanks</p>