How can I submit this form that is inside a JSP page to a servlet?

Question

I am pretty new in JSP page development and I have the following doubt about how to solve this task.

I have a JSP page that contains a JQuery accordion menu, something like it:

And this is the code that renders this accordion menu:

    <div id="accordion">

        <%
            for (SalDettaglio salDettaglio : (SalDettaglio[]) request.getSession(false).getAttribute("salDettaglio")) {
        %>
                <h2>
                    <!-- <span>SALDETTAGLIO: </span> -->  <%-- out.println(salDettaglio.getCodice()); --%>
                    <!--
                    <table class="salDettaglio" border="1" width="100%">

                        <tr class="salDettaglioRow">
                            <td width = "8.3%"><%=salDettaglio.getCodice()%></td>
                            <td width = "8.3%"><%=salDettaglio.getStato()%></td>
                            <td width = "8.3%"><%=salDettaglio.getDataCreazione()%></td>
                            <td width = "8.3%"><%=salDettaglio.getDataRegistrazione()%></td>
                            <td width = "8.3%"><%=salDettaglio.getAutoreCreazione()%></td>
                            <td width = "8.3%"><%=salDettaglio.getAutoreConvalida()%></td>
                            <td width = "8.3%"><%=salDettaglio.getAutoreAcquisizione()%></td>
                            <td width = "8.3%"><%=salDettaglio.getTotImponibile().toString()%></td>
                            <td width = "8.3%"><%=salDettaglio.getFornitore()%></td>
                            <td width = "8.3%"><%=salDettaglio.getRmConRiserva()%></td>
                            <td width = "8.3%"><%=salDettaglio.getErrore()%></td>
                            <td width = "8.3%">
                                <button class="acceptButton">ACCEPT ICON BUTTON</button>
                                <button class="cancelButton">CANCEL ICON BUTTON</button>
                                <button class="sapButton">SAP ICON BUTTON</button>
                            </td>
                        </tr>
                    </table>
                    -->
                    <table class="standard-table-cls" border="1" width="100%">
                        <thead>
                            <tr class="salDettaglioRow">
                                <th width = "8.33%"><%=salDettaglio.getCodice()%></th>
                                <th width = "8.33%"><%=salDettaglio.getStato()%></th>
                                <th width = "8.33%"><%=salDettaglio.getDataCreazione()%></th>
                                <th width = "8.33%"><%=salDettaglio.getDataRegistrazione()%></th>
                                <th width = "8.33%"><%=salDettaglio.getAutoreCreazione()%></th>
                                <th width = "8.33%"><%=salDettaglio.getAutoreConvalida()%></th>
                                <th width = "8.33%"><%=salDettaglio.getAutoreAcquisizione()%></th>
                                <th width = "8.33%"><%=salDettaglio.getTotImponibile().toString()%></th>
                                <th width = "8.33%"><%=salDettaglio.getFornitore()%></th>
                                <th width = "8.33%"><%=salDettaglio.getRmConRiserva()%></th>
                                <th width = "8.33%"><%=salDettaglio.getErrore()%></th>
                                <th width = "8.33%">
                                    <button class="acceptButton">ACCEPT ICON BUTTON</button>
                                    <button class="cancelButton">CANCEL ICON BUTTON</button>
                                    <button class="sapButton">SAP ICON BUTTON</button>
                                </th>
                            </tr>
                        </thead>
                    </table>
                </h2>

                <div>
                    <table border="1" align="right" class="standard-table-cls">
                        <caption><div align="center"><b>RM</b></div></caption>

                        <thead>
                            <tr>
                                <th width="14.2%">Codice RM</th>
                                <th width="14.2%">Autore Firma</th>
                                <th width="14.2%">Data Firma</th>
                                <th width="14.2%">Acq Riserva</th>
                                <th width="14.2%">Consegna Finale</th>
                                <th width="14.2%">Descrizione RM</th>
                                <th width="14.2%">Imponibile</th>
                            </tr>
                        </thead>

                        <%
                        for (RM currentRM : salDettaglio.getRM()) {
                            String test = currentRM.getAcqRiserva();
                        %>

                                <tr id="rmRow">
                                    <td><%=currentRM.getCodiceRm()%></td>
                                    <td><%=currentRM.getAutoreFirma()%></td>
                                    <td><%=currentRM.getDataFirma()%></td>
                                    <td><%=currentRM.getAcqRiserva()%></td>
                                    <td><%=currentRM.getConsegnaFinale()%></td>
                                    <td><%=currentRM.getDescrizioneRM()%></td>
                                    <td><%=currentRM.getImponibile().toString()%></td>
                                </tr>

                    <%}%>
                    </table>
                </div>
        <%
            }
        %>

   </div>

As you can see in the previous immage in the last column of the table putted inside the accordion header there are 3 icons that are implemented using JQuery buttons, these:

<th width = "8.33%">
    <button class="acceptButton">ACCEPT ICON BUTTON</button>
    <button class="cancelButton">CANCEL ICON BUTTON</button>
    <button class="sapButton">SAP ICON BUTTON</button>
</th>

Now what I have to do is submit a value (at this time even a fixed value, for esample: 1 for the first button, 2 for the second button and 3 for the third button) to the servlet that handle this view when a button is clicked.

I think that I have to use a form that submit it in post. But what exactly have I to do? Searching online I founded this article: http://www.tutorialspoint.com/jsp/jsp_form_processing.htm

But in the previous tutorial show how to submit a form from an HTML page to a JSP but this is not what I want to do.

How can I submit a form into a JSP to a servlet?

Tnx

Answer 1

You can use Jquery $.post ajax request to achive this:

<table>
   <td><input type="text" value="test" id="name" />
   <td><button onclick="post(<%=entity.id%>)">submit</button><td>
</table>

<script>
  function post(id){
     var name=$("#name").val();

     $.post(
        "/myservlet", { customerid: id, customername: name }
     ).done(function(data){
        alert(data);
       //This will send get request to your servlet. can use this if your previous
       //post request done any update in DB
       window.location.href='/myservlet?customerid='+id;
     });
  }
</script>