[thelist] End Result - Generating Form Elements...

Wed Apr 10 11:44:01 CDT 2002

For those who are interested, this is the end result that I came up with. A
hearty 'thanks' to all of your who put your two cents in.
<sigh>And yes, I understand that the DOM methods used will really only work
in IE 6+, but that's okay for the business rules laid down...</sigh>
The completed form also limits the number of files a user can upload and
passed the number along to the nextpage. The script, does not validate user
entry at all. The next page handles it all, so empty form elements aren't a
problem.

<code_snip>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>UploadTest...</title>
 <script language = javascript>
 var intCount = 1;
 function doUpload(form) {
  form.action="ul.asp";
  form.items.value = intCount;
  form.submit();
  }
 function addUL(form) {
  if (intCount < 10) {
   intCount++;
   var newRow = document.createElement("<div id='ul" + intCount + "'>");
   ularea.insertBefore(newRow);
   newRow.innerHTML = "<INPUT class='Files' type='File' NAME='File" +
intCount + "'><br>";
   }
  }
 function delUL(form) {
  if (intCount>1) {
   document.getElementById('ul' + intCount).removeNode(true);
   intCount--;
   }
  }
 </script>
 <style>
  .Controls {font : normal normal small-caps x-small Arial, Helvetica,
sans-serif;}
  .Controls.Button {font : normal normal small-caps small Arial, Helvetica,
sans-serif;}
  .Legend {font : normal normal small-caps x-small Arial, Helvetica,
sans-serif; color : red;}
  .Files {font : normal normal small-caps x-small Arial, Helvetica,
sans-serif;}
  .Files.Button {font : normal normal small-caps small Arial, Helvetica,
sans-serif;}
 </style>
</head>

<body>
<FORM name="ul_form" method="post" encType="multipart/form-data" action=""
onSubmit="return false;">
<table border="0">
<tr>
 <td valign="top" width="100">
 <fieldset class="Controls">
  <legend class="Legend">Controls</legend>
  <table border="0" cellpadding="0" cellspacing="1" width="100%">
  <tr>
   <td align="center" valign="top">
    <INPUT class="Controls" type="Button" value="Add"
onclick="addUL(this.form)">
    <INPUT class="Controls" type="Button" value="Del"
onclick="delUL(this.form)">
    <INPUT type="hidden" value="" name="items">
   </td>
  </tr>
  </table>
 </fieldset>
 </td>
 <td valign="top" align="right" rowspan="2">
  <fieldset class="Files">
  <legend class="Legend">Files To Upload</legend>
  <table border="0" cellpadding="0" cellspacing="1" width="100%">
  <tr>
   <td valign="top" colspan="2">
    <INPUT class="Files" type="File" id="File1" name="File1"><br>
    <DIV id="ularea"></DIV>
   </td>
  </tr>
  <tr>
   <td valign="top">
    <input class="Controls" type="reset" value="Clear Fields">
   </td>
   <td align="right" valign="top">
    <INPUT class="Controls" type="Submit" value="Upload"
onclick="doUpload(this.form)">
   </td>
  </tr>
  </table>
  </fieldset>
 </td>
</tr>
<tr>
 <td valign="top" width="100">
 <fieldset class="Controls">
  <legend class="Legend">Help</legend>
  Use The 'Add' and 'Del' buttons to add and delete files to be uploaded.
You can specify a maximum of ten files to be uploaded.
 </fieldset>
 </td>
</tr>
</table>
</FORM>
</body>
</html>

</code_snip>