AJAX call success but throws Undefined index error in $_POST['sample'] - php

Question

I have an AJAX call that passes data to another php file, createTest2.php, as below.
But the createTest2.php file throws error
Notice: Undefined index: sample in C:\xampp\htdocs\TestProj\Test\createTest2.php on line 2
caller.php
$(document).ready(function(){
$("#button_submit").click(function()
{
$.ajax({
type:"POST",
url:"createTest2.php",
data:{sample : "test"},
success:function()
{
alert("success");
}
});
});
});
createTest2.php
<?php
$test_name = $_POST['sample'];
echo $test_name;
?>

Answer 1

Total stab in the dark here but I'm guessing you have something like this
<form action="createTest2.php">
<!-- some elements here -->
<input type="submit" id="button_submit">
</form>
In which case, you should prevent the default action on the button, eg
$("#button_submit").on('click', function(e) {
e.preventDefault();
// and the rest of your ajax code
});
What's happening is your form's default method is GET and it is submitting normally, thus $_POST isn't populated.
Ideally, you should never blindly accept user input. I'd start with some checks in your PHP file
if (!isset($_POST['sample'])) {
http_response_code(406);
throw new Exception('sample data not submitted via POST');
}
$test_name = $_POST['sample'];
Secondly, catching click events on form submit buttons is rife with problems. For one, there's more than one way to submit a form. You should catch the form's submit event instead, eg
<form id="myForm" action="createTest2.php">
<!-- etc -->
<button type="submit">Go</button>
</form>
and the JS
$('#myForm').on('submit', function(e) {
e.preventDefault();
$.post(this.action, { sample: 'test' }).done(function(data) {
alert('Success');
});
});