This question already has an answer here:
Can anyone tell me what I am missing here please?
Here is the basic HTML file with a simple "Create" and "Destroy" button that will eventually call an API. The button click with Ajax seems to work, but the PHP function is not being called.
testapi.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.button').click(function(){
var clickBtnValue = $(this).val();
var ajaxurl = 'ajax.php',
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function (response) {
alert("Action performed successfully!");
});
});
});
</script>
</head>
<body>
<input type="submit" class="button" name="create" value="Create" />
<input type="submit" class="button" name="destroy" value="Destroy" />
</body>
</html>
ajax.php
if (isset($_POST['action'])) {
switch ($_POST['action']) {
case 'create':
create();
break;
case 'destroy':
destroy();
break;
}
}
function create() {
echo "Create function.";
exit;
}
function destroy() {
echo "Destroy function.";
exit;
}
</div>
Your case is wrong: the value in your input is Create, while in your code you check for create.
Change
switch ($_POST['action']) {
case 'create':
create();
break;
case 'destroy':
destroy();
break;
}
to
switch ($_POST['action']) {
case 'Create':
create();
break;
case 'Destroy':
destroy();
break;
}