title: Construct a url from HTML form input using jQuery or Javascript
body: <p>I am trying to construct a URL using the users input from the HTML form after they click on the submit button. Using that, I want to construct a URL that will retrieve data from an API. Down below is my code</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;html&gt;
      &lt;form&gt;
          &lt;label for=&quot;token&quot;&gt;Domain Name: (xxxx.intructure.com)&lt;/label&gt;
          &lt;br&gt;
          &lt;input type=&quot;text&quot; id=&quot;domain&quot; name=&quot;domain&quot; placeholder=&quot;domain&quot;&gt;
          &lt;br&gt;
          &lt;button&gt;Submit&lt;/button&gt;
        &lt;/form&gt;  
  &lt;/html&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>var domain = $('.input[name=domain]').val();
  
  var myUrl = `https://cors-anywhere.herokuapp.com/https://${domain}.instructure.com/api/v1/courses`
  
  var settings = {
    &quot;async&quot;: true,
    &quot;crossDomain&quot;: true,
    &quot;url&quot;: myUrl,
    &quot;method&quot;: &quot;GET&quot;,
    &quot;headers&quot;: {
      &quot;Content-Type&quot;: &quot;application/x-www-form-urlencoded&quot;,
      &quot;Authorization&quot;: &quot;Bearer 8415~GFtFLYvN4M9iuiIppWycSHqbC54nfDQMMnbJAOXhJp9efTK04GE6XxWsOq6qFniY&quot;
    }
  }
  
  $.ajax(settings).done(function (response) {
      console.log(response) 
  })
  
  </code></pre>