Why is Ajax passing 'UNDEFINED' data to MySql?

Question

Here is my ajax

$(".submit").click(function(){

    var vp = $("input#vehicle_plate").val();
    var vm = $("input#vehicle_model").val();
    var vt = $("input#vehicle_type").val();
    var da = $("input#date_acquired").val();
    var ad = $("input#assigned_driver").val();
    var dataString = 'vehicle_plate='+ vp + '&vehicle_model='+ vm + '&vehicle_type='+ vt + '&date_acquired='+ da + '&assigned_driver='+ ad;

    $.ajax({
    type: "POST",
    url: "process.php",
    data: dataString,
    success: function(){
    $('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
    }
    });
    return false;

    });

And here is my PHP where i pass my 'dataString'

<?PHP
    include("db.classes.php");
    $g = new DB();
    $g->connection();
    if($_POST)
    {
    $vehiclePlate = $g->clean($_POST["vehicle_plate"],1);
    $vehicleModel = $g->clean($_POST["vehicle_model"],1);
    $vehicleType = $g->clean($_POST["vehicle_type"]);
    $assignedDriver = $g->clean($_POST["assigned_driver"],1);
    $ad = date('Y-m-d', strtotime($_POST["datepicker"])); 
            $g->add($vehiclePlate, $vehicleModel, $vehicleType, $assignedDriver, $ad);                                       
    }
        $g->close();
        ?>

And here is my database query

public function add($vehiclePlate, $vehicleModel, $vehicleType, $assignedDriver, $ad)
    {
        $sql = "insert into vehicles(`vehicle_plates`,`DA`,`type`, `model`, `driver`) values('$vehiclePlate', '$ad', '$vehicleType', '$vehicleModel', '$assignedDriver')";

        if(!mysql_query($sql))
        {
            $this->error = mysql_error();
            return true;
        }

        else
        {
            return false;
        }
    }

the AJax returns succesful but when i try and see the table in my databse the inserted row are al 'Undefined' what seems to be causing this?

EDIT:

Here is my HTML

<div id="rform">
        <form action = "list.php" method="post">
        <fieldset>
                <legend>Fill Up the Form</legend><br>
            <div>
                <label class="label-left">*Vehicle Plate:</label>
                <input class="label-left" type="text" name="vehicle_plate" id="inputbox1" value maxlength="50">
            </div>

            <div>
                <label class="label-left">*Vehicle Type:</label>
                <select class="label-left" id="inputbox" name ="vehicle_type" onchange="document.getElementById('text_content').value=this.options[this.selectedIndex].text">
                    <option value="Motorcycle">Motorcycle</option>
                    <option value="Tricycle">Tricycle</option>
                    <option value="Pick-up">Pick-up</option>
                    <option value="Truck">Truck</option>
                </select><br><br>
            </div>

            <div>
                <label class="label-left">*Vehicle Model:</label>
                <input class="label-left" type="text" name="vehicle_model" id="inputbox" value maxlength="50">
            </div>

            <div>
                <label class="label-left">Date Acquired:</label>
                <input class="label-left" name="date_acquired" id="datepicker" value maxlength="50"><br><br>
            </div>

            <div>
                <label class="label-left">Assigned Driver:</label>
                <input class="label-left" type="text" name="assigned_driver" id="inputbox" value maxlength="50"><br><br>
            </div>

            <div>
                <label class="label-custom" color = red>NOTE: "*" Fields are required</label><br><br>
            </div>
            <span class="error" style="display:none"> Please Enter Valid Data</span>
            <span class="success" style="display:none"> Registration Successfully</span>

            <input id="button" type="submit" value="Add" name = "subBtn" class = "submit"/>

        </fieldset>
        </form>
        </div>

Answer 1

Use serialize() it's simpler and less prone to errors.

$(".submit").click(function () {

    var dataString = $("#rform form").serialize();

    $.ajax({
        type: "POST",
        url: "process.php",
        data: dataString,
        success: function () {
            $('.success').fadeIn(200).show();
            $('.error').fadeOut(200).hide();
        }
    });
    return false;

});

Answer 2

Well the problem is with your selectors:

var vp = $("input#vehicle_plate").val();
var vm = $("input#vehicle_model").val();
var vt = $("input#vehicle_type").val();
var da = $("input#date_acquired").val();
var ad = $("input#assigned_driver").val();

Your input selectors doesn't have any id attribute instead you need to select them by their name attribute (or you can give id attributes to your html input elements so your above selectors will work):

var vp = $("input[name=vehicle_plate]").val();
var vm = $("input[name=vehicle_model]").val();
var vt = $("input[name=vehicle_type]").val();
var da = $("input[name=date_acquired]").val();
var ad = $("input[name=assigned_driver]").val();

It will pass your values correctly to server.

Answer 3

you are concatenating your dataString like a GET - string which is used for passing it via URLs but doesn't work in POST - requests like this.

you have to pass your POST data inside an javascript-object:

data: { vehicle_plate: vp, vehicle_model: vm, vehicle_type: vt }

...and so on.