SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using POST method to send array to servlet

    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:
    Code:
    System.out.prinln("meter_ids = " + meter_ids);
    120,121,122,123,124
    and

    Code:
    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:

    Code HTML4Strict:
    <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:

    Code JavaScript:
    <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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code Java:
    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. #4
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code JavaScript:
    /* 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. #5
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code JavaScript:
    <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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •