How to add Header Authorization for POST FORM using JS/AJAX/JQUERY?

javascript jquery ajax header authorization

36,850

Its bit late but still posting the answer for future readers who might face the same issue. Please do not provide the form submit url (action) and method type (POST) inside the html code when it is explicitly mentioned inside the ajax request. Notice the corresponding changes added in the code snippets given.

Html form code :

            <form><!---Removed form submit url-->
            <input type="text" id="keyName" value="testValue">
            <!---Id attribute added to input field to be submitted--->
            <input type="button" onclick="myFunction()" value="Submit">
            <!---Input type is button NOT submit--->
            </form>

Javascript code:

function myFunction(){
var dataValue = $("#keyName").val();
$.ajax({
            type : 'POST',
            //remove the .php from results.php.php
            url : "http://externalsite.cpm/results.php",
            //Add the request header
            headers : {
                Authorization : 'Bearer ' + 'XXXXXXXXXXXXXXXXXXXXXXXXX'
            },
            contentType : 'application/x-www-form-urlencoded',
            //Add form data
            data : {keyName : dataValue},
            success : function(response) {
                console.log(response);
            },
            error : function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err);                   
            }
        }); //End of Ajax
}   // End of myFucntion

Update :

PHP service results.php

<?php 
     print_r($_POST["keyName"]);
?>

36,850

Author by

Admin

Updated on July 05, 2022

Comments

Admin almost 2 years

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.

The result is probably an xml file (Student Record).Need to pull and show it as result.

Tried a lot using $.Ajax and jquery in vain. Please help.

[1]: http://i.stack.imgur.com/rDO6Z. jpg [2]: http://i.stack.imgur.com/92uTh. jpg

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 + "&email=" + email);

<body>

<form action="http://externalsite.cpm/results.php" method="post" >
	Enter Your Name<br>
	<input type="text" name="name" >
	<br>
	<input type="submit" onclick="myFunction()" value="Submit">
	
</body>

How do I add this header authorization when submitting values from my page to external php? Please Help !