including the appended variable to the data with other variable in ajax - ajax

Question

Hello and good day everyone, I am having a problem in ajax. I have a variable named fd that contains object. But i cant find a way to put it together with other variable in "data:". I just want to pass the data of fd and also the other variables from other inputs of my form. Thank you very much.
$('#register_btn').click(function(e) {
var fd = new FormData();
var files = $('#image')[0].files[0];
fd.append('image',files);
var val1 = $('#email').val();
var val2 = $('#firstname').val();
var val3 = $('#middlename').val();
var val4 = $('#lastname').val();
var val5 = $('#emp_status').val();
var val6 = $('input[name=date_hired]').val();
var val7 = $('#account_type').val();
var val8 = $('#notes').val();
var val9 = $('#position').val();
var val10 = $('#cp_number').val();
var val11 = $('#tel_number').val();
var val12 = $('#address').val();
$.ajax({
type: 'POST',
url: 'process/add_employee_process.php',
contentType: false,
cache: false,
processData:false,
data: {email: val1, firstname: val2, middlename: val3, lastname: val4, emp_status: val5, date_hired: val6, account_type: val7, notes: val8, position: val9, cp_number: val10, tel_number: val11, address: val12,fd},
success:function(html) {
if(html=="Failed"){
$("#gifcheckmark").attr('src','../campfire.gif');
$("#gifcheckmark").css('display','inline');
$("#gifcheckmark").css('width','inline');
$("#notif_message").text("Failed");
$("#register_btn").css('display','none');
$("#decline_btn").css('display','none');
}
else{
$("#notif_message").text("Success");
$("#gifcheckmark").css('display','inline');
$("#gifcheckmark").css('width','inline');
$("#register_btn").css('display','none');
$("#decline_btn").css('display','none');
setInterval(successGif, 1600);
$('#qr').load('../phpqrcode/index.php');
$('#qr').show();
}
}
});
});
This is the form
<form role="form" style="width: 100%;">
<div class="box-body">
<div class="box-header with-border col-xs-12">
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="form-group col-md-3">
<label for="">Email </label>
<input type="email" id="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group col-md-3">
<label for="">Firstname </label>
<input type="text" id="firstname" class="form-control" id="" placeholder="Firstname">
</div>
<div class="form-group col-md-3">
<label for="">Middlename </label>
<input type="text" id="middlename" class="form-control" id="" placeholder="Middlename">
</div>
<div class="form-group col-md-3">
<label for="">Lastname </label>
<input type="text" id="lastname" class="form-control" id="" placeholder="Lastname">
</div>
<div class="form-group col-md-3">
<label for="">Employee Status </label>
<input type="text" id="emp_status" class="form-control" id="" placeholder="Employee Status">
</div>
<div class="form-group col-md-3">
<label for="">Date Hired </label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="date_hired" class="form-control pull-right" id="datepicker">
</div>
</div>
<div class="form-group col-md-3">
<label for="">Account Type </label>
<input type="text" id="account_type" class="form-control" id="" placeholder="Account Type">
</div>
<div class="form-group col-md-3">
<label for="">Notes </label>
<input type="text" id="notes" class="form-control" id="" placeholder="Notes">
</div>
<div class="form-group col-md-3">
<label for="">Positions </label>
<input type="text" id="position" class="form-control" id="" placeholder="Positions">
</div>
<div class="form-group col-md-3">
<label for="">Cellphone Number </label>
<input type="text" id="cp_number" class="form-control" id="" placeholder="Cellphone Number">
</div>
<div class="form-group col-md-3">
<label for="">Telephone Number </label>
<input type="text" id="tel_number" class="form-control" id="" placeholder="Telephone Number">
</div>
<div class="form-group col-md-3">
<label for="">Address </label>
<input type="text" id="address" class="form-control" id="" placeholder="Address">
</div>
<div class="form-group col-xs-12">
<input type="hidden" name="size" value="1000000">
<div>
<input type="file" id="image" name="image">
</div>
</div>
<!-- /.box-body -->
<div class="col-xs-2">
<center><button type="button" id="confirm_btn" class="btn btn-primary" data-toggle="modal" data-target="#modal-default">
Submit
</button></center>
</div>
</form>
This is the add_employee_process.php
$db = mysqli_connect('localhost', 'root','','cjwebsolutions');
$image = $_FILES['image']['name'];
$target = "image/".basename($image);
if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
$msg = "Image uploaded successfully";
}else{
$msg = "Failed to upload image";
}
$emp_id = make_emp_id($_POST['date_hired']);
$_POST['emp_id'] = $emp_id;
// Required field names
$required_fields = array('email','firstname','middlename','lastname', 'emp_status', 'date_hired','account_type','notes','position','cp_number','tel_number','address','emp_id');
$data_insert_fields = array('email','firstname','middlename','lastname', 'emp_status', 'date_hired','account_type','notes','position','cp_number','tel_number','address','emp_id');
if (check_empty_fields($required_fields)) {
echo "Failed";
}
else
{
data_insert($data_insert_fields,"cj_accounts");
}