Ajax Insert value null in database

Question

When I alert all field values, they look perfect, but when I try to insert into DB using PHP, all values are null . What's happening?

Here is my HTML

<form action="ajax.php" id="myform" method="post">
  <input type="hidden" id="userid" name="userid" value="<?php echo $user_id; ?>" />
  <input type="hidden" id="courseid" name="courseid" value="1" />
  <li class="active">
    <div id="#mybox">
      <a class="" id="media-play1" state="1"><i class="fa fa-play-circle-o"></i> Welcome <p>55s</p></a>
    </div>
  </li>
</form>

JQuery Ajax

$("#media-play1").on("click",function(e){
    e.preventDefault();
        var userid = $("#userid").val();
        var courseid = $("#courseid").val();
        var coursename = $("#coursename").text();
        alert(userid);
        alert(courseid);
        alert(coursename);
    $.ajax({
        url: 'ajax.php',
        async: true,
        cache: true,
        data: alert("userid=" + userid + "&courseid=" + courseid + "&coursename=" + coursename),
        type: 'POST',           
        //data:alert($(this).serialize()),
        success: function(){alert('success');},
        //dataType: "json",
    }); });

My PHP file

session_start();
include_once('admin/conn.php');
if(isset($_POST['userid'])){
echo $userid = $_POST['userid'];
echo $courseid = $_POST['courseid'];
echo $coursename = $_POST['coursename'];

$queryin = mysql_query("INSERT INTO `tranings` (`id`, `userid`, `courseid`, `traninigname`) VALUES ('','".$userid."','".$courseid."','".$coursename."')") or die(mysql_error());

if($queryin){
  echo 'insert';
} else {
  echo 'not insert';
}

Answer 1

Please alter your Ajax call like this:

$.ajax({
        url: 'ajax.php',
        async: true,
        cache: true,
        data: "userid=" + userid + "&courseid=" + courseid + "&coursename=" + coursename,
        type: 'POST',           
        //data:alert($(this).serialize()),
        success: function(){alert('success');},
        //dataType: "json",
    });

you are using alert in Data. In addition to this I would like to suggest use serialize method its much better option here is the example: http://api.jquery.com/serialize/

Answer 2

First of all as mentioned in the comments for you question the $("#coursename") element is not in the html you provided, so var coursename = $("#coursename").text(); equals nothing.

As for the issue as to why your data is not being passed to your php you are passing a call to alert() as your data attribute in you ajax call when it should be a function that returns data or an object like so

$.ajax({
        url: 'ajax.php',
        async: true,
        cache: true,
        data: {
             userid: userid,
             courseid: courseid,
             coursename: coursename
        },
        type: 'POST',           
        //data:alert($(this).serialize()),
        success: function(data){
             console.log(data); // log the returned data
             alert('success');
        },
        //dataType: "json",
    });