PHP Versions Question posted in
You can find a list of all versions here.

Php versions – How to pass $_POST from HTML script to PHP (getting "Undefined index" error)

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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>

  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search