getParameter returning NULL and getPart not recognised, the request doesn't contain a multipart/form-data or multipart/mixed stream

I have two problems. My servlet was initially working where I have a HTML page which allows the users to enter their name and upload 2 files. However, after a colleague of mine added some JS codes, the entire page seems to break

Problem 1: Chief Engineer and Barge Officer returns null despite entering values.

Problem 2: signatureFilePartCE throws the error request doesn't contain a multipart/form-data. S.O.P after that line doesn't appear as well

I've tried adding @MultipartConfig to my servlet. On the front end, I tried adjust the JS code to add enctype: 'multipart/form-data', and contentType: false but to no avail.

Servlet

String chiefEngineerName = request.getParameter("chiefName"); String bargeOfficerName = request.getParameter("bargeName"); if (chiefEngineerName != null) { boolean check = ExternalUserDAO.checkIfExternalUserRecordExist(jobRefNo, chiefEngineerName); System.out.println("Check is: " + check); if (!check) { chiefEngineer = new ExternalUser(jobRefNo, chiefEngineerName, null, null, "Chief Engineer"); ExternalUserDAO.insertExternalUser(chiefEngineer); } } System.out.println("Chief Engineer is: " + chiefEngineerName); System.out.println("Barge Officer is: " + bargeOfficerName); Part signatureFilePartForCE = null; //Retrieving filePart using JS? try { signatureFilePartForCE = request.getPart("chiefSign"); System.out.println("Hello"); } catch(Exception e) { System.out.println(e.getMessage()); } 

JS

$("form").submit(function(e) { e.preventDefault(); $.ajax({ type: "POST", //url: domain + '/The_Sailors_Application/UploadExternalUserInfoServlet?referenceNumber' + referenceNo, url: domain + '/The_Sailors_Application/TestingServlet?referenceNumber' + referenceNo, //data: $(this).serialize(), enctype: 'multipart/form-data', //contentType: 'application/x-www-form-urlencoded; charset=UTF-8', //contentType: false, success: function() { // callback code here $('#errorMessageBox').css("display", "block"); displayErrorMessage("success", "The changes made to this form had been saved."); $(window).scrollTop(0); //window.location.href = "timelog.html?referenceNo=" + referenceNo; }, error: function(error) { $('#errorMessageBox').css("display", "block"); displayErrorMessage("danger", "The changes made to this form had failed to be saved. Please try again."); $(window).scrollTop(0); } }) }); 

HTML

<form method="POST" class="form-horizontal" enctype='multipart/form-data'> <tbody> <tr> <td><input type="text" id="chiefName" name="" pattern="[A-Za-z]{1,50}" title="Only letters are allowed." onchange="chiefEngineerName(this);" placeholder="" class="form-control"><span id="cError" class="help-block"></span></td> <td> <input type="file" name="chiefSign" accept="image/*" onchange="chiefEngineerSign(this), readURL2(this); capture = camera"><br><br> <div id="chiefSign"> <img id="displayImg2" height="100" width="100" /></div> </td> <td> <input type="file" name="chiefStamp" accept="image/*" onchange="chiefEngineerStamp(this), readURL3(this); capture = camera"><br><br> <div id="chiefStamp"> <img id="displayImg3" height="100" width="100" /></div> </td> </tr> </tbody> <input type="submit" class="btn btn-primary" value="Save"> </form>