title: How to add Header Authorization for POST FORM using JS/AJAX/JQUERY?
body: <p>I wanna get inputs using a form on my page and submit those values to a php hosted on another external site. Request maker extension shows the Header Authorization being passed along with other inputs when submitting data on the external site.</p>
  
  <p>The result is probably an xml file (Student Record).Need to pull and show it as result.</p>
  
  <p>Tried a lot using $.Ajax and jquery in vain. Please help.</p>
  
  <p>[1]: <a href="http://i.stack.imgur.com/rDO6Z" rel="nofollow">http://i.stack.imgur.com/rDO6Z</a>. jpg
   [2]: <a href="http://i.stack.imgur.com/92uTh" rel="nofollow">http://i.stack.imgur.com/92uTh</a>. jpg</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
  var name = document.getElementById("name").value;
  
  // AJAX code to submit form.
  $.ajax({
  type: "POST",
  url: "http://externalsite.cpm/results.php.php",
  data: dataString,
    beforeSend: function(xhr) {
   
      xhr.setRequestHeader('Authorization', "Basic XXXXXXXXXXXXXXXXXXXXXXXXX" );   or xhr.setRequestHeader('Authorization', "Basic " +btoa(ser_user + ':' + ser_pass));
        },
  cache: false,
  success: ???
  
  
  xmlhttp.open("POST","your_url.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("name=" + name + "&amp;email=" + email);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
  &lt;form action="http://externalsite.cpm/results.php" method="post" &gt;
   Enter Your Name&lt;br&gt;
   &lt;input type="text" name="name" &gt;
   &lt;br&gt;
   &lt;input type="submit" onclick="myFunction()" value="Submit"&gt;
   
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I add this header authorization when submitting values from my page to external php? Please Help !</p>