Separation between name and surname using datalists - php

Question

I'm using a datalist to store all of the names and surnames in that I retrieve from a MySQL database table.
When someone inputs the name and surname of a tutor and clicks "show tutor", showTutor() is called.
<input list="tutorData" name="tutors" id="tutorToShow">
<datalist id="tutorData">
<?php
$sql = "SELECT name, surname FROM tutors ORDER BY surname ASC";
if (!$res = $link->query($sql)) {
trigger_error('error in query ' . $link->error);
} else {
while ($row = $res->fetch_assoc()) {
$name = $row['surname'];
$sName = $row['name'];
?>
<option value="<?php echo "$sName $name" ?>" >
<?php
}
}
?>
</datalist>
<input type="button" value="Weergeven" onclick="showTutor();">
My datalist is filled up and works perfectly. Now: When showTutor is called, so when the button was clicked:
function showTutor(){
var tut = document.getElementById("tutorToShow").value;
}
This gives me something like John Smith or Mary Jane Dough.
What the problem is though, when I reload the shown tutor div with ajax, I need to retrieve that tutor's ID from the database.
So what I'll definitely need is this SQL:
SELECT ID
FROM tutors
WHERE name LIKE '$name%'
AND surname LIKE '$surname%'
Now I just need to separate the name.
In other words, how do I retrieve the ID from a table with columns ID, name, surname, without knowing the separation between name or surname?
John Smith: easy, first word is name, second word is surname
Mary Jane Dough: now what?
I thought of adding a comma that seperates both names, but that's not very stylish.
Another option is to add a column to my database that has both names in one record, but that's a hassle when new tutors need to be added.

Answer 1

Do this before you assign the data into your elements
if (strpos($sName, ' ') != false) {
// if above string position of space isn't false,
// explode the string at the space into an array of
// individual names.
$sName = explode(' ', $sName);
echo $sNames[0];
echo $sNames[1];
// you will need to look at foreach loop and counting the array length
}
Try this.
<datalist id="tutorData">
<?php
$sql = "SELECT name, surname FROM tutors ORDER BY surname ASC";
if (!$res = $link->query($sql)) {
trigger_error('error in query ' . $link->error);
} else {
while ($row = $res->fetch_assoc()) {
$surname = $row['surname'];
$first_names = $row['name'];
if (strpos($first_names, ' ') != false) {
/*
if above string position of space isn't false,
explode the string at the space into an array of
individual names.
*/
$first_name = explode(' ', $first_names); // EG: Paul John
$name1 = $first_name[0]; // Paul
$name2 = $first_name[1]; // John
/*
you will need to look at foreach loop and counting
the array length
*/
}
?>
<option value="<?php echo $name1 . ' ' . $name2 . ' ' . $surname" ?>" >
<?php
}
}
?>
</datalist>

Answer 2

I'm sorry for the delay, #Oli helped me in chat a few weeks ago.
<input list="tutorData" name="tutors" id="tutorToShow">
<datalist id="tutorData">
<?php
$sql = "SELECT name, surname, id FROM tutors ORDER BY surname ASC";
if (!$res = $link->query($sql)) {
trigger_error('error in query ' . $link->error);
} else {
while ($row = $res->fetch_assoc()) {
$name = $row['surname'];
$sName = $row['name'];
$id = $row['id'];
?>
<option value="<?php echo "$sName $name" ?>" data-id="<?php echo $id; ?>">
<?php
}
}
?>
</datalist>
<input type="button" value="Show" onclick="showTutor();">
So basically I've only added a data-id, I then wrote this javascript:
<script>
function showTutor() {
var tut = document.getElementById("tutorToShow").value;
var list = document.getElementById("tutorData");
var length = list.options.length;
var id;
for (var i = 0; i < length; i++) {
var eachTutor = list.options[i].value.toLowerCase();
if (tut === eachTutor) {
id = list.options[i].getAttribute('data-id');
}
}
}
</script>
I now have the id of the tutor, without separating any name. I also post it to a php page with ajax, but that is not relevant to the question.
Thanks again to the ones that helped.