Zach Zach - 6 days ago 6
jQuery Question

Undefined Index in PHP after Using AJAX

It seems that this question has already been asked many times but none of the solution is working for me. I'm new to AJAX so maybe there are some basics that I've missed? Basically I just want to pass the content of an html paragraph to a PHP script and I don't want to use html form.

I have two files: tes.html

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(){
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent},
dataType:"html",
});
});
});
</script>
</head>
<body>
<p id="text" contenteditable="true">This is the content</p>
<a href="tes.php" target="_blank"><button id="post">post 2</button></a>
</body>
</html>


and tes.php

<?php
if (isset($_POST['text'])) {
$content = $_POST['text'];
echo $content;
} else {
echo "no content";
}
?>


After I clicked the Post button, in the PHP file it returns


Notice: Undefined index: text in C:\xampp\htdocs\projects\lab\tes.php on line 3.


Where did it go wrong? Really need your help guys. Thanks!

Answer

can you try this

  $(document).ready(function(){
   $("#post").click(function(){
      var getContent = $("#text").html();
      $.ajax({
         url:"tes.php",
         type:"POST",
         data:{text:getContent},
         dataType:"html",
         success:function(data) {
          console.log(data)
         }
      });
   });
 });

and in the HTML (as reza suggested)

<button id="post">post 2</button>

then, open the developer console and see if you can see the response from the tes.php

Comments