[jQuery] Request parameters from dynamically added html element are missing on the server side

[chris]

Hi there,

I tried to create input element dynamically using jQuery,  in form of
text field and file upload.
But somehow when I dumped all my request parameters on the server
side, I never received these parameters even though I saw the the
input elements were created on HTML form.
Could someone give me a hint ?

I use jsp and java on the server side, jQuery 1.1.4, and jQuery
Multiple File Upload Plugin v1.26.

This is the snippet of the code :

<script src="<%= themeDisplay.getPathJavaScript() %>/jquery/jquery.js"
type="text/javascript"></script>
<script src="<%= themeDisplay.getPathJavaScript() %>/geco/
jquery.MultiFile.js" type="text/javascript"></script>

<form action="blabla.jsp" method="post" enctype="multipart/form-data"
>

                                <tr>
                                        <td><input type="text" 
name="<portlet:namespace />portalurl0"
id="<portlet:namespace />portalurl0" /> </td>
                                        <td><input type="text" 
name="<portlet:namespace />profileid0"
id="<portlet:namespace />profileid0" /></td>
                                        <td><input type="button" value="Add" 
onclick="<portlet:namespace /
>addjquery()" /> <input type="button" value="Profilvorlage" /> </td>
                                        <input type="hidden" name="counter" 
value="1"
id="<portlet:namespace />counter" />
                                </tr>
                        </table>
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                        <div id="<portlet:namespace />profile">

                        </div>
                </td>
        </tr>
        <tr>
                <td><b>Attach CV/Resume</b></td>
                <td><input type="file" name="resumefile" id="<portlet:namespace 
/
>my_file_element" />
                </td>
        </tr>


</form>

<script type="text/javascript" >
$(document).ready(function(){
 $('#<portlet:namespace />my_file_element').MultiFile({
  accept:'txt|doc|rtf', max:7, STRING: {
   remove:'Remover',
   selected:'Selecionado: $file',
   denied:'Invalid file extension $ext!'
  }
 });
});
</script>

<script type="text/javascript">

function <portlet:namespace />addjquery(){
        var profileurl = document.getElementById("<portlet:namespace /
>portalurl0").value;
        var profileid  = document.getElementById("<portlet:namespace /
>profileid0").value;
        var id = document.getElementById("<portlet:namespace /
>counter").value;
        $("#<portlet:namespace />profile").append("<p id='<portlet:namespace /
>row" + id + "'>"+profileurl+"&nbsp;&nbsp;"+profileid+"<input
type='hidden' name='profileurl["+id+"]'  value='"+profileurl+"'
><input type='hidden' name='profileid["+id+"]' value='"+profileid
+"'>&nbsp;&nbsp;<a href='#' onClick='<portlet:namespace /
>removeFormField(\"#<portlet:namespace />row" + id + "\"); return
false;'>Remove</a><p>");

        id = (id - 1 ) + 2;
        document.getElementById("<portlet:namespace />counter").value = id;
}

function <portlet:namespace />removeFormField(id){
        $(id).remove();
}


</script>