Question

I have this code that a user can upload pictures. It works just fine, but the user can submit unlimited pictures, and I want to put a limit to four.

when the user reaches four input fields then they won’t be allowed to add any input.

     <script type="text/javascript">


function addItems()
{
var table1 = document.getElementById('tab1');
var newrow = document.createElement("tr");
var newcol = document.createElement("td");
var input = document.createElement("input");
input.type="file";
input.name="image[]";
newcol.appendChild(input);
newrow.appendChild(newcol);
table1.appendChild(newrow);
}

function remItems()
{
var table1 = document.getElementById('tab1');
var lastRow = table1.rows.length;
if(lastRow>=2)
table1.deleteRow(lastRow-1);
}
</script>


    <form method="post" action="" enctype="multipart/form-data">
<table align="center" border="0" id="tab1">
<tr>
<td width="218" align="center">
<input type="file" name="image[]" /></td>
<td width="54" align="center">
<img src="Button-Add-icon.png" alt="Add" style="cursor:pointer" 

 onclick="addItems()" /></td>
<td>
<img src="Button-Delete-icon.png" alt="Remove" style="cursor:pointer"  

  onclick="remItems()" /></td>
</tr>
</table>
<table align="center" border="0" id="tab2">
<tr><td align="center">
<input type="submit" value="Upload" name="upload" /></td></tr>
</table>
</form>

Thanks

Answer 1

Add a global counter.. and check on your addItems function.. something like:

var totalItems = 0;
function addItems()
{
   if(totalItems < 4) {
     var table1 = document.getElementById('tab1');
     var newrow = document.createElement("tr");
     var newcol = document.createElement("td");
     var input = document.createElement("input");
     input.type="file";
     input.name="image[]";
     newcol.appendChild(input);
     newrow.appendChild(newcol);
     table1.appendChild(newrow);
     totalItems++; //increment the global counter...
   } else {
    //Display your message here.. with an alert or something...
   }
}

function remItems()
{
   var table1 = document.getElementById('tab1');
   var lastRow = table1.rows.length;
   if(lastRow>=2) {
     table1.deleteRow(lastRow-1);
     totalItems--; 
    }
}