0
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
     <style>
        .col-lg-10{
            background-color: #ffffcc;
            margin: 10px;
        }
    </style>
   <script>
       var array1=new Array()();
       document.getElementById("sales_Details").value=array1;

        function add(){
           var reference=document.getElementById('sales_ref_No').value;
           var product=document.getElementById('product_ID');
           var productID=product.options[product.selectedIndex].text;
           var productPrice=document.getElementById('product_ID').value;
           var description=document.getElementById('sales_Description').value;
           var unit=document.getElementById('sales_Unit').value;
           var total=Number(document.getElementById('sales_Total').value);
           var price= parseFloat(productPrice*unit);
           total+=price;

           var table=document.getElementsByTagName('table')[0];

           var newRow=table.insertRow(1);

           var cell1=newRow.insertCell(0);
           var cell2=newRow.insertCell(1);
           var cell3=newRow.insertCell(2);
           var cell4=newRow.insertCell(3);

           cell1.innerHTML=productID;
           cell2.innerHTML=description;
           cell3.innerHTML=unit;  
           cell4.innerHTML=price;

           document.getElementById('sales_Total').value=total;

           array1.push([reference,productID,description,unit,price]);
       }

   </script>
</head>
<body>
    <jsp:include page="navigationBar.jsp"></jsp:include>
    <div class="container">
        <%=login_Location_ID%>
        <div class="col-lg-1"></div>
        <div class="col-lg-10">
            <form class="form-horizontal" action="SalesController" method="POST">
                <fieldset>
                    <legend>Fill in the information</legend>
                    <div class="form-group">
                        <label class="control-label col-sm-2">Sales Reference No</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="sales_ref_No" name="sales_ref_No" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">Create By</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="user_ID" name="user_ID" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">Product</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="product_ID" name="product_ID">
                                <c:forEach var="product" items="${product}">
                                    <option value="<c:out value="${product.product_Price}"/>"><c:out value="${product.product_ID}"/></option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-2">Description</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="sales_Description" name="sales_Description"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">Unit</label>
                        <div class="col-sm-4">
                            <input type="number" class="form-control" id="sales_Unit" name="sales_Unit" required/>
                        </div>
                        <button type="button" onclick="add();">Add</button>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">Total</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="sales_Total" name="sales_Total" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">location</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="location_ID">
                                <c:forEach var="location" items="${location}">
                                    <option value="<c:out value="${location.location_ID}"/>"><c:out value="${location.location_ID}"/></option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <%
                        if(request.getAttribute("insertError")!=null){
                    %>
                    <p style="text-align: center; background-color: transparent;color:red"><c:out value="${insertError}"/> is Existed</p>
                    <%
                        }
                    %>
                    <table border="3">
                        <tr>
                            <th>Product ID</th>
                            <th>Description</th>
                            <th>Unit</th>
                            <th>Price</th>
                        </tr>
                    </table> 
                    <input type="hidden" id="sales_Details" name="sales_Details"/>
                    <input type="hidden" name="action" value="insertSales"/>
                    <div class="form-group">        
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                            <button type="reset" class="btn btn-default">Clear</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="col-lg-1"></div>            
    </div>
    <div class="container"><jsp:include page="footer.jsp"></jsp:include></div>  
</body>

Hello, I'm newbie in JSP and I want to ask something.

I have an order table in the form which user can add multiple items and submit... the order data are stored inside array1 which shown in the picture.

My problem now is that I don't have any idea on what syntax should I use to pass the ArrayList to the servlet.

I tried using input type=hidden name="array1" id="array1" value=array1" but it does not seem to work.

Ben Khoo
  • 1
  • 2

1 Answers1

0

You can use JSON format for your data. Google: "json".

The idea is to convert your data into JSON and pass it as a text (String), and then parse it (you can use Gson or Jackson).

JSON example: https://www.w3schools.com/js/js_json_arrays.asp

1-D array

[ "Ford", "BMW", "Fiat" ]

2-D array of numbers

[
    ["2009-01", 324, 1075, 940, 441, 1040, 898, 1343],
    ["2009-02", 295, 958, 904, 434, 1038, 793, 1246 ]
]

Here, you can see how to convert data from the form into JSON. Then pass String dataFromForm to the server and parse it. Serialize form data to JSON

Community
  • 1
  • 1
Yan Khonski
  • 12,225
  • 15
  • 76
  • 114