I am VERY new to jQuery, and I have been trying to get information from my SQL database whenever the user chooses a new option in a datalist form. This is the code:
<form>
<input list="chemicals" name="chemicalsearch">
  <datalist id="chemicals">
 <?php while ($info3=mysql_fetch_array($info2)) {
      echo "<option value='$info3[name]'>$info3[formel]</option>";
        }
?>
</datalist>
</form>
<script type="text/javascript">
$('#chemicals').on('change', function() {
    var record_id = $(this).val(); 
    var data = {
        'id': record_id
    };
    $.ajax({
        type: "GET",
        url: '/Chemistry%20Calculator/getchemical.php', 
        data: data,
        success: function(response) {
            document.getElementById('formel').innerHTML = data.formel;
        },
        error: function(jqXHR, textStatus, errorThrown) {
        }
    });
});
</script>
And then the PHP file:
<?php
include_once 'connect.php';
$info="SELECT * from chemicals where name='$id'";
$info2=mysql_query($info) or die("Wrong link. This page does not exist.");
$info3=mysql_fetch_array($info2);
$name = $info3['name'];
$formel = $info3['formel'];
$massa = $info3['molmassa'];
$array = array($name, $formel, $massa);
$data = json_encode($array);
echo $data;
?>
Please be patient with me here, as I have never used jQuery before. And yes, I am aware of the fact that I'm using the old MySQL syntax, I will change that as soon as I get this working. Any help would be greatly appreciated :)
 
     
    