Customers
User information
 Loading ...
Show article in Knowledge Base

 How can I add a multi‑document attachment field to a simple form that looks better? Export knowledge base Export     SubscribeSubscribe      Show article info

Sometimes you are doing a form where you do not know in advance how many documents users will attach before  submitting the form.

 

This can be done by  replace the normal document fields with another that uses javascript. 
 
First, you need to add a javascript section to the form if you do not already have it:
 
 
<script language="Javascript">
var f = 1;
 
function addAnotherFile() {
   if (document.all || document.getElementById) {
     var table = document.getElementById('fileTable');
     var attachmentButtonTR = document.getElementById('attachmentButtonRow');
     var row = table.insertRow(attachmentButtonTR.rowIndex);
     var cell1 = row.insertCell(0);
     cell1.innerHTML = '&nbsp;';
     var cell2 = row.insertCell(1);
     cell2.setAttribute('border', '0');
     cell2.setAttribute('align', 'left');
     cell2.innerHTML = '<INPUT TYPE="file" size="90" style="{width:640px}" NAME="theFile' + f + '"' + ' ONCHANGE="">';
     f = f + 1;
   }
}
</script>
 
 
And further down in the form, you have to replace
 
<p>
<label for="theFile0">File:</label><br />
<input type="file" id="theFile0" name="theFile0" size="90" style="width:640px">
</p>
 
with this code:
 
<table width="100%" id="fileTable">
  <tr>
    <th valign="top">Attachments:</th>
      <td valign="top">
        <INPUT TYPE="file" size="90" NAME="theFile0" style="width: 640px;">
      </td>
 </tr>
 <tr id="attachmentButtonRow">
   <th valign="top"></th>
   <td valign=top>
      <table align="left" cellpadding="0" cellspacing="0" border="0" style="width: 640px">
         <tr>
            <td style="width: 60px;padding:0px;border:0px;margin:0px" align="right" nowrap>
              <INPUT align="right" ID="addButton0" TYPE="button" VALUE="Add another file" onclick="javascript:addAnotherFile();">
            </td>
        </tr>
      </table>
   </td>
  </tr>
</table>
 
 
This was a quick test by me and it works, but the new section may look a little different from the rest of the form.

You probably have to tweak the code a bit so your form looks good.


User comments
 Loading ...