Replace apostrophe in form using javascript?

I have a form on an HTML webpage that sends a user’s comment and name to a MySQL database table, where it is stored, and then included back onto the page. The problem is, if the user’s name has an apostrophe in it, the server (I pay for hosting, it’s not my server and I can’t change the configuration on it) is sending them to a error page that says:

“The requested URL was rejected. If you think this is an error, please contact the webmaster.
Your support ID is: 13509873612934211694”

Ideally, I’d like my users to be able to actually spell their names correctly in my form, but at the very minimal, I’d like to be able to send them a warning while they are filling out the form saying “Hey sorry you can’t do that, but only letters please because my hosting company won’t allow anything else”. I would really be most interested if there is a way to capture the name field in the form, check it for apostrophes and change them on the fly to ' before they are sent to the server (so like before they submit the form? javascript maybe?), before it takes people to the error page, if possible, because once they are on the server’s error page, there is no link back to my page as well as no really helpful insight as to what they did wrong – but it would then need to display the name back in the included comment with the look of being an actual apostrophe (which I think it would because if I just enter ' into the name field it displays an apostrophe back on the page just fine.

I’m open to any and all solutions! This is the first time I have ever written in PHP or javascript, so I’m really sorry if my question has a simple answer, but I have searched a lot and haven’t found a solution.

Here’s all my code so that you can help:

Here’s a screenshot so you can see what it sort of is doing (I’m kinda scared to post a link to it because I’m sure it lacks security). Note it has a lot of test entries in this screenshot which show where the include is adding the database content to the page: phaewryn.net/fa/ss-clv.PNG

Here’s the form which contains the action that places the entries into the database:

<?php
$servername = "my_server";
$username = "my_username";
$password = "my_password";
$dbname = "my_database";
$users_name = $_POST['name'];
$users_request = $_POST['requests'];
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
if (isset($_POST['requests']))   
{   
$requests = mysqli_real_escape_string($link, $_POST['requests']);   
$sql = "INSERT INTO submissions (name, requests)
VALUES ('$users_name', '$users_request')";
if (mysqli_query($conn, $sql)) {
    header("Location: clv.php");
} else {
    echo "Error" . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
?> 

And here’s the PHP include file that puts the database entries onto the page:

<?php
$servername = "<your_database_server>";
$username = "my_username";
$password = "my_password";
$dbname = "my_database";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT id, requests, name FROM submissions";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo "" . $row["requests"]. " - by " . $row["name"]. "<br>";
    }
} else {
    echo "no special requests this week";
}

mysqli_close($conn);
?> 

And here’s the webpage’s code:

<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" target="_blank" rel="nofollow" href="clv.css">
		<link rel="stylesheet" target="_blank" rel="nofollow" href="https://www.w3schools.com/w3css/4/w3.css"> 
		<title>Candlelight Vigil</title>
	</head>
	<body>
		<script>
		function ignite() {	document.getElementById("candle").src="candle.gif";
			}
		</script>	
<div class="container">
	<div class="w3-row">
		<div class="w3-third w3-container w3-padding-0 w3-margin-0 w3-display-container" style="height:100vh;">
			<div class="w3-display-topleft">
				<div class="submissions">
					<form action="formcode.php" method="POST">
					Make A Request:<br />
					<textarea name='requests' id='requests'></textarea> <br />
					Your Name (a-z only):<br />
					<input type='text' name='name' id='name' /><br />
					<input type='submit' value='Send' class='button' />  
					</form>
				</div>
			</div>
		<div class="w3-display-topright"></div>
		<div class="w3-display-bottomleft"></div>
		<div class="w3-display-bottomright"></div>
		<div class="w3-display-left"></div>
		<div class="w3-display-right"></div>
		<div class="w3-display-middle"></div>
		<div class="w3-display-topmiddle"></div>
		<div class="w3-display-bottommiddle">
			<div id="light">
				<img id="candle" src="unlitcandle.gif" onclick="ignite()">
			</div>
		</div>
		</div>
		<div id="dedication" class="w3-container w3-twothird">
			<div class="dedication-container">
<p>As we light our candles, we honor those who need strength, and send the healing gift of love with all our hearts, may it flow into the brokenhearted who are tending the sick, and bring them comfort in their time of need. We send them our love, may it bolster their strength and comfort their hearts to be held in the loving embrace of this family of fellow feline caretakers.</p>
<p>As we light our candles, we send strength and comfort to those kitties who struggle with their illness this week, may our love bring them relief and peace, aiding in their quick recovery.</p>
<p>As we hold our candle close to our heart, we read the names of the sick and those with special needs, granting them their request, manifesting that it be done, in love, in trust, and in time that it may assist them to conquer through their time of need.</p>
				<div id="myrequest">
				<?php include("submissions.php"); ?>
				</div>
<p>As we light our candles, we also send our heartfelt love and thankfulness to those kitties who have departed this week. May they know the gratitude we hold in our hearts for the gift of unconditional love they blessed us with, although their time was short, they are forever remembered.</p>

				<div id="memorial"><p>(insert departed kitties here)</p></div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

What about something like this?

<script>
function stripApos(){
var str = document.getElementById('name');
var res = str.replace("'", "&#039;");
}
</script>

<form action="formcode.php" method="POST">
Make A Request:<br />
<textarea name='requests' id='requests'></textarea><br />
Your Name (a-z only):<br />
<input type='text' name='name' id='name' onblur="stripApos()" /><br />
<input type='submit' value='Send' class='button' />  
</form>

Can someone who knows javascript make this functional? Would I trigger it onblur in the name field?

Ever heard of SQL injection? This is one you create…

Always escape your data! You are now pushing data given by user directly into database.

$name = mysqli_real_escape_string($conn, $_POST['name']);
$comments = mysqli_real_escape_string($conn, $_POST['comments']);

Also you can encode special chars before insert, and decode when showing

Did you perhaps try:

encodeURI(yourString)

Then on php side you do:

url_decode($_POST['myVariable'])