bootstrap 3联系表格行为不端

Question

I am developing a site with a contact form for that purpose I chose this codepen example of bootstrap 3 contact form with validation. This form works fine but an error occurs when I implement php code and attempt to insert form values into a MySQL database. The problem is when I fill all fields and try to submit, submit button disabled like when an error occurred, but if I resubmit any one value and try to submit it's done. I thought and thought but can't troubleshoot any reason. I decide to take this issue before experts like you because I am not an expert.

Everything I have done so far can be found live at this link.

My javascript and php code is bellow.

  $(document).ready(function() {
$('#contact_form').bootstrapValidator({
    // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        first_name: {
            validators: {
                    stringLength: {
                    min: 2,
                },
                    notEmpty: {
                    message: 'Please supply your first name'
                }
            }
        },
         last_name: {
            validators: {
                 stringLength: {
                    min: 2,
                },
                notEmpty: {
                    message: 'Please supply your last name'
                }
            }
        },
        pendant_name: {
            validators: {
                 stringLength: {
                    min: 2,
                },
                notEmpty: {
                    message: 'Please supply your pendant name'
                }
            }
        },
        confirm_pendant_name: {
            validators: {
                 stringLength: {
                    min: 2,
                },
                notEmpty: {
                    message: 'Please confirm your pendant name'
                },
            }
        },
        email: {
            validators: {
                notEmpty: {
                    message: 'Please supply your email address'
                },
                emailAddress: {
                    message: 'Please supply a valid email address'
                }
            }
        },
        phone: {
            validators: {
                notEmpty: {
                    message: 'Please supply your phone number'
                },
                phone: {
                    country: 'US',
                    message: 'Please supply a vaild phone number with area code'
                }
            }
        },
        address: {
            validators: {
                 stringLength: {
                    min: 8,
                },
                notEmpty: {
                    message: 'Please supply your street address'
                }
            }
        },
        city: {
            validators: {
                 stringLength: {
                    min: 4,
                },
                notEmpty: {
                    message: 'Please supply your city'
                }
            }
        },
        country: {
            validators: {
                notEmpty: {
                    message: 'Please select your country'
                }
            }
        },
        state: {
            validators: {
                notEmpty: {
                    message: 'Please select your state'
                }
            }
        },
        zip: {
            validators: {
                notEmpty: {
                    message: 'Please supply your zip code'
                },
                zipCode: {
                    //country: 'US',
                    message: 'Please supply a vaild zip code'
                }
            }
        },
        }
    })

    .on('success.form.bv', function(e) {
      $('#success_message').slideDown({ opacity: "show" }, "slow"); // Do something ...

       $('#contact_form').data('bootstrapValidator').resetForm();

        // Prevent form submission
        e.preventDefault();

        // Get the form instance
        var $form = $(e.target);

        // Get the BootstrapValidator instance
        var bv = $form.data('');

        // Use Ajax to submit form data
        $.post($form.attr('action'), $form.serialize(), function(result) {
            console.log(result);
        }, 'json');
});
});

here is my php code.

<?php
//Establishing Connection with Server
$connection = mysql_connect("localhost", "myusername", "mypassword");

//Selecting Database from Server
$db = mysql_select_db("mydbname", $connection);
if(isset($_POST['submit'])){

//Fetching variables of the form which travels in URL

$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$pendant_name = $_POST['pendant_name'];
$confirm_pendant_name = $_POST['confirm_pendant_name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$address = $_POST['address'];
$country = $_POST['country'];
$state = $_POST['state'];
$city = $_POST['city'];
$zip = $_POST['zip'];
$query = mysql_query("insert into mytable(first_name, last_name, pendant_name, confirm_pendant_name, email, phone, address, country, state, city, zip) values ('$first_name', '$last_name', '$pendant_name', '$confirm_pendant_name', '$email','$phone', '$address', '$country', '$state', '$city', '$zip' )");
}
//Closing Connection with Server
mysql_close($connection);
?>