jsp <html:file> property

Question

I need to pass the value from jsp file property in a loop. Here is the code

</tr>
                    <%

                    for (int i = 0; i < value.size(); i++) {
                        <html:form action="save" method="post" styleId="update" enctype="multipart/form-data">
                        <input type=hidden id="secfeaturetype" name="secfeaturetype" value="" />

                        <html:file property="testfile" styleId="testfile"/>
                        <input type="button" value="Update" onclick='javascript:check_updatefields()' />
                        </html:form>
                        </td>
                    </tr>

I am trying to do some validation in javascript and it is reading only the first file properly and not the rest. Any ideas ?

function check_updatefields() {
    var file = jQuery('#testfile').val();
    alert(testfile);
 }

Am I missing something here ? Thanks.

Answer 1

"id", it means it's unique in your page, so if there's more than one, the browser will only identify the first element, so here you'd better use "class", correcting it like this: styleClass="testfile". js: jQuery('.testfile').

Answer 2

As I mentioned in a comment above, the id attribute is supposed to be unique, so creating elements in a loop with the same id is giving you invalid html and $("#testfile") will select only the first element with that id (except in some browsers that might select only the last).

A better solution for repeated elements is to give them a common class and distinguish between them according to which container they belong to, or by a known relationship to some other element if not the container. Or select by tagname if that is unique enough with the containing element, or by the name attribute. You seem to be using jQuery, and it makes any of these options easy.

I think you can tidy your code up to something like this:

<table id="yourTableIdHere">
<% for (int i = 0; i < value.size(); i++) { %>
   <tr><td>
      <html:form action="save" method="post" styleId="update" enctype="multipart/form-data">
         <input type=hidden name="secfeaturetype" value="" />
         <html:file property="testfile" styleClass="testfile"/>
         <input type="button" value="Update" />
      </html:form>
   </td></tr>
<% }%>
</table>

I'm not really familiar with the Struts html tag library, but I believe styleClass="testfile" will render an attribute class="testfile" (if not please substitute whatever the appropriate thing is to render class=... ). Notice I removed your inline onclick=... attribute. You can assign these handlers in one step with jQuery:

$(document).ready(function() {
   // assign a click handler to all the Update buttons that are
   // within forms within your table element:
   $('#yourTableIdHere form input[type="button"][value="Update"]').click(function() {
       var $myForm = $(this).parent();  // or $(this).closest('form'),
           $myFileInput = $myForm.find('input.testfile'),
           $myHiddenInput = $myForm.find('input[type="hidden"]');
       alert($myFileInput.val());       // alert value of file input
       $myHiddenInput.val("something"); // set value of hidden
   });
});

Within the click handler, this is the clicked button, so from $(this) you can navigate to the parent element to get a reference to the form that particular button belongs to, and from that form you can use .find() to select the file and hidden inputs in the current form.