Form ajax post data to php file

Question

Hi i trying make form using ajax. But i get some problems to sending form vars to php file. I get error: Undefined index: name. I check chrome dev tools and i see variable is sending. But when made echo json_encode i see in php file i get empty array. So i dont have any idea where i made misstake.

file Main.js

var name = $('#user_name').val();
var lname = $('#user_lastname').val();

function formLogin(name, lname)
{
$.ajax({ url: 'database/register.php',
     data: {
         'name' : name,
         'lname' : lname
     },
     type: 'post',
     dataType:'json',
     success: function(data) {
                  alert(data);
              }
});
}

Html form:

<form class="circleForm" id="registerForm">
     Imię: <input type="text" id="user_name"><br>
     Nazwisko: <input type="text" id="user_lastname">
    <br>
<input class="btnCircle" type="button" id="submit" value="Przejdź dalej" onclick="formLogin(name, lname)">                    
 </form>

Php Code:

$dane = $_POST; echo json_encode($dane);

Chrome dev:

I just want figure how can i echo this variables(name,lname) in php file register.php

Version with serialize:

function formLogin() {
        var dane = $('form').serialize();
    $.ajax({
        url: 'database/register.php',
        data: {'dane': dane},
        method: 'post',
        success: function(data) {
            console.log(data);
        }
    });
  
}

Then result console:

<pre class='xdebug-var-dump' dir='ltr'>
<small>D:\xampp\htdocs\szkola\database\register.php:8:</small>
<b>array</b> <i>(size=1)</i>
  'dane' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>''</font> <i>(length=0)</i>
</pre>
jquery-3.2.1.min.js:4 XHR finished loading: POST "http://localhost/szkola/database/register.php".

But when i go to http://localhost/szkola/database/register.php

i get this:

D:\xampp\htdocs\szkola\database\register.php:8: array (size=0) empty

Answer 1

You need to change the way you define your variables in your Javascript and declare them inside your function, not outside :

function formLogin(){

    var name = $('#user_name').val();
    var lname = $('#user_lastname').val();

    $.ajax({ url: 'database/register.php',
         data: {
             'name' : name,
             'lname' : lname
         },
         type: 'post',
         dataType:'json',
         success: function(data) {
             alert(data);
         }
    });
}

And you need to update your HTML the same way (formLogin() instead of formLogin(...,...)) :

<form class="circleForm" id="registerForm">
     Imię: <input type="text" id="user_name"><br>
     Nazwisko: <input type="text" id="user_lastname">
    <br>
<input class="btnCircle" type="button" id="submit" value="Przejdź dalej" onclick="formLogin()">                    
 </form>

Answer 2

Try using method instead of type.

The HTML:

<form class="circleForm" id="registerForm">
    Imię:       <input type="text" id="user_name" name="name"><br />
    Nazwisko:   <input type="text" id="user_lastname" name="lname"><br />
    <input class="btnCircle" type="button" id="submit" value="Przejdź dalej" onclick="formLogin();">                    
</form>

The JavaScript:

function formLogin() {

    // Serialize the form
    var data = $('form').serialize();

    // Ajax call
    $.ajax({
        url: 'database/register.php',
        data: data,
        method: 'post',
        dataType: 'json',
        success: function(data) {
            console.log(data);
        }
    });

}

Also remember that you're requesting a JSON so you have to echo a json_encode($array) in your PHP file for a simple string will not be returned.