0
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 doesn’t work.
Down with 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">×</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>
Call AJAX:
$('#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();
});
Is there an error appearing on the console? What is the result of
serialize()? An empty string?– Lucas
@Lucas, there is no error in the console. The only thing that serialize returns me is the parameter inside
<input type="hidden" name="${_csrf.parameterName}"
 value="${_csrf.token}" />– João Manolo
Place e.preventDefault(); just below the function declaration, above the url variable declaration and test.
– touchmx
Did I get this working? The code works well on jsFiddle:http://jsfiddle.net/z1x67dv8/
– Sergio
Voce is sure that the "name" attributes of the other "inputs" are receiving the past values? are they not null? Because everything else is correct the problem must be in the parameters passed by java
– deFreitas
What is your jquery version?
– David Vinicius
Another way to serialize would be to put var data = new Formdata($(this)); test this way
– David Vinicius