Retrieve multiple input from an AJAX request sent using POST

Question

function openV(){
var obj=document.getElementById("name").name+"="+document.getElementById("name").value+"&"+document.getElementById("comp").name+"="+document.getElementById('comp').value+"&"+document.getElementById('pass').name+"="+document.getElementById('pass').value;`

var oReq = new XMLHttpRequest();
oReq.onreadystatechange=function() {
if(this.readyState==4&&this.status==200){
window.alert(this.responseText);}
};
oReq.open("POST", "Validiation.php","true");
oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
oReq.send(obj);}

My PHP code looks like :

<?php

$name=$_REQUEST["name"];
$company=$_REQUEST["company"];
$password=$_REQUEST["password"];   

//Create Connection
$conn=new mysqli("127.0.0.1","root","");

//Check Connection
if($conn->connect_error)
{
    die('Connection error:'.$conn->connect_error);
    }
echo 'Connection successful Mr '.$name;
echo 'Company: '.$company;
?>

I am able to access $name but the problem is that I cannot access $company in my code.

The alert message says : Connection successful Mr SidharthCompany:

Answer 1

I think you should check your element name of document.getElementById("comp").name Change :

$company=$_REQUEST["company"];

To:

$company=$_REQUEST["comp"];

Answer 2

You get the name =>

$ _request ['name'] 

for #name Your company =>

$ _request ['company'] 

but its id #comp

Answer 3

function openV(){
    var $=function(n){
        return document.getElementById( n );
    };
    var obj=[];
    ['name','comp','pass'].forEach(function(e,i,a){
        obj.push( $(e).name+'='+$(e).value );
    });
    obj=obj.join('&');


    var oReq = new XMLHttpRequest();
    oReq.onreadystatechange=function() {
        if( this.readyState==4 && this.status==200 ){
            alert(this.response);
        }
    };
    oReq.open('POST', 'Validiation.php','true');
    oReq.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    oReq.send(obj);
}

As the Ajax function is sending POST requests then the PHP script ought to process the POST array. Using REQUEST allows users to send a querystring (GET) or POST request so is a little less secure than just processing POST.

The fields the PHP script needs to work with, it would appear, are name , comp and pass but as the javascript is using the ID to find the NAME of the element that might not be the case. The ID could, for instance, be name but the name might be geronimo for all we know - which makes processing on the PHP side tricky as the names are not necessarily known.

However, assuming that the name and the ID for each form element are the same then you would/could process the request, server-side, like this.

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){

        $name=$_POST["name"];
        $company=$_POST["comp"];
        $password=$_POST["pass"];   

        //Create Connection
        $conn=new mysqli("127.0.0.1","root","");

        //Check Connection - in production never reveal too much/any db information!!!
        if( $conn->connect_error ) die('Connection error:'.$conn->connect_error);

        echo 'Connection successful Mr '.$name;
        echo 'Company: '.$company;
    }
?>

Answer 4

There is a difference between the form inputs naming and expected parameters from the _REQUEST - you expect:

$company=$_REQUEST["company"];
$password=$_REQUEST["password"];  

But actual form input names are 'comp' and 'pass' /according to the JS, that gets the input fields and if the form input ids are equal to the form input names/. If the JS is right, then you need to change the PHP to expect the corresponding params:

$company=$_REQUEST["comp"];
$password=$_REQUEST["pass"];  

But if the input names in the JS part is wrong, then you need to fix the JS:

    var obj=document.getElementById("name").name+"="+document.getElementById("name").value+"&"+document.getElementById("company").name+"="+document.getElementById('company').value+"&"+document.getElementById('password').name+"="+document.getElementById('password').value;

Answer 5

I corrected it. First it uses name attribute to identify the variable. Second I changed the id of all the elements so now the code is this.
: ：

var obj=document.getElementById("nam").name+"="+document.getElementById("nam").value+"&"+document.getElementById("comp").name+"="+document.getElementById("comp").value+"&"+document.getElementById("pass").name+"="+document.getElementById("pass").value;

//Creating the XMLHttpRequest object
var oReq = new XMLHttpRequest();


oReq.onreadystatechange=function() {
    //This is where you response is handled.
    //The actual data is found on this.responseText
    if(this.readyState==4&&this.status==200){
        window.alert(this.responseText);}
        };

oReq.open("POST", "Validiation.php","true");
oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
oReq.send(obj);
}

<?php
$name=$_POST["name"];
$company=$_POST["company"];
$password=$_POST["password"];

//Create Connection
$conn=new mysqli("localhost","root","");

//Check Connection
if($conn->connect_error)
{
    die('Connection error:'.$conn->connect_error);
    }
echo 'Connection successful Mr '.$name;
echo 'Company: '.$company;?>