what i have implemented so far:
Enter the values in the input fields and click " Add" button , The entered values gets added to the new row .
And When i click delete button, all the rows are getting deleted .
What I need to implement :
Checkbox should get added to every row .
If i select the checkbox and click "delete" button, only that particular row should get deleted and it should work if i select multiple check boxes as well.
3.Clear the Input fields after i click add button .
Can anyone check this out and tell me how to do that .
//Javascript code to Add new rows onclick of a button and to delete row .
function addMoreRows() {
var user = document.getElementById('user_id').value;
var date = document.getElementById('date').value;
var color = document.getElementById('color').value;
var table = document.getElementById('tbl_id');
var row = table.insertRow();
var userName = row.insertCell(0);
var Date = row.insertCell(1);
var Color = row.insertCell(2);
var checkbox = row.insertCell(3);
userName.innerHTML = user;
Date.innerHTML = date;
Color.innerHTML = color;
}
function deleteMoreRows(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.deleteRow(i);
rowCount--;
i--;
}
}
<!-- HTML markup for the input fields and table . -->
<form align="center" method="GET">
Enter your name : <input type="text" name="users" id="user_id" value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br>
Select the Date : <input type="date" id="date"><br>
Select your favorite color:
<select id="color" required>
<option value="yellow">yellow</option>
<option value="red">red</option>
</select>
<br>
<br>
<input type="button" id="mysubmit" value="Add Row" onClick="addMoreRows()">
<input type="button" id="delete" value="Delete" onClick="deleteMoreRows('tbl_id')">
</form>
<br>
<br>
<table id="tbl_id" style="text-align:center" align="center" valign="top">
<thead>
<tr>
<th style="width:200px;">Name</th>
<th style="width:200px;">Date</th>
<th style="width:200px;">Color</th>
</tr>
</thead>
Let me know if this works for you:
//Javascript code to Add new rows onclick of a button and to delete row .
var rowId = 0;
function addMoreRows() {
var user = document.getElementById('user_id').value;
var date = document.getElementById('date').value;
var color = document.getElementById('color').value;
var table = document.getElementById('tbl_id');
var row = table.insertRow();
var rowBox = row.insertCell(0);
var userName = row.insertCell(1);
var Date = row.insertCell(2);
var Color = row.insertCell(3);
var checkbox = row.insertCell(4);
rowBox.innerHTML = '<input type="checkbox" id="delete' + getRowId() + '">';
userName.innerHTML = user;
Date.innerHTML = date;
Color.innerHTML = color;
}
function deleteMoreRows(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var selectedRows = getCheckedBoxes();
selectedRows.forEach(function(currentValue) {
deleteRowByCheckboxId(currentValue.id);
});
}
function getRowId() {
rowId += 1;
return rowId;
}
function getRowIdsFromElements($array) {
var arrIds = [];
$array.forEach(function(currentValue, index, array){
arrIds.push(getRowIdFromElement(currentValue));
});
return arrIds;
}
function getRowIdFromElement($el) {
return $el.id.split('delete')[1];
}
//ref: http://stackoverflow.com/questions/8563240/how-to-get-all-checked-checkboxes
function getCheckedBoxes() {
var inputs = document.getElementsByTagName("input");
var checkboxesChecked = [];
// loop over them all
for (var i=0; i < inputs.length; i++) {
// And stick the checked ones onto an array...
if (inputs[i].checked) {
checkboxesChecked.push(inputs[i]);
}
}
// Return the array if it is non-empty, or null
return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}
//ref: http://stackoverflow.com/questions/4967223/delete-a-row-from-a-table-by-id
function deleteRowByCheckboxId(CheckboxId) {
var checkbox = document.getElementById(CheckboxId);
var row = checkbox.parentNode.parentNode; //box, cell, row, table
var table = row.parentNode;
while ( table && table.tagName != 'TABLE' )
table = table.parentNode;
if (!table) return;
table.deleteRow(row.rowIndex);
}
<!-- HTML markup for the input fields and table . -->
<form align="center" method="GET">
Enter your name : <input type="text" name="users" id="user_id" value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br>
Select the Date : <input type="date" id="date"><br>
Select your favorite color:
<select id="color" required>
<option value="yellow">yellow</option>
<option value="red">red</option>
</select>
<br>
<br>
<input type="button" id="mysubmit" value="Add Row" onClick="addMoreRows()">
<input type="button" id="delete" value="Delete" onClick="deleteMoreRows('tbl_id')">
</form>
<br>
<br>
<table id="tbl_id" style="text-align:center" align="center" valign="top">
<thead>
<tr>
<th style="width:200px;">Delete</th>
<th style="width:200px;">Name</th>
<th style="width:200px;">Date</th>
<th style="width:200px;">Color</th>
</tr>
</thead>
Related
just looking for a simple solution on solving this, Consider the the following code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript - Add HTML Table Row </title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<form>
<script>
function addRow()
{
// get input values
var name = document.getElementById('name').value;
var currentAge =
document.getElementById('currentAge').value;
var Birthday = document.getElementById('Birthday').value;
var carType = document.getElementById('carType').value;
var Delete = document.getElementById('Delete').value;
var table = document.getElementsByTagName('table')[0];
var newRow = table.insertRow(table.rows.length/2+1);
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
var cel4 = newRow.insertCell(3);
var cel5 = newRow.insertCell(4);
cel1.innerHTML = name;
cel2.innerHTML = currentAge;
cel3.innerHTML = Birthday;
cel4.innerHTML = carType;
cel5.innerHTML = Delete;
function myFunction(){
var x = document.getElementById("table").rows.length;
document.getElementById("demo").innerHTML = "Found " + x + " tr
elements in the table.";
}
</script>
</form>
</head>
<style>
table, th {
border: 1px solid black;
}
tbody td{
padding: 30px;
}
tbody tr:nth-child(odd){
background-color: #F4BC01;
color: #ABC412;
}
$("")
</style>
<body>
<h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for
elements amount</button>
<p id ="demo"></p>
Name: <input type="text" name="name" id="name" /><br/><br/>
Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/>
Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>
<button onclick="addRow();">Display</button><br/><br/>
<p>Eye Colour:</p>
<select id="carType">
<option value="ferrari" id="ferrari">Ferrari</option>
<option value="lamborghini" id="lamborghini">Lamborghini</option>
<option value="porsche" id="porsche">Porsche</option>
<option value="bugatti" id="bugatti">Bugatti</option>
<option value="pagani" id="pagani">Pagani</option>
</select>
<table border="1" id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthday</th>
<th>CarType</th>
<th>Delete Entry
<button id="Delete" onclick="remove_update(event)">delete</button> //this button right here but in each row and not here. should remove said row
</th>
</tr>
</table>
</body>
</html>
What im trying to do is within cel 5 (delete entry) is to add a delete button to each row that is entered into the table that will remove that row but don't know how to go about this. Ideally would like to do this without the use of JQuery if possible, since i've not touched upon it as of yet.
You can use the rowIndex property to delete the row.
function addRow() {
// get input values
var name = document.getElementById('name').value;
var currentAge = document.getElementById('currentAge').value;
var Birthday = document.getElementById('Birthday').value;
var carType = document.getElementById('carType').value;
var table = document.getElementsByTagName('table')[0];
const index = table.rows.length;
var newRow = table.insertRow(index);
newRow.setAttribute('data-index', index);
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
var cel4 = newRow.insertCell(3);
var cel5 = newRow.insertCell(4);
cel1.textContent = name;
cel2.textContent = currentAge;
cel3.textContent = Birthday;
cel4.textContent = carType;
cel5.innerHTML = '<button onclick="removeRow(this)" type="button" class="delete-button">Delete</button>';
}
function myFunction() {
var x = document.getElementById("table").rows.length;
document.getElementById("demo").innerHTML = "Found " + x + "tr elements in the table.";
}
function removeRow(evt) {
const deleteIndex = evt.parentElement.parentElement.rowIndex;
document.getElementById("table").deleteRow(deleteIndex);
}
table,
th {
border: 1px solid black;
}
tbody td {
padding: 30px;
}
tbody tr:nth-child(odd) {
background-color: #F4BC01;
color: #ABC412;
}
<h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for
elements amount</button>
<p id ="demo"></p>
Name: <input type="text" name="name" id="name" /><br/><br/>
Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/>
Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>
<button onclick="addRow();">Display</button><br/><br/>
<p>Eye Colour:</p>
<select id="carType">
<option value="ferrari" id="ferrari">Ferrari</option>
<option value="lamborghini" id="lamborghini">Lamborghini</option>
<option value="porsche" id="porsche">Porsche</option>
<option value="bugatti" id="bugatti">Bugatti</option>
<option value="pagani" id="pagani">Pagani</option>
</select>
<table border="1" id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthday</th>
<th>CarType</th>
<th>Delete</th>
</tr>
</table>
</body>
</html>
What you should be doing is that you set the innerHTML of cel5 to a button, e.g.:
cel5.innerHTML = '<button type="button" class="delete-button">Delete</button>';
Then, you can simply add a click event listener on the table, and check if a click event has emitted from the button element. If it matches, you then delete the closest <tr> element:
document.getElementById('table').addEventListener('click', function(e) {
// Check if click event came from delete button
if (!e.target.classList.contains('delete-button'))
return;
e.target.closest('tr').remove();
});
See proof-of-concept example below:
function addRow() {
// get input values
var name = document.getElementById('name').value;
var currentAge = document.getElementById('currentAge').value;
var Birthday = document.getElementById('Birthday').value;
var carType = document.getElementById('carType').value;
var table = document.getElementsByTagName('table')[0];
var newRow = table.insertRow(table.rows.length / 2 + 1);
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
var cel4 = newRow.insertCell(3);
var cel5 = newRow.insertCell(4);
cel1.innerHTML = name;
cel2.innerHTML = currentAge;
cel3.innerHTML = Birthday;
cel4.innerHTML = carType;
cel5.innerHTML = '<button type="button" class="delete-button">Delete</button>';
}
function myFunction() {
var x = document.getElementById("table").rows.length;
document.getElementById("demo").innerHTML = "Found " + x + "tr elements in the table.";
}
document.getElementById('table').addEventListener('click', function(e) {
// Check if click event came from delete button
if (!e.target.classList.contains('delete-button'))
return;
e.target.closest('tr').remove();
});
<h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for
elements amount</button>
<p id="demo"></p>
Name: <input type="text" name="name" id="name" /><br/><br/> Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/> Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>
<button onclick="addRow();">Display</button><br/><br/>
<p>Eye Colour:</p>
<select id="carType">
<option value="ferrari" id="ferrari">Ferrari</option>
<option value="lamborghini" id="lamborghini">Lamborghini</option>
<option value="porsche" id="porsche">Porsche</option>
<option value="bugatti" id="bugatti">Bugatti</option>
<option value="pagani" id="pagani">Pagani</option>
</select>
<table border="1" id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthday</th>
<th>CarType</th>
<th>Actions</th>
</tr>
</table>
In the head, add a function that understands rows and cells. Call some delete on a parent of a cell (Delete the <tr> in which the <td> is located at). then on the body add to each dynamic button an onClick event and set that function you created earlier ON.
You can use a script like this:
function deleteRow() {
var tableData = event.target.parentNode;
var tableRow = tableData.parentNode;
tableRow.parentNode.removeChild(tableRow);
}
In the button you create (dynamically or fixedly) you should add an onClick event. For example:
<tr>
<td>John Doe</td>
<td>$10,000</td>
<td><input type="submit" value="Delete" id="Delete" onclick="deleteRow()"></td>
</tr>
I want to make a site where a group of people have to add some data, later I will store them into a database.
I don't know the exact number of people and the exact number of rows so I made a function in JavaScript that generates a table when a button is pressed, and same with the rows.
I have some problems that I can't find the solution, that's why I ask here for help:
When I press the button "Add new Table" is like he enters on another page to load it. I tried to use tag and also but still the same.
When I press on "addRow" he put the id(number) 1 again, but I incremented the counter, again I don't know where is happend this.
When I add a new table and I try to add a row to it, he put the row to the first table, I was thinking that this is happend because all the tables have the same id, but why he don't add a row to all of them?
I want to add the row to that particular table where I press the button. My solution would be to add a particular id to every table.
I tried this:
var tableId = 1;
document.write('<div class="window_wrap"> <table class="window" id="idWindowTable' + tableId++ + '">' + table + '</table> </div>');
but I don't know how to increment the id in the addRow function:
var windowTab = document.getElementById("idWindowTable");
Here is my script:
<script>
var table = ''; //table from genTab
var rows = 1; //for genTab
var cols = 3; //for genTab
var rowCounter = 3; //starts from index 3 when add row on table
var nr = 1; // write the id at the number
var tableId = 1;
function genTab() {
table += '<tr> <th class="window_cells" colspan="3"><form class="window_form"><span>Cordonator: </span><input type="text" name="prof_name" placeholder="Prof. dr. Nume Prenume" required/><input type="email" name="prof_email" required/><input type="submit" value="Submit"/></form></th> </tr> <tr><td class="window_cells">Nr</td> <td class="window_cells" id="test">Tema</td> <td class="window_cells">Detalii</td> </tr>';
for(var r = 0; r < rows; r++)
{
table += '<tr>';
for(var c = 0; c < cols; c++)
{
if(c==0)
table += '<td class="window_cells">' + nr++ + '</td>';
else
table += '<td class="window_cells"> <textarea rows="4" cols="30"> </textarea> </td>';
}
table += '</tr> <tr> <th class="window_cells" colspan="3"> <form> <input type="button" value="Preview"/> <input type="submit" value="Submit row"/> <input type="button" value="Add new Table" onClick="genTab()"/> <input id="idRowButton" type="button" value="Add row" onClick="addRow()"/> </form> </th> </tr>';
}
document.write('<div class="window_wrap"> <table class="window" id="idWindowTable">' + table + '</table> </div>');
nr = 1;
table = '';
}
function addRow() {
var windowTab = document.getElementById("idWindowTable");
var roww = windowTab.insertRow(rowCounter++);
var cell1 = roww.insertCell(0);
var cell2 = roww.insertCell(1);
var cell3 = roww.insertCell(2);
cell1.innerHTML = nr++;
cell1.className = "window_cells";
cell2.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
cell2.className = "window_cells";
cell3.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
cell3.className = "window_cells";
}
genTab();
</script>
Here is a begin. Use innerHTML and remove the nr=1 in the genTab function
var table = ''; //table from genTab
var rows = 1; //for genTab
var cols = 3; //for genTab
var rowCounter = 3; //starts from index 3 when add row on table
var nr = 1; // write the id at the number
var tableId = 1;
function genTab() {
table += '<tr> <th class="window_cells" colspan="3"><form class="window_form"><span>Cordonator: </span><input type="text" name="prof_name" placeholder="Prof. dr. Nume Prenume" required/><input type="email" name="prof_email" placeholder="(email#info.uvt.ro)" required/><input type="submit" value="Submit"/></form></th> </tr> <tr><td class="window_cells">Nr</td> <td class="window_cells" id="test">Tema</td> <td class="window_cells">Detalii</td> </tr>';
for (var r = 0; r < rows; r++) {
table += '<tr>';
for (var c = 0; c < cols; c++) {
if (c == 0)
table += '<td class="window_cells">' + nr+++'</td>';
else
table += '<td class="window_cells"> <textarea rows="4" cols="30"> </textarea> </td>';
}
table += '</tr> <tr> <th class="window_cells" colspan="3"> <form> <input type="button" value="Preview"/> <input type="submit" value="Submit row"/> <input type="button" value="Add new Table" onClick="genTab()"/> <input id="idRowButton" type="button" value="Add row" onClick="addRow()"/> </form> </th> </tr>';
}
document.getElementById("content").innerHTML+='<div class="window_wrap"> <table class="window" id="idWindowTable">' + table + '</table> </div>';
table = '';
}
function addRow() {
var windowTab = document.getElementById("idWindowTable");
var roww = windowTab.insertRow(rowCounter++);
var cell1 = roww.insertCell(0);
var cell2 = roww.insertCell(1);
var cell3 = roww.insertCell(2);
cell1.innerHTML = nr++;
cell1.className = "window_cells";
cell2.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
cell2.className = "window_cells";
cell3.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
cell3.className = "window_cells";
}
window.onload = function() {
genTab();
}
<div id="content"></div>
How I can insert all data from a generated HTML table into my database using PHP?
I have tried with a foreach loop, but it gives me an error all the time.
I have this code in JavaScript to adding a new row using a button:
var i=1;
function addRow()
{
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'to' + i;
el.id = 'to' + i;
el.size = 40;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'cost' + i;
el2.id = 'cost' + i;
el2.size = 40;
secondCell.appendChild(el2);
frm.h.value=i;
i++;
}
And this is my HTML code:
<table id="table1" width="40%" border="2" cellpadding="0" cellspacing="0">
<tr>
<td><strong>To Address</strong></td>
<td><strong>Delivery Cost</strong></td>
</tr>
<tr>
<td><input name="to" type="text" id="to" size="40"/></td>
<td><input name="cost" type="text" id="cost" size="40"/></td>
</tr>
</table>
<br/><br/>
<input style="float: right;background-color: #57a000;height: 30px;font-weight: bold; font-family: cursive;margin-left: 10px;"
type="submit" value="Save All" name="SaveCost"/>
<input style="float: right;background-color: #57a000;height: 30px;font-weight: bold; font-family: cursive;"
type="button" value="Add New Place" onclick="addRow();"/>
<input name="h" type="hidden" id="h" value="0"/>
Finally I want to write some PHP to insert all the data from the generated HTML table into my database.
i want to save all record of this dynamically created table row into mysql database but i m unable to get name value for dynamically added feilds which i can use in $_POST method .Kindly help me out .And Also tell me how to convert JavaScript var into Php Variable
<?php
if(isset($_POST['buton_sumit']))
{
$nav_id =1;
$item1=$_POST['name1'];
$item1=$_POST['name2'];
echo $item1 + $item2;
}
?>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
</HEAD>
<BODY>
<table id="extra" width="499" >
<th width="24">R</th><th width="19">Sr.</th><th width="133">Item-Name</th><th width="144">Quantity</th><th width="145">price</th>
</table>
<form action="table1.php" method="post" name="input">
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD width="24"><INPUT type="checkbox" name="chk"/></TD>
<TD width="19"> 1 </TD>
<TD width="133"> <INPUT type="text" name="name1"/> </TD>
<TD width="133"> <INPUT type="text" name="qty1"/> </TD>
<TD width="133"> <INPUT type="text" name="price1"/> </TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Item" onclick="addRow('dataTable')" />
<INPUT type="button" value="Remove Item" onclick="deleteRow('dataTable')" />
<INPUT type="submit" value="End Sale" name="buton_sumit" />
</form>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name="name"+ cell2.innerHTML;
var element2id="myid"+cell2.innerHTML;
element2.setAttribute('id',element2id);
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name="qty"+ cell2.innerHTML;
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.name="price"+ cell2.innerHTML;
cell5.appendChild(element4);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
javascript:(document.write(document.forms[0].elements[2].name))
var myname2=2;
</SCRIPT>
</BODY>
</HTML>
I used the same kinda code and my problem was that when I clicked checkbox for row number 2 ... in Php I always get the result as row number 1 checkbox is checked which is wrong...
enter code here
<html><body>
<?php
$col = $_POST['Colname'];
$dtype = $_POST['Datatype'];
$pk = $_POST['Pk'];
$dbname= $_POST['Dbname'];
$space=$_POST['Space'];
$concount=$_POST['Concount'];
$qps=$_POST['Qps'];
echo "$dbname <br/> $space <br/> $concount <br/> $qps <br/> ";
$result=count($col);
echo($result);
while($result!=0)
{
$result-=1;
echo "<table><tr>";
echo "<td>$col[$result]</td>";
echo "<td>$dtype[$result]</td>";
echo "<td>$pk[$result]</td>";
echo "</tr></table>";
}
?>
</html></body>
What is the error/output that you get on echo?
Also send the number of rows 'rowCount' to the Server using a hidden field. This rowcount will help you define end point for loop
Add to HTML
<input type="hidden" id="rowCount"/>
in JS code
<script>
var objInputFieldRowCount = docuement.getElemendbyId("rowCount");
var jsRowCount = table.getElementsByTagName("TR").length;
objInputFieldRowCount.value = jsRowCount;
</script>
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
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--;
}
}