iterating through imput elements to assign values to an array
<p>The code below  fetches a list of files that have been selected for upload.</p>

<p>It basically appends input elements inside a div above a form element: </p>

<pre><code>&lt;div id = "files_list"&gt; &lt;/div&gt;
</code></pre>

<p><strong>How do I store all the attributes names in an array - fileNamesArray - on clicking the submit button.?</strong></p>

<p>My <strong>attempt</strong> I'm yet to check if this works:</p>

<p>// beginning of attempt</p>

<p>// my approach:
// alert the user if no file is selected for upload and submit is clicked else</p>

<p>// I'd have to iterate through the input elements and contained in the div id="files_list", fetch all the file names and push all the values into an array <strong>$filesArray</strong>.</p>

<p>//rough attempt</p>

<pre><code>$("Submit").click(function () {

    $filesArray

    $(div#files_list).getElementById('input').each(function($filesArray) {  
        filesArray.push($this.attr("value"))
    });

    while( $filesArray.size != 0) {
        document.writeln("&lt;p&gt;" + $filesArray.pop() + "&lt;/p&gt;");
    }
}
</code></pre>

<p>//end of attempt: I print out the names just to verify</p>

<p><strong>Code Below:</strong></p>

<pre><code>$(document).ready(function(){   
var fileMax = 6;
$('#asdf').after('&lt;div id="files_list" style="border:1px solid #666;padding:5px;background:#fff;" class="normal-gray"&gt;Files (maximum '+fileMax+'):&lt;/div&gt;');
$("input.upload").change(function(){
doIt(this, fileMax);
});
});

function doIt(obj, fm) {
if($('input.upload').size() &gt; fm) {alert('Max files is '+fm); obj.value='';return true;}
$(obj).hide();
$(obj).parent().prepend('&lt;input type="file" class="upload" name="fileX[]" /&gt;').find("input").change(function() {doIt(this, fm)});
var v = obj.value;
if(v != '') {
$("div#files_list").append('&lt;div&gt;'+v+'&lt;input type="button" class="remove" value="Delete" style="margin:5px;" class="text-field"/&gt;&lt;/div&gt;')
.find("input").click(function(){
$(this).parent().remove();
$(obj).remove();


return true;
});
}
};
</code></pre>

<p>Code for the HTML form:</p>

<pre><code>&lt;td&gt;&lt;form action="test.php" method="post" enctype="multipart/form-data" name="asdf" id="asdf"&gt;
      &lt;div id="mUpload"&gt;
    &lt;table border="0" cellspacing="0" cellpadding="8"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="file" id="element_input" class="upload" name="fileX[]" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label&gt;
          &lt;textarea name="textarea" cols="65" rows="4" class="text-field" id="textarea"&gt;Add a description&lt;/textarea&gt;
        &lt;/label&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input name="Submit" type="button" class="text-field" id="send" value="Submit" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;&lt;br /&gt;
        &lt;/div&gt;
&lt;/form&gt;

    &lt;p class="normal"&gt;&lt;/td&gt;
</code></pre>
