I want to retrieve data from a mySQL server by using jQuery, which triggers a PHP script to receive the data. However, the $.post
function from jQuery does not work at all and corrupts all the code, and I don't understand why.
Here is my JS code:
$('button#btnSubmit').on('click', function() {
//Compare button pressed
var sel1 = $('select#country1').val(); //country iso codes
var sel2 = $('select#country2').val();
if(sel1 === "placeholder1" || sel2 === "placeholder2" || sel1 === sel2) {
alert("Please select at least two different countries")
}
else {
//post this to php file to retrieve data
try {
$.post('ajax/retrieve_data.php', { sel1: sel1, sel2: sel2 }, function(data) {
$('div#test-data').text(data);
}
catch(err) {
alert(err.message);
}
}
});
I included the jQuery library in my main HTML page with this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
The $.post
message corrupts the entire code, nothing works. When I remove it, the first part of the code works as it should. I have the feeling this is extremly easy to fix but I can't wrap my head around why it does not work.
Thank you!