jQuery serialize () method not working

I have a modal with some fields in which I make an AJAX call for data processing, but the problem is when jQuery will serialize the inputs of my form. It just does not work.

Below my modal:

<!-- Modal de Destinos-->
<div class="modal fade" id="destinationModal" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">

        <div class="modal-content">
            <form id="destination-modal-form"
                action="./addSelectedDestination" method="post">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Negociar Novo
                        Destino</h4>
                </div>

                <div class="modal-body">

                    <div id="div-modal-input-body-destination"
                        class="aling-form col-sm-12 nest text"
                        style="padding-top: 25px">

                        <div class="box01">
                            <select id="destination-passenger-list" class="form-control" name="${customerService.serviceItem.destination}">
                                <c:forEach items="${destinationList}" var="destination">
                                    <option value="${destination.idDestination}">${destination.dtName}</option>
                                </c:forEach>
                            </select>
                        </div>

                        <div class="box02">
                            <div class="input-group skin skin-flat">
                                <input id="ckb-requested" type="checkbox" name="${customerService.serviceItem.requestedDestination}" /> <label
                                    id="ckb-label" for="ckb-requested">Destino
                                    Solicitado pelo Passageiro?</label>

                            </div>
                        </div>

                        <div class="box01">
                            <div class="input-group ">
                                <span id="span-departure"
                                    class="input-group-addon btn-success"><i
                                    class="fa fa-calendar"></i></span> <input id="input-departure"
                                    type="text"
                                    name="${customerService.serviceItem.departureDate}"
                                    class="form-control" placeholder="Data de Ida" />
                            </div>
                        </div>

                        <div class="box02">
                            <div class="input-group ">
                                <span id="span-arrive" class="input-group-addon btn-success"><i
                                    class="fa fa-calendar"></i></span> <input id="input-arrive"
                                    type="text"
                                    name="${customerService.serviceItem.arrivalDate}"
                                    class="form-control" placeholder="Data de Volta" />
                            </div>
                        </div>

                        <div class="box01">
                            <select class="form-control" name="${customerService.serviceItem.saleType}">
                                <c:forEach items="${listOfSaleTypes}" var="saleType">
                                    <option value="${saleType.key}">${saleType.value}</option>
                                </c:forEach>
                            </select>
                        </div>

                        <div class="box02">
                            <div class="input-group ">
                                <span
                                    class="input-group-addon btn-success"><i
                                    class="fa fa-money"></i></span> <input id="input-price"
                                    type="text" data-thousands="." data-decimal=","
                                    name="${customerService.serviceItem.valueNegotiated}"
                                    class="form-control" />
                            </div>
                        </div>


                        <div class="box03">
                            <textarea id="destination-observations" name="${customerService.serviceItem.negociationObservations}" rows="3" placeholder="Observações..." class="form-control"
                                style="min-height: 130px;"></textarea>
                        </div>


                        <input type="hidden" name="${_csrf.parameterName}"
                            value="${_csrf.token}" />

                    </div>

                </div>
                <div class="modal-footer clear" style="margin: 0px;">
                    <button type="button" class="btn btn-danger"
                        data-dismiss="modal">Cancelar</button>
                    <button id="button-add-destination" type="submit"
                        class="btn btn-primary">Cadastrar</button>
                </div>
            </form>
        </div>
    </div>
</div>

AJAX call:

$('#destination-modal-form').submit( function(e){

   var url = "${pageContext.request.contextPath}/auth/addSelectedDestination";
   var formdata = $(this).serialize();

   $.ajax({
    type:'POST',
    data: formdata,
    url: url,
    success: function(jsonData){
        alert("Sucesso!!!.");
    }, 
    error: function(error){
        alert("Erro: Tente Novamente preenchendo todos os campos, ou entre em contato com o administrador do sistema.");
    }
   });
   e.preventDefault();
});