I am working on a Spring MVC application and I have the following doubt about how a form is submitted:
<form:form action="consultazioneRicercaForm" method="post" modelAttribute="consultazioneFilter" id="ricercaForm">
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label style="display: block;">Regione:</label>
<%-- <form:select path="codiceRegione" id="selReg" class="requiredGroup1 form-control" name="selReg"> --%>
<form:select path="codiceRegione" id="selReg" class="form-control" name="selReg">
<form:option value="" label="--SELEZIONARE UNA REGIONE--"/>
<form:options items="${listaRegioni}" itemLabel="desReg" itemValue="codReg" />
</form:select>
</div>
<div class="col-md-4">
<label style="display: block;">Provincia:</label>
<form:select path="codiceProvincia" id="selProv" class="form-control"></form:select>
</div>
<div class="col-md-4">
<label style="display: block;">Codice Meccanografico:</label>
<form:input path="codiceMeccanografico" id="selCodMec" class="form-control" name="codMec" minlength="4" />
<%-- <form:input path="codiceMeccanografico" id="selCodMec" class="requiredGroup1 form-control" name="codMec" minlength="4" /> --%>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-md-4">
<label style="display: block;">Stato Progetto:</label>
<form:select path="statoProgetto" id="selStatoProgetto" class="form-control">
<form:option value="" label="--STATO PROGETTO--"/>
<form:options itemLabel="descrizione" itemValue="codice" items="${listaDescrizioneStatoProgetto}"/>
</form:select>
</div>
<div class="col-md-4">
<label style="display: block;">Gruppo Tipologie Progetto:</label>
<form:select path="gruppoTipologie" id="selGruppoTipologie" class="form-control" name="selGruppoTipologie">
<form:option value="" label="--GRUPPO TIPOLOGIE--"/>
<form:options itemLabel="desTipGru" itemValue="codTipGru" items="${listaGruppi}"/>
</form:select>
</div>
<div class="col-md-4">
<label style="display: block;">Tipologia Progetto:</label>
<%-- <form:select path="tipologiaProgetto" id="selTipologiaProgetto" class="form-control">
<form:option value="" label="--TIPOLOGIA--"/>
<form:options itemLabel="descrizione" itemValue="codice" items="${listaDescrizioneTipologiaProgetto}" />
</form:select> --%>
<form:select path="tipologiaProgetto" id="selTipologiaProgetto" class="form-control">
</form:select>
</div>
</div>
<div class="row" id="dataTrasmissioneDiv" style="margin-top: 30px;">
<div class="col-md-4">
<label id="dataTrasmissioneLabel" style="display: block;">Data Trasmissione:</label>
<form:select path="dataTrasmissione" id="selDataTrasmissione" class="form-control">
<form:option value="" label="--DATA TRASMISSIONE--"/>
<form:options itemLabel="descrizione" itemValue="codice" items="${listaDateTrasmissione}"/>
</form:select>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-md-12">
<input type="button" value="Cerca" class="btn btn-default" onClick="submitConsultazione()" />
<input type="button" value="Pulisci filtri" class="btn btn-default" onClick="pulisciFiltriConsultazione()" />
</div>
</div>
</div>
</form:form>
As you can see this form use the Spring MVC taglib.
In the specific case this form is declared in this way:
<form:form action="consultazioneRicercaForm" method="post" modelAttribute="consultazioneFilter" id="ricercaForm">
that, from what I have understand (correct me if I am doing wrong assertion) means:
action="consultazioneRicercaForm": it is the resource called when I submit the form (so I need a controller method that handle POST request toward the consultazioneRicercaForm resource).
method="post": it indicate that the request is a POST request.
modelAttribute="consultazioneFilter": this is a model attribute (putted in the model by the controller that rendered the page that contains the previous form) in which are stored the values inserted in the form.
So it means that when the user submit the form this inizialized model attribute have to be retrieve from the controller that handle the consultazioneRicercaForm resource.
Is it my reasoning correct?
And now my main doubt is. As you can see this form is not submitted in the classic way but there is this button:
<input type="button" value="Cerca" class="btn btn-default" onClick="submitConsultazione()" />
that, when it is clicked, call the submitConsultazione() JavaScriot function, this is the code:
function submitConsultazione() {
if($('#ricercaForm').valid()){
var fd = new FormData();
var filtro = {
selReg : $('#selReg').val(),
selProv : $('#selProv').val(),
selCodMec : $('#selCodMec').val(),
selTipologiaProgetto : $('#selTipologiaProgetto').val(),
selStatoProgetto : $('#selStatoProgetto').val(),
selDataTrasmissione : $('#selDataTrasmissione').val(),
selGruppoTipologie : $('#selGruppoTipologie').val(),
};
fd.append('filtro', JSON.stringify(filtro));
$.ajax({
type : "POST",
url : "ricericaConsultazione",
data : fd,
processData : false,
contentType : false
}).done(function(response) {
// $('#outputRicerca').html(response);
sostituisciFrammentoJsp('outputRicerca', response);
showSuccessMessage('Ricerca completata');
}).error(function(xhr) {
manageError(xhr);
});
}
}
So basically this function is manually retrieving the values inserted in the form's fields and putting these values into a JSON object that will be retrieved to a methd that handle Http POST request toward the ricericaConsultazione resource (that is different from the one defined by the action attribute on the previous form).
So what it exactly means? It seems that they have declared a Spring form that use the form taglib but that are not using the form taglib features but that are manually performing the form sumbit.
Is it true or am I missing something?
Yes. Spring form is declared and form submission is done manually which is happening within the javascript function submitConsultazione().
But there are uses of the spring form here.
If you notice, there are some form:select elements which when rendered will be rendered as html select which will contain some options as well. Instead of we looping over all the values and printing it, we can use form:options tag which takes list of items, item label and item value.
Model attribute(aka form bean) may contain some values in it. So to populate corresponding html form fields with those values we can manually do
<input value="${formBean.stringValueProperty}" >
or through spring form tags
<form:input path="stringValueProperty" />
Form tags make it easy to pre-populate values.
Use of Spring form tag and how it works:
Spring forms are used for binding html fields and a form bean both while rendering and processing a submitted request. While rendering the html the form bean property names have to be generated correctly so that while processing submitted request, request parameters are mapped correctly to the form bean properties.
Though I feel Spring form tags are not used as they should be. Not sure about the requirements and intents of the author of this code.