Question 41908 in PHP Question posted in
Official manual can be found here.

Ajax is not sending the data I set to php

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 class="btn" type="submit" >Sign up</button>

`

thanks in advance

Tags:

2

Answers


  1. 0

    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;

?>
    Login or Signup to reply.
  2. 0

    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");
        }
    });
});

    Or

    $("#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>";
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search