使用JQuery在MYSQL中插入数据

Question

I have a program that successfully inserts data into my table in MYSQL. The problem that I had encountered was when I add another field in MySQL and likewise add another form in my code, it doesn't add that added field.

To put it simply, here's the scenario: I have three fields: last name, first name and email. The three can be added successfully, but when I add another field, say, middle name, the program still adds BUT does not add middle name.

Here's my code: index.php (add portion)

<div class="modal-body">
            <div class="form-group">
                <label for="first_name">First Name</label>
                <input type="text" id="first_name" placeholder="First Name" class="form-control"/>
            </div>

             <div class="form-group">
                <label for="middle_name">Middle Name</label>
                <input type="text" id="middle_name" placeholder="Middle Name" class="form-control" required />
            </div>

            <div class="form-group">
                <label for="last_name">Last Name</label>
                <input type="text" id="last_name" placeholder="Last Name" class="form-control"/>
            </div>

            <div class="form-group">
                <label for="genderlabel">Gender</label>
                 <select class="form-control" id="gender">
                   <option value="Male">Male</option>
                   <option value="Female">Female</option>
                 </select>
           </div>

            <div class="form-group">
                <label for="email">Email Address</label>
                <input placeholder="Email Address" type="text" class="form-control" id="email"/>
            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="addRecord()" name="add">Add Record</button>
        </div>

..and here's my addRecord.php (query)

if(isset($_POST['first_name']) && isset($_POST['last_name']) && isset($_POST['email']))
{
    include("db_connection.php");
    // get values 
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $email = $_POST['email'];
    $middle_name = $_POST['middle_name'];

    $query = "INSERT INTO users(first_name, last_name, email, middle_name) VALUES ('$first_name','$last_name','$email', '$middle_name')";
    if (!$result = mysql_query($query)) {
        exit(mysql_error());
    }
    echo "Record Added!";
}

Note: in the if statement, when I add (isset($_POST['middle_name']) the whole program doesn't work.

..lastly the accompanying JavaScript file, script.js

function addRecord() {
// get values
var firstname = $("#first_name").val();
var middlename = $("#middle_name").val();
var last_name = $("#last_name").val();
var email = $("#email").val();

// Add record
$.post("ajax/addRecord.php", {
    //name of field: variable name
  first_name: firstname,
 middle_name: middlename,
  last_name: last_name,
  email: email
}, function (data, status) {
    // close the popup
    $("#add_new_record_modal").modal("hide");

    // read records again
    readRecords();

    // clear fields from the popup
    $("#first_name").val("");
    $("#middle_name").val("");
    $("#last_name").val("");
    //$("#gender").val("");
    $("#email").val("");
});

}

I hope someone can help me, I've been at this for two days with no progress.
What I want to happen is that the program will allow the input of multiple fields.

I'm using Bootstrap 3.3.5-dist, JavaScript (and I suppose I am already using JQuery) and XAMPP v. 3.2.1