pulling variable into the data of AJAX post function

Question

I have the below function call and I am trying to pull the value of the variable data into the data: section of the function. I have gotten this far but no such luck getting it to work. In php I am using $_POST['test'] to try an pull the value.

THanks

function fnc()
 {
   var oButton = document.getElementById("addData");
   var data = document.getElementById("dataInput");
   var display = document.getElementById("display");


     display.innerHTML += "<a id='dispchk'>"+ data.value +"</a>" +"<br />" ;
}
$.ajax({
    type: "POST",
    url: "chkinpost.php?eventid=<?php echo $_GET['eventid']; ?>&eventname=<?php echo $_GET['eventname']; ?>",
    data: "test="+ data.value
});

Answer 1

Either don't use the function fnc() :

var oButton = document.getElementById("addData");
var data = document.getElementById("dataInput");
var display = document.getElementById("display");
display.innerHTML += "<a id='dispchk'>"+ data.value +"</a>" +"<br />" ;
$.ajax({
    type: "POST",
    url: "chkinpost.php?eventid=<?php echo $_GET['eventid']; ?>&eventname=<?php echo $_GET['eventname']; ?>",
    data: "test="+ data.value
});

or move your AJAX request into function fnc() :

function fnc()
{
  var oButton = document.getElementById("addData");
  var data = document.getElementById("dataInput");
  var display = document.getElementById("display");
  display.innerHTML += "<a id='dispchk'>"+ data.value +"</a>" +"<br />" ;
  $.ajax({
    type: "POST",
    url: "chkinpost.php?eventid=<?php echo $_GET['eventid']; ?>&eventname=<?php echo $_GET['eventname']; ?>",
    data: "test="+ data.value
  });
}

Answer 2

Either pass a string or a plain object as data parameter

var url = "chkinpost.php?eventid=<?php echo $_GET['eventid']; ?>&eventname=<?php echo $_GET['eventname']; ?>"

//var data = { value: "some value"}
//or
var data = 'this is a chicken';

$.ajax({
  type: "POST",
  url: url,
  data: data,
});