add/remove multiple rows using checkbox with javascript - javascript

I'm stuck with javascript I working on. I want to add more fields dynamically, my problem is I want to be able to add a row with input boxes. Within the added row, first column contain checkbox, second column contain an increment number, third column contain input txtbox, fourth column checkbox1, fifth column contain input txtbox1 and sixth column contain input txtbox3. Now my question is, how would I add dynamicaly second row under fourth column checkbox1, fifth column txtbox1 and sixth column txtbox3 while maintaing alignment with checkbox,txtbox?
And within the added row, if possible it have to have two button, add row and delete row.
Here is snippet which runs but doesn't do want I expecting:
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var i=0;
i++;
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";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 0;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.name="chkbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
cell5.innerHTML = rowCount -1;
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox1[]";
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox2[]";
cell7.appendChild(element6);
var cell8 = row.insertCell(7);
var element7 = document.createElement("input");
element7.type = "text";
element7.name = "txtbox3[]";
cell8.appendChild(element7);
}
function addVillageNames()
{
}
function removeVillageNames()
{
}
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);
}
}
</SCRIPT>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="Untitled-2" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<TD width="22" rowspan="2"><INPUT type="checkbox" name="chk"/></TD>
<TD width="12" rowspan="2"> 1 </TD>
<TD width="149" rowspan="2"> <INPUT type="text" name="txtbox[]" /> </TD>
<TD width="20"><INPUT type="checkbox" name="chk1"/></TD>
<TD width="12"> 1 </TD>
<TD width="200"> <INPUT type="text" name="txtbox1[]" /></TD>
<TD width="146"> <INPUT type="text" name="txtbox2[]" /> </TD>
<TD width="188"> <INPUT type="text" name="txtbox3[]" /> </TD>
</TR>
<tr>
<TD width="20"> </TD>
<TD width="12"> </TD>
<TD><input type="button" value="Add Row1" onClick="addRow1('dataTable')" /> <input type="button" value="Delete Row1" onClick="deleteRow1('dataTable')" /></TD>
<TD width="146"> </TD>
<TD width="188"> </TD>
</TR>
</TABLE>
<tr>
<td>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" /> </td></tr>
</form>
</BODY>
</HTML>


As much as I love plain/vanilla javascript, I would have to recommend jQuery for your next project. Here's a jsfiddle of the code using only plain/vanilla javascript.
Here's the JavaScript function you'll need
function hasClass(el, cssClass) {
return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}
var rowNumber = 1;
function addRow(tableID) {
var counter = document.getElementById(tableID).rows.length-1;
var row = document.getElementById(tableID);
var newRow0 = row.rows[1].cloneNode(true);
var newRow1 = row.rows[counter].cloneNode(true);
// Increment
rowNumber ++;
newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;
// Update the child Names
var items = newRow0.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var refRow = row.getElementsByTagName('tbody')[0];
refRow.insertBefore(newRow0, refRow.nextSibling);
refRow.insertBefore(newRow1, refRow.nextSibling);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var i = table.rows.length - 1;
while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
table.deleteRow(i)
i--;
}
if (2 < i) {
table.deleteRow(i)
rowNumber --;
}
}
function addChildRow(e, tableID) {
var table = document.getElementById(tableID);
var newRow = table.rows[0].cloneNode(true);
// Increment
if (e > 0)
if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML))
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
else
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)
newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;
// Update the child Names
var items = newRow.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
var parent = table.rows[i].getElementsByTagName('td');
parent[0].rowSpan = counter+2;
parent[1].rowSpan = counter+2;
parent[2].rowSpan = counter+2;
var refRow = table.getElementsByTagName('tr')[e-1];
refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}
function deleteChildRow(e, tableID) {
var table = document.getElementById(tableID);
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
if (e-1 > i)
table.deleteRow(e-1)
}
And here's the HTML
<form action="Untitled-2.php" name="dataTable" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr class="row-parent">
<td width="22" rowspan="2">
<input type="checkbox" name="chk" />
</td>
<td width="12" rowspan="2">1</td>
<td width="149" rowspan="2">
<input type="text" name="txtbox[]" />
</td>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="12"> </td>
<td>
<input type="button" value="+ Child Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
<input type="button" value="- Child Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
</td>
<td width="146"> </td>
<td width="188"> </td>
</tr>
</table>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>
And here's the CSS to hide the first row:
table tr:first-child {
display: none;
}

Related

Append text box and button

how to create textbox/text field and button
JavaScript
<script type="text/javascript">
function addItemTodo(){
var value = document.getElementById('item1').value;
var value2 = document.getElementById('item2').value;
var my_table = document.getElementById('todo');
var rows = my_table.getElementsByTagName("tr").length;
row = my_table.insertRow(rows);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell1.innerHTML = value;
cell2.innerHTML = value2;
}
</script>
HTML Code
<input type="text" id="item1" placeholder="item1" size="12">
<input type="text" id="item2" placeholder="item2" size="14">
<button id="add" onclick="addItemTodo()">Add</button>
<table border="1" style="width:50%" id="todo">
<tr>
<th>Input from 'item1'</th>
<th>Input from 'item2'</th>
<th>Text Box</th>
<th>Button</th>
</tr>
</table>
How to append the text box and button, when clicked the add button

You could create your new elements within your Javascript as strings, and then add them to two new cells (insertCell(2) and insertCell(3)) using .innerHTML like so:
function addItemTodo() {
var value = document.getElementById('item1').value;
var value2 = document.getElementById('item2').value;
var my_table = document.getElementById('todo');
var rows = my_table.getElementsByTagName("tr").length;
var row = my_table.insertRow(rows);
row.insertCell(0).innerHTML = value;
row.insertCell(1).innerHTML = value2;
row.insertCell(2).innerHTML = "<input type='text' placeholder='xxx' class='text-box' />";
row.insertCell(3).innerHTML = "<button>Text</button>";
}
.text-box {
width: 50px;
}
<input type="text" id="item1" placeholder="item1" size="12">
<input type="text" id="item2" placeholder="item2" size="14">
<button id="add" onclick="addItemTodo()">Add</button>
<table border="1" style="width:50%" id="todo">
<tr>
<th>Input from 'item1'</th>
<th>Input from 'item2'</th>
<th>Text Box</th>
<th>Button</th>
</tr>
</table>

add/remove multiple rows using checkbox with JQUERY

I have snippet in javascript that add/remove multiple rows within a table. I would like to implement the same thing into JQUERY. At the moment, the checkboxes does'nt work, but I would like them to work for the sake of userbility. I got no clue on jquery at moment. Would you help on the implementation.
Fiddle:http://jsfiddle.net/ronn_nasso/qN2Z8/
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<link rel="stylesheet" type="text/css" href="addRemove.css"/>
<script language="JavaScript" type="text/javascript">
function hasClass(el, cssClass) {
return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}
var rowNumber = 1;
function addRow(tableID) {
var counter = document.getElementById(tableID).rows.length-1;
var row = document.getElementById(tableID);
var newRow0 = row.rows[1].cloneNode(true);
var newRow1 = row.rows[counter].cloneNode(true);
// Increment
rowNumber ++;
newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;
// Update the child Names
var items = newRow0.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var refRow = row.getElementsByTagName('tbody')[0];
refRow.insertBefore(newRow0, refRow.nextSibling);
refRow.insertBefore(newRow1, refRow.nextSibling);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var i = table.rows.length - 1;
while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
table.deleteRow(i)
i--;
}
if (2 < i) {
table.deleteRow(i)
rowNumber --;
}
}
function addChildRow(e, tableID) {
var table = document.getElementById(tableID);
var newRow = table.rows[0].cloneNode(true);
// Increment
if (e > 0)
if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML))
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
else
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)
newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;
// Update the child Names
var items = newRow.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
var parent = table.rows[i].getElementsByTagName('td');
parent[0].rowSpan = counter+2;
parent[1].rowSpan = counter+2;
parent[2].rowSpan = counter+2;
var refRow = table.getElementsByTagName('tr')[e-1];
refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}
function deleteChildRow(e, tableID) {
var table = document.getElementById(tableID);
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
if (e-1 > i)
table.deleteRow(e-1)
}
</script>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="dataTable" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr class="row-parent">
<td width="22" rowspan="2">
<input type="checkbox" name="chk" />
</td>
<td width="12" rowspan="2">1</td>
<td width="149" rowspan="2">
<input type="text" name="txtbox[]" />
</td>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="12"> </td>
<td>
<input type="button" value="Add Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
<input type="button" value="Delete Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
</td>
<td width="146"> </td>
<td width="188"> </td>
</tr>
</table>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>
</BODY>
</HTML>
Fiddle:http://jsfiddle.net/ronn_nasso/qN2Z8/

$("#ADD").click(function(){
$("table").append($("tr:last").clone(true));
//clone the last row and add it to table
$("tr:last input").val("");
//reset all the inputs in the last row
});
$("#DEL").click(function(){
$("table tr input:checked").parents('tr').remove();
//find the rows with checked check boxes in them and remove them
});
SAMPLE

updated your code to this:
$("#btnAddRow").on("click",function(){
addRow('dataTable');
});
$("#btnDelRow").on("click",function(){
deleteRow('dataTable');
});
$("#btnAddChildRow").on("click",function(){
var index = $(this).closest('tr').index();
addChildRow(index,'dataTable');
});
$("#btnDelChildRow").on("click",function(){
var index = $(this).closest('tr').index();
deleteChildRow(index,'dataTable');
});
working fiddle here: http://jsfiddle.net/qN2Z8/5/ (check this fiddle)
i hope it helps.

Try following code
<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
<table id="POITable" border="1">
<tr>
<td>1</td>
<td><input type="checkbox" id="chck"/></td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete Row" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorePOIbutton" value="Add Row" onclick="insRow()"/></td>
</tr>
</table>
<script>
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow()
{
var x=document.getElementById('POITable');
var new_row = x.rows[0].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild( new_row );
}
</script>
Link to fiddle here

issue in dynamic validation textfield

I want to validate my dynamic text field, I am using javascript.
In this line i am getting the error
<aui:form name="frmaddTravelDetails" id="frmaddTravelDetails" action="<%=processActionURL.toString()%>" method="post" onSubmit="return validateAllInputBoxes(event)">
error message:
Cannot return from outside a function or method.
view.jsp:
<script type="text/javascript" >
function addRow(tableID) {
//var uniqueId=1;
var rowid = window.document.getElementById(1).id;
alert("First row id-->"+rowid);
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
alert("value of rowCount"+rowCount);
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="selectDel[]"+rowCount;
//cell1.appendChild(element1);
var cell2 = row.insertCell(1) ;
var element2 = document.createElement("input");
element2.type = "text";
//element2.name = "t02Traveldate[]" +rowCount;
element2.name = "t02Traveldate" +rowCount;
//cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "t02Travelfrom"+rowCount;
element3.value='';
//cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "t02Travelto"+rowCount;
//cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "t02Landmark"+rowCount;
//cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "t02Totalkm"+rowCount;
//cell6.appendChild(element6);
var uniqueId;
/* Start */
for (var i=rowCount;rowCount>7;i++){
uniqueId = i;
//uniqueId=rowCount;
alert("Value of unique id-->"+uniqueId);
cell1.appendChild(element1);
cell2.appendChild(element2);
cell3.appendChild(element3);
cell4.appendChild(element4);
cell5.appendChild(element5);
cell6.appendChild(element6);
document.getElementById("hdn").value=uniqueId;
document.frmaddTravelDetails.submit();
}
/* End */
} function send(tableID) { alert("call send function");
var table = document.getElementById(tableID);
var rowCount1 = table.rows.length;
document.<portlet:namespace/>frmaddTravelDetails.<portlet:namespace/>hdn.value
= ""+rowCount1;
document.<portlet:namespace/>frmaddTravelDetails.submit();
}
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) {
if(rowCount <= 8) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
} stopEvent = function(ffevent) {
var current_window = window;
if(current_window.event) //window.event is IE, ffevent is FF
{
//IE
current_window.event.cancelBubble = true; //this stops event propagation
current_window.event.returnValue = false; //this prevents default (usually is what we want)
}
else
{
//Firefox
ffevent.stopPropagation();
ffevent.preventDefault();
}; }
function validateAllInputBoxes(ffevent) {
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i)
if(inputs[i].type === 'text')
if(inputs[i].length==0)
{
alert("form could not be sent one input text field is empty");
stopEvent(ffevent);
} }
</script> </head> <body> <portlet:actionURL name="processAction" var="processActionURL"/>
<%
EMP_DETAIL empDetail=(EMP_DETAIL) request.getAttribute("empDetail"); %>
<aui:form name="frmaddTravelDetails" id="frmaddTravelDetails" action="<%=processActionURL.toString()%>" method="post" onSubmit="return validateAllInputBoxes(event)">
<table id="dataTable" border="1">
<tr>
<th colspan="7" style="text-align:center;">Employee Travel Details</th></tr>
<tr>
<td>Employee ID</td>
<td colspan="6">
<aui:input name="t02Emplid" label="" type="text" value='<%=empDetail.getM01Emplid() %>' /></td>
</tr>
<tr>
<td>Employee Name</td>
<td colspan="6"><aui:input name="t02Ename" label="" type="text" value='<%=empDetail.getM01Empname() %>' /></td>
</tr>
<tr>
<td>Vehicle Type</td>
<td colspan="6">
<aui:select name="t02Vechiletype" label="" id="selectedVehicle">
<c:forEach items="${empVehicleList}" var="empVehicle" >
<aui:option value="${empVehicle.m04Vehicle_Type}" >${empVehicle.m04Vehicle_Type}</aui:option>
</c:forEach>
</aui:select> </td> </tr>
<tr>
<td>Approver</td>
<td colspan="6">
<aui:select name="t02Approver" label="" id="selectedApprover">
<% List<String> listMangers = (List<String>) request.getAttribute("listManagers");
Set<String> set = new HashSet<String>(listMangers);
System.out.println("SIZE "+set.size());
for (String managerList : set){
%>
<aui:option value="<%=managerList%>" ><%=managerList%></aui:option>
<%
} %>
</aui:select>
</td>
</tr> <tr> <td>Vehicle Number</td>
<td colspan="6">
<aui:input name="t02Vechileno" id="t02Vechileno" type="text" maxlength="10" label="" value="" >
<aui:validator name="required" errorMessage="this-field-is-required"/>
<aui:validator name="alphanum" />
</aui:input>
</td>
</tr>
<tr>
<td>Select</td>
<td>Date(dd/mm/yyyy)</td>
<td>From</td>
<td>To</td>
<td>Landmark</td>
<td colspan="6">Total KM</td>
</tr>
<tr id=1>
<td><aui:input name="selectDel" type="checkbox" label=""/></TD>
<td>
<aui:input name="t02Traveldate" type="text" value="" label="">
<aui:validator name="date" />
</aui:input>
</td>
<td>
<aui:input name="t02Travelfrom" type="text" label="" maxlength="15" value="">
<aui:validator name="required" errorMessage="this-field-is-required"/>
<aui:validator name="alpha" />
</aui:input>
</td>
<td>
<aui:input name="t02Travelto" type="text" label="" maxlength="15" value="" >
<aui:validator name="required" errorMessage="this-field-is-required"/>
<aui:validator name="alpha" />
</aui:input>
</td>
<td>
<aui:input name="t02Landmark" type="text" label="" maxlength="15" value="">
<aui:validator name="required" errorMessage="this-field-is-required"/>
<aui:validator name="alpha" />
</aui:input>
</td>
<td>
<aui:input name="t02Totalkm" type="text" label="" maxlength="7" value="">
<aui:validator name="required" errorMessage="this-field-is-required"/>
<aui:validator name="digits" />
</aui:input>
<input type="hidden" name="hdn" id="hdn" />
</td>
</tr>
</table>
<table id="dataTable1" border="1">
<tr>
<td colspan="7" style="text-align:center;"><aui:button name="submitAction" type="submit" value="Apply" /></td>
<td><aui:button name="addRow" type="button" value="Add Row" onclick="addRow('dataTable')" /></td>
<td><aui:button name="deleteRow" type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></td>
</tr>
</table>
</aui:form> </body> </html>

Usually, when you do onSubmit="return myFunction()" it's to cancel event if myFunction returns false, continue if it returns true.
However your function returns nothing, I don't think the use of "return MyFunction()" is appropriate.
Also, in validateAllInputBoxes you test if(inputs[i].length==0) but input text object
doesn't have a length property (that I know) you should try to test inputs[i].value == null or inputs[i].value.length==0 instead.

How to add dynamic rows in html table?

This is my first post and I am new in PHP, i am trying to build a POS system using PHP, but i stuck in sales module.
Problem is when I scan barcode of an item, it display in textbox where i have set focus, and when i click add item button but when i repeat this step for another item(s), it remove first item and replace it with latest item, i have put my 100% but can't figure out why this is happening, that's why please help me in this regards as i know there are so many good developers in php in this forum.
Here is my code for you:
<script type="text/javascript">
function setFocus(){
document.getElementById("searchitem").focus();
}
function change()
{
var searchitem = document.getElementById('searchitem');
if(searchitem.value == '')
{
searchitem.style.background = 'orange';
}
else
{
searchitem.style.background = '';
}
}
</script>
<?php $name = "Mehroz"; ?>
<SCRIPT language="javascript">
/* setInterval("SANAjax();",5000);
$(function(){
SANAjax = function(){
$('#dataDisplay').prepend("HI This").fadeIn("slow");
}
}) ; */
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 + 0;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.value = '<?php echo $name;?>';
element2.size = "15";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.size = "25";
element3.disabled = "disabled";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.size = "3";
element4.disabled = "disabled";
cell5.appendChild(element4);
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.size = "3";
element5.disabled = "disabled";
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.size = "5";
cell7.appendChild(element6);
var cell8 = row.insertCell(7);
var element7 = document.createElement("input");
element7.type = "text";
element7.size = "5";
cell8.appendChild(element7);
var cell9 = row.insertCell(8);
var element8 = document.createElement("input");
element8.type = "text";
element8.size = "10";
cell9.appendChild(element8);
var cell10 = row.insertCell(9);
var element9 = document.createElement("input");
element9.type = "submit";
element9.value = "Update";
cell10.appendChild(element9);
}
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);
}
}
</SCRIPT>
<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />
</head>
<body onload="setFocus();change();">
<div class="left">
<form action="javascript:addRow('dataTable')" method="POST">
<input id="searchitem" name="add" type="text" onkeyup="change()" size="75" onclick="javascript:addRow('dataTable')"></input></td><td width="25%" colspan="2">
<input type="submit" value="New Item" name="search">
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></form>
</br>
<table width="98%" id="dataTable">
<tr bgcolor="97c950">
<b>
<td align="center" width="3%"></td>
<td align="center" width="5%">S#</td>
<td align="center" width="15%">Barcode</td>
<td align="center" width="27%">Item Name</td>
<td align="center" width="4%">Stock</td>
<td align="center" width="4%">Qty</td>
<td align="center" width="6%">Price</td>
<td align="center" width="6%">Disc.Rs.</td>
<!-- <td align="center" width="7%">Disc.%</td> -->
<td align="center" width="10%">Total</td>
<td align="center" width="23%"></td></tr>
<!-- <form action="javascript:addRow('dataTable')" method="POST">
<INPUT type="text" name="add" value=""/>
<INPUT type="submit" value="Add Row" name="search" />
</form> -->
<TR>
<TD><INPUT type="checkbox" name="chk" /></TD>
<TD> 1 </TD>
<TD> <INPUT type="textbox" size="15" /> </TD>
<TD> <INPUT type="textbox" size="25" disabled="disabled" /> </TD>
<TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
<TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
<TD> <INPUT type="textbox" size="5" /> </TD>
<TD> <INPUT type="textbox" size="5" /> </TD>
<TD> <INPUT type="textbox" size="10" /> </TD>
<TD> <INPUT type="submit" value="Update" /> </TD>
</TR>
</form>
</table>
</div>

Long story short, this is the code ( if I understood correctly what you are trying to achive ):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#searchitem").focus().filter('input[value!=""]').addClass("orange");
});
</script>
<style type="text/css">
.orange
{
background-color: orange;
}
table#dataTable
{
empty-cells : show;
}
table#dataTable th
{
text-align : center;
background-color: #97C950;
}
.saved
{
background-color: green;
}
</style>
</head>
<body>
<form action="" method="POST" onSubmit="">
<input id="searchitem" type="text" size="75" value="" >
<input type="submit" name="search" value="New Item" >
<input id="deleteRow" type="button" value="Delete Row" >
</form>
<table style="width:98%;" id="dataTable">
<tr>
<th colspan="2" style="width:5%;">S#</th>
<th style="width:15%;">Barcode</th>
<th style="width:27%;">Item Name</th>
<th style="width:4%;">Stock</th>
<th style="width:4%;">Qty</th>
<th style="width:6%;">Price</th>
<th style="width:6%;">Disc.Rs.</th>
<th style="width:10%;">Total</th>
</tr>
</table>
<script type="text/javascript">
$('#searchitem').change(function()
{
var t = $('#dataTable');
t.append('<tr> \
<td><input type="checkbox"></td> \
<td>'+t.find('tr').length+'</td> \
<td><input size="15" type="text" value="'+$(this).val()+'"></td> \
<td><input size="25" type="text" value=""></td> \
<td><input size="3" type="text" value=""></td> \
<td><input size="3" type="text" value=""></td> \
<td><input size="5" type="text" value=""></td> \
<td><input size="10" type="text" value=""></td> \
<td><input size="15" type="text" value=""></td> \
<td><input type="button" value="Update" onClick="saveItem(event);"></td> \
</tr>');
});
function saveItem(ev)
{
// here read all rows from that row, send them via AJAX to the server to be saved
// you get the current row by looking at ev.currentTarget, something like this in Firefox
var args = [];
$(ev.currentTarget).parents('tr:first').find('input[type="text"]').each(function(){ args.push( $(this).val() ); });
$.post(
'saveItem.php',
args,
function(){ $(ev.currentTarget).addClass('saved');} /* this is triggered onSucces */
);
}
</script>
</body>
</html>
This is the long story:
you need to insert a new row in the table when you type something in input#searchitem
you don't save it in the database yet, first you insert the other columns (quantity, price etc ...)
them you hit the update button, the new row is inserted in the database and if everithing is OK the button will be colored "green"
This code is to give you a clue and to push you in the right direction (it's like a proof of concept), so here are more recomandations (hard to give beacause I still didn't understod exactly what are you trying to achive):
GLOBAL:
don't just copy/paste this code, try to undertand it, and change it for your own needs
CSS:
use external style sheet
set fixed columns width for the table
Javascript:
check if the bar code exists, highlight the row, and push it in to the visible area if is not visible (or show a box with " there are 5 more hidden rows), you can give names for the inputs like name=barcode ...
use those names in the args array to create a named array.
Hope this will help you.

How to dynamically add Date in a form using JavaScript?

I have this form code to dynamically add rows. How can I add a date dynamically?
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<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";
cell3.appendChild(element2);
}
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);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
This the code for adding row dynamically
This is the code for calendar
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<INPUT type="text" name="testinput" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'testform',
// input name
'controlname': 'testinput'
});
</script>

add a new cell for example,
var cell4 = row.insertCell(3);
cell4.innerHTML = new Date();
.
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
<TD> <INPUT type="text" name="testinput" /></TD>
</TR>
can you explain where to insert the date?

Categories