Display apostrophe from mysql table on webpage in image title attribute - php

Question

I have a form that allows a user to input a contraction (e.g. Larry's dogs) into a mysql table> The code is as follows:
<?php
<?php
if(isset($_POST['submit'])){
$title = mysqli_real_escape_string($conn,$_POST['title']);
$insertImageQ = "INSERT INTO images (title, name, keyword1, keyword2, keyword3, enter_date) VALUES('$title', '$name', '$keyword1','$keyword2','$keyword3',now())";
if(!mysqli_query($conn, $insertImageQ)){
die('error inserting new image');
}
$newImage = "one new image added";
}
}
?>
When I echo the field "title" on a webpage, it works fine unless it is echoed in an image title attribute. For example,
<?php
$slideShowQ = "SELECT * FROM slideshow";
$result= mysqli_query($connection, $slideShowQ) or die("error getting connected");
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
echo "<img class='lgImg'";
echo "id='";
echo $row['Id'];
echo "'";
echo "title='";
echo htmlentities($row['title']);
echo "'";
echo "alt='";
echo htmlentities($row['title']};
echo "'";
echo "src='_images/";
echo $row['name'];
echo "'/>";
}
?>
<?php
//release returned data
mysqli_free_result($result);
?>
In a javascript file, I call a function that on mouseover the image, a div id="topLeft" has it's html set to the title. For example,
$('.lgImg').mouseover(function(){
var title =$(this).attr('title');
$('#topLeft').html(title);
When there is a contraction in the title field, everything from the apostrophe is cut off.
Also, on another page, the title field is included in a fancybox application where the images are drawn from the mysql table. The title field appears as it should in a fancybox application unless there is a contraction in the title, in which case, the image will not even pop up as it should in a fancybox application.
Also, if I update the same image with a contraction with this code,
<?php
if(isset($_POST['submit'])){
$title= mysqli_real_escape_string($conn,$_POST['title']);
$updateQ = "UPDATE images SET title='$title'";
if(!mysqli_query($conn, $updateQ)){
die('error inserting');
}
}
?>
the field in the table goes blank and the fancybox does not work.
In sum, I can insert a contraction and echo that contraction as long as I don't echo it in an image title attribute, but I cannot update the field with a contraction.
Can anyone please help me to understand this contradiction?

Answer 1

htmlentities() will leave single quotes by default and as you are using them in your html attributes this will cause invalid html.
You can enforce encoding of single quotes like this:
htmlentities("'", ENT_QUOTES);
More info at the manual page