CODEWITHSUNDEEP
javajspservletsarraylisthtml-table
SchlangeLogic
SchlangeLogic

Reputation: 15

HTML to Servlet to JSP dynamically Table

I'm trying to send a table with 3 input text with a value that I write by form POST.

  <form method=POST action="Servlet">

    <table>
        <tr>
            <td><input type=text name=num1 size=10></td>
            <td><input type=text name=num2 size=10></td>
            <td><input type=text name=num3 size=10></td>
        </tr>

    </table>

    <input type=submit>

    </form>

Then I recieve the values in servlet like this:

String [] num1 = request.getParameterValues("num1");

When I got all the values inside the array, I loop the array, then I add inside an arraylist all the values.

ArrayList<String> List = new ArrayList<String>();
for(int i= 0; i < num1.length; i++){
    List.add(num1[i]);  
}

Finally I send the values to JSP:

request.setAttribute("num1", List);
request.getRequestDispatcher("/JSPSite.jsp").forward(request, response);

The thing that I dont know how to do is.. If now the table got a button that when I click it increment +1 the column dynamically, How can I send all the input values, to servlet, calculate the sum of them, then In jsp show the same table with a td below the input text with the sum of the inputs?

Upvotes: 1

Views: 4518

Answers (2)

Jason Sperske
Jason Sperske

Reputation: 30446

OK I agree that this is probably the wrong approach for the exact problem you are after but assuming you are looking for some deeper detail here is a single JSP that uses JavaScript to append to a table and sums the POSTED values. It is also well contained so you should be able to drop it into your web project and run it to see it working:

<%@page import="java.util.*"%>
<%@page language="java" session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%!
public class SumSet {
    public int Num1;
    public int Num2;
    public int Num3;

    public SumSet() {
        this.Num1 = 0;
        this.Num2 = 0;
        this.Num3 = 0;
    }

    public void add(NumberSet number) {
        if(number.Num1 != null && number.Num2 != null && number.Num3 != null) {
            this.Num1 += number.Num1.intValue();
            this.Num2 += number.Num2.intValue();
            this.Num3 += number.Num3.intValue();
        }
    }
}

public class NumberSet {
    public Integer Num1;
    public Integer Num2;
    public Integer Num3;

    public NumberSet() {}

    public NumberSet(String num1, String num2, String num3) {
        this.Num1 = Integer.parseInt(num1, 10);
        this.Num2 = Integer.parseInt(num2, 10);
        this.Num3 = Integer.parseInt(num3, 10);
    }
}
%>
<%
SumSet sum = new SumSet();

List<NumberSet> numbers = new ArrayList<NumberSet>();
String[] num1 = request.getParameterValues("num1");
String[] num2 = request.getParameterValues("num2");
String[] num3 = request.getParameterValues("num3");

if(num1 != null && num2 != null && num3 != null) {
    for(int v = 0; v < num1.length; v++) {
        try {
            numbers.add(new NumberSet(num1[v], num2[v], num3[v]));
        } catch(ArrayIndexOutOfBoundsException | NumberFormatException e) {
            //Skip invalid value
        }
    }
}
//Add some empty rows
numbers.add(new NumberSet());
numbers.add(new NumberSet());
numbers.add(new NumberSet());
%>
<html>
<head>
    <title>SO Example</title>
    <script>
        function AddRow() {
            document.getElementById('TableInputs').insertAdjacentHTML('beforeend',
                '<tr>'+
                    '<td><input type="text" name="num1" size="10"></td>'+
                    '<td><input type="text" name="num2" size="10"></td>'+
                    '<td><input type="text" name="num3" size="10"></td>'+
                '</tr>');
        }
    </script>
</head>
<body>
    <form method='POST' action='/so.jsp'>
        <table>
            <tbody id='TableInputs'>
            <% for(NumberSet number : numbers) {
                sum.add(number);%>
                <tr>
                    <td><input type="text" name="num1" size="10" value="<%=(number.Num1 != null ? number.Num1 : "")%>"></td>
                    <td><input type="text" name="num2" size="10" value="<%=(number.Num2 != null ? number.Num2 : "")%>"></td>
                    <td><input type="text" name="num3" size="10" value="<%=(number.Num3 != null ? number.Num3 : "")%>"></td>
                </tr>
            <%}%>
            </tbody>
            <tfoot>
                <tr>
                    <td><%=sum.Num1%></td>
                    <td><%=sum.Num2%></td>
                    <td><%=sum.Num3%></td>
                </tr>
            </tfoot>
        </table>
        <input type=submit>
        <button onclick='AddRow(); return false;'>Add Row</button>
    </form>
</body>
</html>

Upvotes: 0

Syam S
Syam S

Reputation: 8509

If its just the sum that you want you can give the same name for all input say <td><input type=text name=num size=10> and the use request.getParameterValues("num"). This will give you all values even dynamically added ones in one go.

But be sure when you dynamically add still give the name for input as 'num'

Upvotes: 0

Related Questions