Ajax - Inserting values from textarea into database - mysql

Question

Hello all on my quest to learn more about ajax I tried making a textarea, in this a text is submitted and then sended to the database, I also made a button to display everything from the database and this works. However when submitted clicking the display all button it just gives this value [object HTMLTextAreaElement] Here is my code:
Select Code/Display
ToDo: <textarea width='200px' height='300px' id='todo'></textarea>
<p id='dbinfo'>Info goes here</p>
<button id='btn'> Send </button>
<button id='request'> Request </button>
<script>
document.getElementById('btn').onclick = function()
{
var dbinfo = document.getElementById('todo').value;
alert(todo); //Here it gives a object htmlcollection ?
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
alert(xmlhttp.readyState + " | " + xmlhttp.status);
var text = xmlhttp.responseText;
alert(text);
document.getElementById('dbinfo').innerHTML = text;
}
xmlhttp.open("POST", "linktodata", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("todo=" +todo);
}
document.getElementById("request").onclick = function()
{
alert("event works");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var result = xmlhttp.responseText;
alert(result);
document.getElementById("dbinfo").innerHTML = result;
}
}
xmlhttp.open("POST", "linktorequest", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
</script>
Data Code
<?php
$servername = "localhost";
$username = "root";
$password = "";
$databasename = "blok-1-am1a";
try
{
if (isset($_POST['todo']))
{
$connection = new PDO("mysql:host=".$servername.";dbname=".$databasename, $username, $password);
$connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$statement = $connection->prepare("INSERT INTO `database` (`id`, `item`) VALUES (NULL, :item)");
$statement->bindParam(':item', $_POST['todo']);
$statement->execute();
}
}
catch(PDOException $e)
{
echo "Error occured : ".$e->getMessage();
}
echo "Success";
?>
Request code
<?php
$servername = "localhost";
$username = "root";
$password = "";
$databasename = "blok-1-am1a";
try
{
$connection = new PDO("mysql:host=".$servername.";dbname=".$databasename, $username, $password);
$connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$statement = $connection->prepare("SELECT * FROM `database` ");
$statement->bindParam(':id', $id);
$statement->execute();
$result = $statement->setFetchMode(PDO::FETCH_ASSOC);
$data = "";
foreach($statement->fetchAll() as $key => $value)
{
$data .= $value['id']." | ".$value['item']."<br>";
}
}
catch(PDOException $e)
{
echo "Error occured: ".$e->getMessage();
}
echo $data;
?>
So yeah whatever I do the request code works but when submitting I always get [object HTMLTextAreaElement]

Answer 1

Silly me, this is a very simple fix, I made the mistake to use the same var as my <p> tag so the fix is litteraly changing that into todo and everything works.
ToDo: <textarea width='200px' height='300px' id='todo'></textarea>
<p id='dbinfo'>Info goes here</p>
<button id='btn'> Send </button>
<button id='request'> Request </button>
<script>
document.getElementById('btn').onclick = function()
{
var todo = document.getElementById('todo').value; //This needed to be changed into todo
}