Ajax is not sending the data I set to php-CodePudding

I am trying to send form data to php using ajax but it's not working and I searshed alot without fining anyy solution `

this is the ajax code in my index.js `

$("#reg_form").submit(function (event) {
    
    alert("clicked")
    var registerData = {
        ajxfname: document.getElementById("fnameInput").value,
        ajxlname: document.getElementById("lnameInput").value,
        ajxemail: document.getElementById("emailInput").value,
        test: "this is test text"
    };

    $.ajax({
        type: "POST",
        url: "server.php",
        data: registerData,
        dataType: "json",
        success: function (response) {
            alert("success");
        }
    });
     event.preventDefault();

});

this is the code I use to print the data that I got in server.php

foreach ($_POST as $key => $value) {
    echo $key;
    echo "  : ";
    echo $value;
    echo "<br>";
}

it just print the names and the data of the input in the form(fname,lname,email) in the html

and this is the form in the html `

 <form id="reg_form"  action="server.php" method="post" >

                <input  id="fnameInput" name="fname" placeholder="First name" type="text">

                <input  id="lnameInput" name="lname" placeholder="Last name" type="text">

                <input  id="emailInput" name="email" placeholder="E-mail" type="text">

                <button  type="submit" >Sign up</button>

thanks in advance

CodePudding user response：

Just try below eg:

$("#reg_form").submit(function (event) {
    event.preventDefault();
    alert("clicked")

    var formData = {
      fname: $("#fnameInput").val(),
      lname: $("#lnameInput").val(),
      email: $("#emailInput").val(),
    };

    $.ajax({
        type: "POST",
        url: "server.php",
        data: formData,
        dataType: "json",
        success: function (response) {
            alert("success");
        }
    });
});

$("#reg_form").submit(function (event) {
    event.preventDefault();
    alert("clicked")
    var form = $(this);
    $.ajax({
        type: "POST",
        url: "server.php",
        data: form.serialize(),
        dataType: "json",
        success: function (response) {
            alert("success");
        }
    });
});

In PHP

extract($_POST);
    foreach ($_POST as $key => $value) {
        echo $key;
        echo "  : ";
        echo $value;
        echo "<br>";
    }

CodePudding user response：

Jquery Ajax is to old i think you can use javascript Fetch try this

$("#reg_form").submit(function (event) {
     event.preventDefault();

    alert("clicked")
    const registerData = {
        ajxfname: document.getElementById("fnameInput").value,
        ajxlname: document.getElementById("lnameInput").value,
        ajxemail: document.getElementById("emailInput").value,
        test: "this is test text"
    };

// POST request using fetch()
fetch("/server.php", {
     
    // Adding method type
    method: "POST",
     
    // Adding body or contents to send
    body: JSON.stringify(registerData),
     
    // Adding headers to the request
    headers: {
        "Content-type": "application/json; charset=UTF-8"
    }
})
 
// Converting to JSON
.then(response => response.json())
 
// Displaying results to console
.then(json => console.log(json));
    

});

server.php file

<?php

 print_r($_REQUEST);
die;
?>

if print_r is empty try this

<?php 
    $content_raw = file_get_contents("php://input"); 
    $decoded_data = json_decode($content_raw, true); 

    print_r(decoded_data);
    die;

?>