title: Javascript and Cross Origin
body: <p>i've been working on a lookup using a third party API, so someone completes a form, submits it, this then looks up the record at the third party and returns an array.</p>
  
  <p>I've got it working on 2 seperate pages but i'd like to roll it into one page and remove the need for a refresh, I looked at converting the code and using and xhr request to get the data but the thrid party have said it wont work because they don't support Cross Origin data/lookups.</p>
  
  <p>I know tha PHP and Javascript are totally different and that PHP is executed server side but is there a way to use OnClick on the button to pass the form data using php get the results then pass that to javascript?</p>
  
  <p>any help or pointers would be greatly appreciated</p>
  
  <p>so in short i wanted to be able to condense these 2 pages into one so they enter the lookup details, click submit, it then runs the lookup from page 2 and fills in the second form.</p>
  
  <p>Code is as followS:
  page 1:</p>
  
  <pre><code>&lt;?php
  //login and get authtoken
  $curl = curl_init();
  
  curl_setopt_array($curl, array(
    CURLOPT_URL =&gt; "https://thirdpartyurl.com",
    CURLOPT_RETURNTRANSFER =&gt; true,
    CURLOPT_ENCODING =&gt; "",
    CURLOPT_MAXREDIRS =&gt; 10,
    CURLOPT_TIMEOUT =&gt; 30,
    CURLOPT_HTTP_VERSION =&gt; CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST =&gt; "POST",
    CURLOPT_POSTFIELDS =&gt; "{\r\n\"grant_type\" : \"client_credentials\",\r\n\"client_id\" : \"NEWTOCODE\",\r\n\"client_secret\": \"PASSHERE\"\r\n}\r\n",
    CURLOPT_HTTPHEADER =&gt; array(
      "accept: application/json",
      "authorization: Bearer da97e45a4690fb34fe409571a40ef325412d576b",
      "cache-control: no-cache",
      "content-type: application/json",
  
    ),
  ));
  
  //  $response = curl_exec($curl);
  
  
  curl_close($curl);
  
  
  ?&gt;
  
  &lt;div id="content" class="full-width" style="padding-left: 100px;"&gt;
  &lt;p&gt;For demo purposes only &lt;/p&gt;
  
  
         &lt;form method="post" action="page2.php"&gt; 
    &lt;label for="Name"&gt;Name&lt;/label&gt;  &lt;input type="text" name="Name" value=""&gt; &lt;br/&gt;
    &lt;label for="email"&gt;Email&lt;/label&gt;  &lt;input type="text" name="Email" value=""&gt; &lt;br/&gt;
   &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt; 
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Page 2:</p>
  
  <pre><code>&lt;?php
  $NAME1= $_POST["name"];
  $Email= $_POST["email"];
  $curl = curl_init();
  // complete lookup using posted data
  curl_setopt_array($curl, array(
    CURLOPT_URL =&gt; "https://thirdpartyurl.com/lookup",
    CURLOPT_RETURNTRANSFER =&gt; true,
    CURLOPT_ENCODING =&gt; "",
    CURLOPT_MAXREDIRS =&gt; 10,
    CURLOPT_TIMEOUT =&gt; 30,
    CURLOPT_HTTP_VERSION =&gt; CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST =&gt; "POST",
    CURLOPT_POSTFIELDS =&gt; "{\r\n   \"NAME\": \"$NAME1\",\r\n   \"EMAIL\":\"$EMAIL1\"\r\n}",
    CURLOPT_HTTPHEADER =&gt; array(
      "accept: application/thirdpartyurl.com.v2+json",
      "authorization: Bearer 6323arad0",
      "cache-control: no-cache",
      "content-type: application/thirdpartyurl.com.v2+json",
  
    ),
  ));
  
  $response = curl_exec($curl);
  
  curl_close($curl);
  
  
  $userData = json_decode($response, TRUE);
  
  
  ?&gt;
  &lt;form&gt;
   &lt;label for="Name"&gt;Name&lt;/label&gt;  &lt;input type="text" name="Name" value=""&gt; &lt;br/&gt;
    &lt;label for="Email"&gt;Mileage&lt;/label&gt;  &lt;input type="text" name="Email" value=""&gt; &lt;br/&gt;
   &lt;label for="add1"&gt;address1&lt;/label&gt;  &lt;input type="text" name="add1" value=""&gt; &lt;br/&gt;
   &lt;label for="add2"&gt;address2&lt;/label&gt;  &lt;input type="text" name="add2" value=""&gt; &lt;br/&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
  // pass PHP array to JavaScript array
  var userDetails = &lt;?php echo $response ?&gt;;
  
  
  
  var name = userDetails['user']['personal']['name'];
  var email= userDetails['user']['personal']['email'];
  var add1= userDetails['add1'];
  var add2 = userDetails['add2'];
  
  
  //populate new form
  document.getElementsByName("Name")[0].value = name;
  document.getElementsByName("Email")[0].value = email;
  document.getElementsByName("add1")[0].value = add1;
  document.getElementsByName("add2")[0].value = add2;
  &lt;/script&gt;
  </code></pre>