Post request with js fetch to php file

[Godson]

https://kuwalasolutions.com/cdn2/html/addPhones.html

My posted data cannot be retrieved by my PHP file. The Post array is blank, what is the issue?

var formName=document.getElementById(this.id).getAttribute('form');             
    var form=document.getElementById(formName);   
    const bb=scrapeData();    
    console.log(bb);
    const data=fetch('https://kuwalasolutions.com/cdn2/index.php?add=1',{method:'POST',body:bb,headers:{'Accept':'application/json'}}).then(response =>response.text());
   //const dataJ= JSON.parse(data);
    data.then(
            function(value){showData(value)},function(error){alert("failed to add data, please refresh the page.");}
    );

[Admin]

The main issue I see is that you’re just taking bb, which I assume is some Javascript object (but there is no way to tell, because you didn’t include the scrapeData() function here), and dumping it directly into the request body. This will probably cause the data to be sent as JSON. But JSON supports complex data structures, and isn’t mapped to $_POST parameters by PHP itself.

If you want your data to be converted the $_POSTparameters, you’ll probably want to send it as a x-www-form-urlencoded data. And a quick Google search points me to plenty of examples like this one:

How do I POST a x-www-form-urlencoded request using Fetch?

[Godson]

Please give me the example. Because sending the way you are advising is actually putting the data as parameters separated by &, isn’t it?

function scrapeData()
{
    var array=[];
    const formData=document.getElementsByClassName("form-control");
    var p=1;
    var e=1;
    for(var i=0;i<formData.length;i++)
    {
       
        if(formData[i].getAttribute("type")=="number" && formData[i].value!="")
        {           
            array["phone_number_"+p]=formData[i].value;
            p++;
        }
        if(formData[i].getAttribute("type")=="email" && formData[i].value!="")
        {
            array["email_address_"+e]=formData[i].value;
            e++;
        }
    }
    return array;
}

[Admin]

@Godson

Please give me the example.

I already did. Please check it.

@Godson

Because sending the way you are advising is actually putting the data as parameters separated by &, isn’t it?

The data should be formatted like key=value&foo=bar.

And I’m not “advising” that, I’m telling you that that’s the way you MUST format you data if you want to be able to read it as PHP $_POST variables.

You can send whatever data you want in whatever format you want, but then you will have to update your PHP code accordingly. If you want PHP to parse the input data for you, then you need to send the data in a format that PHP understands.

---

Looking at you code, I see something odd:

You’re defining array as:

var array=[];

But then you set variables in the array like so:

array["phone_number_"+p]=formData[i].value;

In PHP, this would work, because “arrays” in PHP are not really arrays, and support things that are not typically possible with arrays. But PHP is quite special in that. In most programming languages, arrays are just lists of items with numbered keys. If you want a key-value structure, you need another data structure for that. In Javascript, that would be an object, not an array.

Setting attributes on an array like this works in Javascript because Javascript has it’s own silliness, but this won’t work as you’d expect. If you want a key-value structure, use objects.