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

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 !

Answers:

Answer

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"]);
?>
Answer

I had a similar issue, needed to add authentication header name and authentication token value in the HTTP POST request headers. Added this javascript interceptor function in one of the JSPs that forms the HTML panel that's part of every page in the web application.

// this will add employee authentication headers to every ajax call
(function() {
    var site = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function() {
        this.setRequestHeader("${employee.role.header}", "${employee.auth.secret}")
        return site.apply(this, [].slice.call(arguments));
    };
})();

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.