Passing variable with JavaScript Ajax jQuery to PHP

Question

I searched the advised questions and my code seems to be correct but it

Here is my html code first with the implemented js code

<form>
    <input id="inhalt" type="text" name="eingabe">
    <button type="button" id="button" value="bestätigen">Transfer</button>
</form>
<script>
    $('#button').click(function(){
        var variableAjax = $('#inhalt').val();
        console.log(variableAjax);
        $.ajax({
            type:"POST",
            url: "html.php",
            data: {
                variableAjax : variableAjax,
            },
            success: function(data){
                console.log("hallo"+data);
            }
        });
    });
</script>

The PHP site

<?php


if(!empty($_POST['variableAjax'])){
    $name = mysqli_real_escape_string($_POST['variableAjax']);
}

var_dump($name);
?>

Browser console I can see the entered value I have also implemented the required cdn

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

I have also following informations on my browser network

304
    GET 
localhost   html.html?eingabe=dfadfads  document    html    Aus Cache   833 B
304
    GET 
ajax.googleapis.com jquery.min.js   script  js  Aus Cache   0 B
200
    GET 
localhost   favicon.ico img x-icon  Aus Cache   30,17 KB
200
    POST    
localhost   html.php

On PHP site I get this information

Notice: Undefined variable: name in C:\xampp\htdocs\dashboard\YOUTUBE\TEST\html.php on line 8
NULL 

Answer 1

• When you directly access html.php you'll sure get undefined $name because you set $name inside the if condition

• I think the problem is in the connection between js and php file . For this use the full url in ajax url something like.

---

 type:"POST",
 url: "http://localhost/YOUTUBE/TEST/html.php"; //<<<< Type here the full url to your `html.php` file

^{To clarify .. if you've ajax in js file which located in js/js/file.js and linked it to index.php using <script src="js/js/file.js"></script> you need to start the ajax url from the index.php file}

Also it'll be better to validate the variableAjax before you run the ajax

if(variableAjax && variableAjax !== ''){
   $.ajax{ .....

Answer 2

It's simple: What you have to understand is - naming the key properly in quotes.

in javascript:

$.ajax({
 type:"POST",
 url: "http://some_base_path/html.php",
 data: {
  "static_key" : variableAjax, //here is the magic
 },
 success: function(response){
  console.log("Raw - "+ response);
 },
 error: function (jqXHR, exception) {
    var msg = '';
    if (jqXHR.status === 0) {
        msg = 'Not connect.\n Verify Network.';
    } else if (jqXHR.status == 404) {
        msg = 'Requested page not found. [404]';
    } else if (jqXHR.status == 500) {
        msg = 'Internal Server Error [500].';
    } else if (exception === 'parsererror') {
        msg = 'Requested JSON parse failed.';
    } else if (exception === 'timeout') {
        msg = 'Time out error.';
    } else if (exception === 'abort') {
        msg = 'Ajax request aborted.';
    } else {
        msg = 'Uncaught Error.\n' + jqXHR.responseText;
    }
    console.log(msg);
}
});

in PHP:

<?php
echo $_POST['static_key'];
?>

Hope this solution will help you out to understand

Use :error function instead using try/catch. error function does almost same work.

Note: to know more about object keys with quotes and without quotes click here.

Answer 3

Welcome and have a fun with coding!

You're getting error on PHP side means you successfully make a call AJAX with correct file.

$name is decleared and define within if block and hence it's not being aware outside of if block.

You need to declare it before if statement.

 $name = '';

    if(!empty($_POST['variableAjax'])){
        $name = mysqli_real_escape_string($_POST['variableAjax']);
    }

    var_dump($name);

Now you can access $name after you set.

Rest of the flow is correct otherwise you wouldn't have get an error of undefined $name error.