HTML Post Duplicating Entry in MySQL - php

Question

So basically I am trying to upload a Model and Serial number into a database only on POST but SOMETIMES, not all the time, it will duplicate the entry in the database even though I only hit submit once, once submitted, the text field goes blank as it should so how is it adding it more than once?
<?php
$servername = "localhost";
$username = "user";
$password = "pass";
$dbname = "database";
if ($_POST['submit'])
{
// Create connection
$con = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
$mod = mysqli_real_escape_string($con,$_POST['model']);
$sn_num = mysqli_real_escape_string($con,$_POST['sn']);
$sql = "INSERT INTO rma_product (m_type,pro_sn) VALUES ('$mod','$sn_num')";
if ($con->query($sql) === TRUE) {
$success = "New record created successfully";
} else {
$success = "Failed!";
}
$con->close();
}
?>
<form method="post" name="sn_upload" id="sn_upload">
<div>
<label for="model">Model: </label><select id="model" name="model" title="Model" />
<option value="ModelA">ModelA</option>
</select><br><br>
<label for="sn">Serial Number: </label><input type="text" id="sn" name="sn" placeholder="Serial Number" pattern="[a-zA-Z0-9]{11,13}"/><br><br>
<input name="submit" type="submit" value="Submit" />
<?php if( $success) echo "<div>".$success."</div>";?>
</div>
</form>
<script>
(function() {
var input = document.getElementById('sn');
var form = document.getElementById('sn_upload');
var elem = document.createElement('div');
elem.id = 'notify';
elem.style.display = 'none';
form.appendChild(elem);
input.addEventListener('invalid', function(event){
event.preventDefault();
if ( ! event.target.validity.valid ) {
input.className = 'invalid animated shake';
elem.textContent = 'Serial Number must be between 11 and 13 characters and DO NOT include spaces.';
elem.className = 'error';
elem.style.display = 'block';
}
});
input.addEventListener('input', function(event){
if ( 'block' === elem.style.display ) {
input.className = '';
elem.style.display = 'none';
}
});
})();
</script>