I'm experiencing an issue with a piece of PHP code (located at ../wp-content/plugins/freework/fw-freework.php).
<div id="new-concept-form">
<form method="post" action="../wp-admin/admin.php?page=FreeWorkSlug" class="form-inline" role="form" onsubmit="addNewConcept()">
<div class="form-group">
<label for="new_concept_text">Nuovo concetto:</label>
<input type="text" class="form-control" id="new_concept_text">
</div>
<div class="form-group">
<label for="new_concept_lang">Lingua:</label>
<select class="form-control" id="new_concept_lang">
<option>it</option>
<option>en</option>
<option>de</option>
<option>fr</option>
</select>
</div>
<button type="submit" class="button-aggiungi btn btn-default">Aggiungi</button>
</form>
</div>
Upon clicking the button, the following JavaScript function is triggered successfully:
var ajaxphp = '../wp-content/plugins/freework/fw-ajaxphp.php';
function addNewConcept()
{
conceptName = document.getElementById('new_concept_text').value;
lang = document.getElementById('new_concept_lang').value;
alert('Inserting: ' + conceptName + " " + lang);
$.ajax({
type: 'POST',
url: ajaxphp,
async: true,
dataType: 'json',
data: {conceptNm : conceptName, conceptLang : lang },
success: function() {
alert("-------------------------------- Data sent!!");
console.log("-------------------------------- Data sent!!");
}
});
return true;
}
However, I am unable to call another PHP file through AJAX. The expected alerts and console logs within the success function are not being displayed.
<?php
// HTML Page -> JavaScript -> fw-ajaxphp.php -> XML Vocabulary
echo 'alert("PHP called")';
// echo $_POST['conceptNm'];
// TODO change vocab when done testing
$xml_file = '../wp-content/plugins/freework/fw-custom-vocabulary-test.xml';
$xml_vocab = new DOMDocument;
if (isset($_POST['conceptNm']) && isset($_POST['conceptLang']))
{
// ADD NEW CONCEPT
echo 'alert("PHP chiamato")';
// irrelevant business code here...
echo 'alert("Modifica avvenuta")';
}
?>
The required jQuery/Bootstrap libraries are included in both the main HTML file and the HTML-generator PHP file (and are functioning properly).
Despite my attempts to resolve this issue by following various Stack Overflow answers, I have been unsuccessful in calling the server-side PHP script as a response to button clicks. The business code is irrelevant for now; the button trigger should at least call the alert outside of the if condition block. All of the files are located in the same folder as shown in this image: Files on Server. Can someone provide insight as to why I am unable to call this PHP script from JavaScript? Thank you.
EDIT: I have found a solution by taking a completely different approach. I am no longer using jQuery; instead, the page will be refreshed whenever a form is submitted and data will be retrieved through POST in the same file that generates the HTML. I do not understand why the original method of calling the server-side PHP script did not work in my case, as it has worked in other scenarios. Nonetheless, thank you all for your assistance.