4

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]: https://i.stack.imgur.com/rDO6Z. jpg [2]: https://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 !

Nagama Inamdar
  • 2,851
  • 22
  • 39
  • 48
Christo Raj
  • 41
  • 1
  • 1
  • 4

2 Answers2

3

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"]);
?>
Nagama Inamdar
  • 2,851
  • 22
  • 39
  • 48
  • Thanks for your response. I tried this but on clicking Submit nothing happens. I would really appreciate if you could set up a working jsfiddle. Thanks in advance. – Christo Raj Oct 25 '15 at 08:00
  • Updated the post. You will have to host the php service in that case.Press F12 on your web page & then open the console to see the response loggers. – Nagama Inamdar Oct 26 '15 at 07:57
  • Almost there. On submitting I get the following response in the console XMLHttpRequest cannot load http://externalsite.com/results.php . Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://subdomain.externalsite.com' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access. But using a chrome extention called "Access-Control-Allow-Origin (CORS)" I was able to submit and get the desired result successfully. – Christo Raj Oct 27 '15 at 18:35
  • How to submit successfully without using any extention? I do not have any control on www.externalsite.com. I just need to submit the value from my page to their php and get the output. P.S : I do have permission from www.externalsite.com but they won't modify anything from their side on their site or php. – Christo Raj Oct 27 '15 at 18:36
-1

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));
    };
})();
Himadri Pant
  • 2,171
  • 21
  • 22