I am using HTML, PHP and AJAX to create a search field. Here is my HTML Code:
<form action="search.php" id="search_form" method="post" >
<div class="search_bar">
<input type="text" name="search_text" id="search_text" placeholder="Search anything" >
</div>
<div class="search_button">
<button type="submit" id="search_button" name="search_submit" >Search</button>
</div>
</form>
This is my AJAX Code:
$('#search_button').click(function(event) {
var search_data = $('#search_text').val();
var postData ={
"content":search_data};
event.preventDefault();
$.ajax({
type: 'POST',
url: 'search.php',
data:{myData: postData},
error: function()
{
alert("Request Failed");
},
success: function(response)
{
alert("Success");
}
});
});
In PHP I tried the following:
$obj = $_POST['myData'];
echo $obj;
print_r($_POST);
All I am getting is:
Notice: Undefined index: myData in C:\xampp\htdocs\workspace\MakeMyApp\WebContent\search.php on line 9
Array ( )
I have also tried with:
file_get_contents('php //input')
but there also I am getting empty array. I don't know what exactly the problem is. Am I missing anything?
Sorry, I can't comment as I don't have enough 'reputation'.
I have tried to replicate your issue and it seems to work ok for me.
Here is the HTML page ...
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search_button').click(function(event) {
var search_data = $('#search_text').val();
var postData ={
"content":search_data};
event.preventDefault();
$.ajax({
type: 'POST',
url: 'search-submit.php',
data:{myData: postData},
error: function()
{
alert("Request Failed");
},
success: function(response)
{
alert(response);
}
});
});
});
</script>
</head>
<body>
<form action="search.php" id="search_form" method="post" >
<div class="search_bar">
<input type="text" name="search_text" id="search_text" placeholder="Search anything" >
</div>
<div class="search_button">
<button type="submit" id="search_button" name="search_submit" >Search</button>
</div>
</form>
</body>
</html>
And this is the receiving PHP page
<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';
?>
In the ajax request, you can see I'm using alert to output the response in an alert but, and if all goes well it should output the content outputted by the receiving PHP page.
Also, it may not help much, but his is how I would have done the ajax request; it's slightly less code and you don't have to define each form field individually (if you have more than one field)
$(document).ready(function(){
$('#search_form').submit(function() {
var formData = $(this).serialize();
$.ajax({
type: 'POST',
url: 'search-submit.php',
data: formData,
error: function()
{
alert("Request Failed");
},
success: function(response)
{
alert(response);
}
});
return false;
});
});