2

Completely flummoxed after going over and over this problem for hours. Have tried a large number of approaches, without success.

Intent is to send login form data to PHP and have PHP return the result of an API call.

My latest approach is to have form onSubmit in login.html call myFunction() which performs POST call to n_authorise.php for some server side processing. In future the PHP will return API secrets. For my testing I stripped back the PHP to echo back the user input extracted from the $_POST global.

No matter what combinations of form ACTION / SUBMIT or XMLHttpRequest structures I try, I can't seem to pass the $_POST from the HTML to the PHP. I repeatedly get "Undefined index" from the PHP suggesting the $_POST is not populated.

I have tried action="n_authorise.php" directly in the form (avoiding myFunction() ) but this either fails or when it does work loads the PHP file to the browser NOT just returning the result.

I am so frustrated as it has to be possible and I can see from other postings that they have had (and resolved) similar problems... I just can't crack it, so asking the experts! Thanks in advance.

My HTML in file login.html :

<html>
  <head>
    <script>
      function myFunction() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
          }
        };
        xmlhttp.open("post", "n_authorise.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send();
      }
    </script>
  </head>

  <body>
      <form name="loginform" onsubmit="myFunction()" method="post">
      <input type="text" name="t_username" id="t_username" placeholder="Username" required autofocus>
      <input type="password" name="t_password" id="t_password" placeholder="Password" required>
      <input name ="submit" type="submit" value="submit">
      </form>
  </body>
</html>

My minimal PHP in file n_authorise.php

<?php
$email = $_POST["t_username"];
$password = $_POST["t_password"];
echo $email . " " . $password;
?>

Expected result is for alert box to display entered email & password (this would be replaced in final version).

Note: I have tried with and without xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");. In fact, I think I've tried nearly every possible combination of code without success... yet.

GCOR71
  • 21
  • 2
  • 1
    I think you miss some thing please read this: https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp also in PHP use the isset function to prevent undefined errors – Baracuda078 Sep 10 '20 at 10:03
  • 1
    you are not adding any parameters to your xmlhttp-request .... – john Smith Sep 10 '20 at 10:04
  • @Baracuda078 - that's one of the many sources I've read (multiple times) but I can't see what I'm missing. Will add isset function once I know I can get this simplest of examples working. – GCOR71 Sep 10 '20 at 10:06
  • 1
    You need to add the data you whant to send in the ` xmlhttp.send();` function like in the post request example on w3schools hope that will help you – Baracuda078 Sep 10 '20 at 10:08
  • @johnSmith - thanks - I'm wanting to make use of the $_POST global in the PHP. How to I ensure that is passed (I understand it can't be accessed on the client side)? – GCOR71 Sep 10 '20 at 10:08
  • you can check the network inspector of your browsers dev-tools, you will find the request and it´s parameters there, if the method is POST those parameters will be avail in $_POST – john Smith Sep 10 '20 at 10:09
  • Thank you both for your VERY fast and helpful support. – GCOR71 Sep 10 '20 at 10:19

2 Answers2

1

This is a most simple answer:

you are not adding any parameters to your request, you could do it with native js like this:

var form = document.querySelector('form'); // <-- extend this to select your form, maybe add an id to select
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);  // <----- this way the form data is appended
john Smith
  • 17,409
  • 11
  • 76
  • 117
  • BRILLIANT! So simple. +1 Answer! Thank you!! – GCOR71 Sep 10 '20 at 10:18
  • @GCOR71 Your form tag can have a unique class name or id if you dont use that and have multiple forms on yours page the queryselector('form') will get all forms or just the first one(I'm not sure) add an id to your form tag like `id="form1"` then you use `#form1` in your selector – Baracuda078 Sep 10 '20 at 10:19
0

Based on the above - sharing working code with humble thanks. FYI only:

<html>
  <head>
    <script>
      function myFunction() {
        var form = document.querySelector('form.loginform');  // <-------- extended to select new class ID for form
        var data = new FormData(form);  // <-------- 'data' extracts form content
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
          }
        };
        xmlhttp.open("post", "n_authorise.php", true);
        xmlhttp.send(data);  // <-------- 'data' sent to PHP!
      }
    </script>
  </head>

  <body>
      <form name="loginform" class="loginform" onsubmit="myFunction()" method="post">.  // <-------- new class added
        <input type="text" name="t_username" id="t_username" placeholder="Username" required autofocus>
        <input type="password" name="t_password" id="t_password" placeholder="Password" required>
        <input name ="submit" type="submit" value="submit">
      </form>
  </body>
</html>
GCOR71
  • 21
  • 2