REST'put','post' 400 bad request. Javascript,HTML,Java

Question

I have a html table with cars populated. When I click info, modal opens up with car details. From here I want to delete,create or update car. DELETE method works. Update and Create do not. I ran out of things to change. I always get an 400 bad request error. PUT,POST do work in POSTMAN application. So I assume its something to do with my js.

HTML modal:

  <!-- modal --> <div class="modal fade" id="carModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"><i>More Details</i></h4> </div> <div class="modal-body" id="contents"> <label for="pictureCar">Picture:</label> <input type="text" id="pictureCar" ><br> <label for="make">Make:</label> <input type="text" id="make" ><br> <label for="model">Model:</label> <input type="text" id="model" ><br> <label for="year">Year:</label> <input type="text" id="year" ><br> <label for="colour">Colour:</label> <input type="text" id="colour" ><br> <label for="reg">Reg:</label> <input type="text" id="reg" ><br> <label for="mileage">Mileage:</label> <input type="text" id="mileage" ><br> <label for="type">Type:</label> <input type="text" id="type" ><br> <label for="price">Price:</label> <input type="text" id="price" ><br> <label for="engineSize">EngineSize:</label> <input type="text" id="engineSize" ><br> <input type="hidden" id="carId" ><br> </div> <div class="modal-footer"> <button type="button" id="modalUpdate" class="btn btn-success" data-dismiss="modal">Update</button> <button type="button" id="modalNew" class="btn btn-success" data-dismiss="modal">New</button> <button type="button" id="modalDelete" class="btn btn-danger" data-dismiss="modal">Delete</button> <button type="button" id="modalClose" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- end of modal --> 

Javascript:

    $(document).on("click", "#carModal #modalUpdate", function() {  
    updateCar();
})

$(document).on("click", "#carModal #modalNew", function() { 
    createCar();
})


var updateCar = function(){
$.ajax({
    type : 'PUT',
    contentType: 'application/json',
    url : rootUrl+"/cars/"+$("#carId").val(),
    dataType : "json",
    data: carModalToJSON(),
    success : function(data,textStatus,jqXHR){
        findAllCars();
        alert('updated car');
    },
    error: function(jqXHR,textStatus,errorThrown){
        alert('didnt update'+textStatus);
    }
});
}
var carModalToJSON=function(){
console.log("toJSON");
var id =$("#carModal #carId").val();
var make = $("#carModal #make").val();
var model= $("#carModal #model").val();
var year = $("#carModal #year").val();
var colour = $("#carModal #colour").val();
var reg= $("#carModal #reg").val();
var mil =$("#carModal #mileage").val();
var type =$("#carModal #type").val();
var price =$("#carModal #price").val();
var pic =$("#carModal #pictureCar").val();
var eng =$("#carModal #engineSize").val();

console.log("values informjson"+" "+id+" "+
        make+" "+model+" "+year+" "+colour+" "+
        reg+" "+mil+" "+type+" "+price+" "+pic+" "+eng);
return JSON.stringify({
    "id":$("#carModal #carId").val(),
    "make": $("#carModal #make").val(),
    "model": $("#carModal #model").val(),
    "year": $("#carModal #year").val(),
    "colour": $("#carModal #colour").val(),
    "reg:": $("#carModal #reg").val(),
    "mileage":$("#carModal #mileage").val(),
    "type":$("#carModal #type").val(),
    "price":$("#carModal #price").val(),
    "picture":$("#carModal #pictureCar").val(),
    "engineSize":$("#carModal #engineSize").val(),


});

}

Answer 1

ssc-hrep3, thanks! In Network Tab showed me cant ignore reg. carToModalJSON reg had extra : .. solved the problem.