Jquery AJAX not passing “POST” data

Question

I have a simple div with input fields to insert data for team data

    <div>
      <label>Register</label>
      <input type="text" name="nt" placeholder="Team Name">
      <label>Team</label>
      <input type="text" name="n1" placeholder="Steam username">
      <input type="text" name="n2" placeholder="Steam username">
      <input type="text" name="n3" placeholder="Steam username">
      <input type="text" name="n4" placeholder="Steam username">
      <input type="submit" id="sbutton"></input>
    </div>

Then i use Jquery to collect that data and send it to my php file.

$('#sbutton').click(function(){
      var sdata=[];
      $(this).parent().children("input[type=text]").each(function(index,value){
          index = $(this).attr("name");
          value = $(this).val();
          sdata[index]=value;
      });
      console.log(sdata);
      $.post('php/team.php',sdata,
          function(returnedData){
              console.log(returnedData);
      });
  });

In my php file i process that data,but the problem is,that is not passed by the jquery function.My php:

<?php
session_start();
include_once "functions.php";
print_r($_POST);
if(!isset($_POST["nt"])) die("Usernames not set");?>

My console log:

[nt: "asdasd", n1: "asdasd", n2: "asdasd", n3: "asdasd", n4: "asdasd"]
jquery-2.1.4.min.js:4 XHR finished loading: POST
"http://localhost/tournament/php/team.php".k.cors.a.crossDomain.send
 @ jquery-2.1.4.min.js:4n.extend.ajax @ jquery-2.1.4.min.js:4n
(anonymousfunction) @ jquery-2.1.4.min.js:4(anonymous function) @ main_page.php:31n.event.dispatch @ jquery-2.1.4.min.js:3r.handle @ jquery-2.1.4.min.js:3
main_page.php:33 Array
(
)
Usernames not set

Why is this happening?

Answer 1

Change to object and set property names of object with names of input's to use the same php approach you are currently using

$('#sbutton').click(function(){
  var sdata={};
  $(this).parent().children("input[type=text]").each(function(index,value){

      sdata[this.name]=this.value;
  });
  console.log(sdata);
  $.post('php/team.php',sdata,
      function(returnedData){
          console.log(returnedData);
  }).fail(function(){alert('Ooops something wrong')});
});

You can see what is received very easily by returning whole $_POST and it will appear in console log of your success handler.

echo json_encode($_POST);exit;

Answer 2

You could also make use of the FormData object like so, even though you do not appear to have a <form> defined in you HTML

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data.

$('#sbutton').click(function(){
    var formData = new FormData();

    $(this).parent().children("input[type=text]").each(function(index,value){
        formDate.append( $(this).attr("name"), $(this).val() );
    });
    $.post('php/team.php',formData,
          function(returnedData){
              console.log(returnedData);
          })
          .fail(function(){alert('Ooops something wrong')});
});

Answer 3

Just replace

// dictionary, i.e. sdata["nt"] would not work
var sdata=[];

by

// dictionary, i.e. sdata["nt"] would work
var sdata={};

JQuery uses JSON.stringify method on the data that you pass

if you have doubt try using

console.log(JSON.stringify(sdata))