Using POST method to send array to servlet

JavaScript
1

alright i have a HTML form that must use POST to send data to a servlet.
I need 4 pieces of information the year and month (which i have no problem
getting) and a list of meter ids (integers) and readings (integers).

The list of meter ids and readings are received by the servlet as null pointers.
This is obviously a problem and I need them as two separate strings.

Example wanted result:

System.out.prinln("meter_ids = " + meter_ids);

120,121,122,123,124

and

System.out.prinln("readings = " + readings);

4120,1261,1222,1523,1248

The size of the list of meters is dynamic so the number of input boxes will change.
So i name the boxes meter0, meter1, meter2… and reading0, reading1,…

So, my idea was to encapsulate all of the input boxes into a single string then use
POST to send the data to the servlet by using a JavaScript function.

Below is my attempt at the HTML form code and the JavaScript.

The form is as follows:


<form action="servlet" id="saveform" name="saveform" method="POST">

	<!-- SAVE button -->
    <input type="button" align="right" value="SAVE" onclick="doSave();" >

    <!-- table to input readings -->
    <table class="readings">
        <tr>

			<!-- get year -->
            <td class="td">
                <label align="left">  Year: </label> &nbsp;
                <select name="year">
                	<option value="2007">2007</option>
					<option value="2006">2006</option>
					<option value="2005">2005</option>
                </select>
            </td>

			<!-- get month -->
            <td class="td">
                <label align="left">  Month: </label> &nbsp;
                <select name="month">
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                </select>
            </td>
        </tr>
		
        <tr class="header">
            <td class="td"> Meter </td>
            <td class="td"> Reading (gallons) </td>
        </tr>
        <%
        for (int i = 0; i < meters.size(); ++i) {
            cur_meter = (WaterMeter)meters.get(i);

            /* get the data */
            group = cur_meter.getGroup();
            name = cur_meter.getName();
            meter_id = cur_meter.getMeterID();
        %>
            <input value="<%= meter_id %>" name="meter<%= i %>" type="hidden" id="meter<%= i %>"></input>

        <%
            if ( !group.contentEquals(tmp) ) {
        %>
                <tr>
                    <td align="left" class="tenant_cells"> <%= group %> </td>
                    <td align="center" class="tenant_cells"></td>
                </tr>
            <%
            } /* end if */
            %>
            <tr>
                <td align="left" class="meter_cells"> <%= name %> </td>

                <td align="center" class="td">
                    <input name="reading<%= i %>" id="reading<%= i %>" class="flat" />
                </td>
            </tr>
        <%
            tmp = group;
        } /* end for() */
        %>
    </table>
</form>

JAVASCRIPT is a follows:


<script type="text/javascript">
	// arrays to be sent to servlet
	var meter_ids = new Array();
	var readings = new Array();

	function doSave() {
		// get the data from the page
		<c:set var="num" value="${0}" />
		<c:forEach var ="block" items="${DisplayData.meterList}" >
			document.getElementById("meter<c:out value="${num}" />").value = meter_ids.join('^');
			document.getElementById("reading<c:out value="${num}" />").value = readings.join('^');
			<c:set var="num" value="${num + 1}" />
		</c:forEach>

		document.saveform.submit();
	}
</script>

So my question is: How do I send the JavaScript vars in question (meter_ids, and
readings) to my servlet properly?

2

If you give the meter and reading form elements names like name=“meter[]”, they can be accessed on the other end as an arrays.

3

i do not believe that will work. The function i use to get the data on the server side only returns a string and if i changed the name to “meter” that would just make each input box have the name “meter”.

Here is my server side code to get the data:


public void doPost(HttpServletRequest req, HttpServletResponse res) throws java.io.IOException, ServletException {

    try {
       res.setContentType("text/html");

       meter_ids = req.getParameter("meter_ids");

       year = Integer.parseInt( req.getParameter("year") );

       month = Integer.parseInt( req.getParameter("month") );

       readings = req.getParameter("readings");

    } catch (Exception ex) {
	    System.err.println("err doPost() - " + ex);
    }

     /* do stuff to the data */

} /* end doPost() */

Hope this helps.
Thanks

4

I just thought of an idea on how to pull this off.

I was thinking in my doSave function create two independent strings of all the meters and readings (from the dynamic set of inputs boxes).

Then put those lists into two new hidden inputs and pass those inputs through the form.

PSEUDO CODE:


/* create string vars */
var meters = "";
var readings = "";

/* loop through inputs and concat all the values */
<c:set var="num" value="${0}" />
<c:forEach var ="block" items="${DisplayData.meterList}" >
     document.getElementById("meter<c:out value="${num}" />").value = meters.join(',');
     document.getElementById("reading<c:out value="${num}" />").value = readings.join(',');
     <c:set var="num" value="${num + 1}" />
</c:forEach>

/*
 *  set the new input boxes to contain the newly concated data
 *  Note: not exactly sure how to do this part
 */
meters_inputbox = meters;
readings_inputbox = readings;

/* submit form */
document.saveform.submit

Does this seem like a technique that should be used or is there a better way to do this?

Thanks

5

GOT IT!

In summary:
I needed to send a list of strings inputed by a user (using input boxes) and i needed to send those strings to a servlet. The number of inputs needed was dynamic so using POST on all of the inputs was not practicably.

So i wanted to concat all of the strings and send it as one string.

To do this i created an extra hidden input, so i could insert the concated list of strings into the hidden input then send that data to the servlet.

The JAVASCRIPT function:


<script type="text/javascript">
    /* strings to hold concated data */
    var mts = "";
    var rds = "";

    function doSave(form) {
        /* concat the data into the appropriate var */
        <c:set var="num" value="${0}" />
        <c:forEach var ="block" items="${DisplayData.meterList}" >
            mts += (form.meter<c:out value="${num}" />.value + ",");
            rds += (form.reading<c:out value="${num}" />.value + ",");
            <c:set var="num" value="${num + 1}" />
        </c:forEach>

        /* copy the concated data into the hidden inputs */
        form.meters.value = mts;
        form.readings.value = rds;

        /* submit the form to the servlet */
        document.saveform.submit();
    }
</script>

Thanks, just explaining this on the forum really helped and thanks for the input pmw57