I have a table single input field with calendar when i click on input drop down calendar is coming to select the date.
By using javascript i am inserting a new row in the table . Row is inserting in the table but date calendar not coming in new inserted row date field as in above line .
I am using the following code
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "minenddate" + (rowCount);
element1.className = "form-control";
cell1.appendChild(element1);
rowCount = parseInt(rowCount) + 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
$(function() {
count = document.getElementById("minsize").value;
i = 0;
dateId = "datepicker2";
for (i = 0; i <= (count + 1); i++) {
dateId = "#datepicker2" + i;
$(dateId).datepicker();
}
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Date</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='datepicker20' value="2018-08-09" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
You have to re-initialize the datepicker on dynamically added
elements.
Here's how to add it.
$('#'+element1.id).datepicker();
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "minenddate" + (rowCount);
element1.className = "form-control";
cell1.appendChild(element1);
$('#' + element1.id).datepicker(); //add this line to initialize
rowCount = parseInt(rowCount) + 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
$(function() {
count = document.getElementById("minsize").value;
i = 0;
dateId = "datepicker2";
for (i = 0; i <= (count + 1); i++) {
dateId = "#datepicker2" + i;
$(dateId).datepicker();
}
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="resources/js/jquery.dataTables.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Date</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='datepicker20' value="2018-08-09" class="form-control" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
Related
newbie here.. I was looking for some kind of function that can total the amount of one input type in table which is the Amount input.
I've tried parseInt function to the amount and its cell but it doesn't work.
I think its getting only the .innerHTML but not what it contains which should be the number.
var entryButton = document.getElementById('inputButton')
const tbodyEl = document.querySelector("tbody");
var row = 1;
//click button event
entryButton.addEventListener('click', tableDisplay);
//input value and displaying information
function tableDisplay(e) {
e.preventDefault()
var name = document.getElementById('inputName').value;
var amount = document.getElementById('inputAmount').value;
var date = document.getElementById('inputDate').value;
var remarks = document.getElementById('inputRemarks').value;
document.getElementById('inputName').value = '';
document.getElementById('inputAmount').value = '';
document.getElementById('inputDate').value = '';
document.getElementById('inputRemarks').value = '';
if (!name || !amount || !date || !remarks) {
alert("Please fill all the blanks")
return;
}
name.value = " ";
amount.value = " ";
date.value = " ";
remarks.value = " ";
var table = document.getElementById('displayTable');
var newRow = table.insertRow(row);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = name
cell2.innerHTML = date
cell3.innerHTML = amount
cell4.innerHTML = remarks
selectedRow()
row++;
}
//adding total amount function??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<link
href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"
rel="stylesheet"
/>
<link
href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Expense Tracker</title>
</head>
<body>
<h1 class="d-flex justify-content-center mb-5 mt-5">Expense Tracker</h1>
<form class="form d-flex justify-content-center mb-5">
<span class="fw-bolder m-1"
>Name: <input class="m-1" id="inputName" type="text"
/></span>
<span class="fw-bolder m-1"
>Date: <input class="m-1" id="inputDate" type="date"
/></span>
<span class="fw-bolder m-1"
>Amount: <input type="number" class="totalAmount m-1" id="inputAmount"
/></span>
<span class="fw-bolder m-1"
>Remarks <input class="m-1" id="inputRemarks" type="text"
/></span>
<button class="m-1" id="inputButton">
<i class="icon-level-down fs-4"></i>
</button>
<!-- How to delete specific row -->
<button class="m-1" type="button" id="deleteSelection">
<i class="icon-remove-sign fs-4"></i>
</button>
</form>
<table class="table m-5" id="displayTable">
<thead>
<tr id="numero">
<th scope="col">
<i class="icon-file-text fw-bolder fs-3"></i> Description
</th>
<th scope="col"><i class="icon-calendar fw-bolder fs-3"></i> Date</th>
<th scope="col"><i class="icon-usd fw-bolder fs-3"></i> Amount</th>
<th scope="col"><i class="icon-pencil fs-3"></i> Remarks</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- //passing total amount?? -->
<span class="d-flex justify-content-center"
>Total: <input type="number" id="total" value="0" disabled
/></span>
<script src="script.js"></script>
</body>
</html>
I created a function called total(), which calculates the total of the column 'Amount' and prints it inside the input #total.
var entryButton = document.getElementById('inputButton')
const tbodyEl = document.querySelector("tbody");
var row = 1;
//click button event
entryButton.addEventListener('click', tableDisplay);
//input value and displaying information
function tableDisplay(e) {
e.preventDefault()
var name = document.getElementById('inputName').value;
var amount = document.getElementById('inputAmount').value;
var date = document.getElementById('inputDate').value;
var remarks = document.getElementById('inputRemarks').value;
document.getElementById('inputName').value = '';
document.getElementById('inputAmount').value = '';
document.getElementById('inputDate').value = '';
document.getElementById('inputRemarks').value = '';
if (!name || !amount || !date || !remarks) {
alert("Please fill all the blanks")
return;
}
name.value = " ";
amount.value = " ";
date.value = " ";
remarks.value = " ";
var table = document.getElementById('displayTable');
var newRow = table.insertRow(row);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = name
cell2.innerHTML = date
cell3.innerHTML = amount
cell4.innerHTML = remarks
total()
row++;
}
function total(){
var table = document.getElementById('displayTable');
let total = 0
for(let i = 1; i<table.rows.length; i++){
total+=Number(table.rows[i].cells[2].innerText)
}
const totalInput = document.getElementById('total')
totalInput.value=total
}
I am building a sample project named Tennis Club Management based on HTML,CSS,Javascript.In this i have html pages like profile.html, manageFees.html,index.js etc. In manageFees.html, when the page gets loaded, a dynamic table gets displayed which shows data from online API in tabular format and there is also a search box for searching the records.
Problem :- When i search a particular data(record) in search box. the search result gets displayed in the table , but the table heading gets disappeared and table CSS properties get distorted.
Below are the code files and Screenshots
index.js
/* --------------------MANAGE FEES PAGE------------------- */
/*----------TESTING CODE FOR SHOW FEES-----------*/
function showfees() {
console.log("Show Fees button clicked...");
document.querySelector(".showfees").style.display = "none";
document.querySelector("#feesregistration").style.display = "none";
if (istableCreated) {
document.querySelector("#table-responsive").style.display = "none";
}
document.querySelector(".searchbox").style.display = "block";
if (istableCreated == false) {
istableCreated = true;
var myTable = document.createElement("table");
myTable.className = "table-responsive";
myTable.id = "table-responsive";
myTable.style.marginLeft = "15%";
myTable.style.paddingLeft = "8%";
myTable.style.paddingRight = "11%";
document.body.appendChild(myTable);
var maintr = document.createElement("tr");
document.body.appendChild(myTable).appendChild(maintr);
var thmatchID = document.createElement("th");
thmatchID.innerHTML = "Match ID";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thmatchID);
var thmatchplayerName = document.createElement("th");
thmatchplayerName.innerHTML = "Player Name";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thmatchplayerName);
var thmatchDate = document.createElement("th");
thmatchDate.innerHTML = "Fees Date";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thmatchDate);
var thFeesAmount = document.createElement("th");
thFeesAmount.innerHTML = "Amount";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thFeesAmount);
var thMembershipType = document.createElement("th");
thMembershipType.innerHTML = "Membership Type";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thMembershipType);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// console.log(this.responseText);
var JSONarr = JSON.parse(this.responseText);
console.log(JSONarr);
// ----------SUPER TESTING CODE-----------
for (var i = 0; i < JSONarr.length; i++) {
console.log(JSONarr[i].id, JSONarr[i].name, JSONarr[i].address.city, JSONarr[i].address.zipcode);
var myTr = document.createElement("tr");
document.body.appendChild(myTable).appendChild(myTr);
var tdID = document.createElement("td");
tdID.innerHTML = `${JSONarr[i].id}`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdID);
var tdplayerName = document.createElement("td");
tdplayerName.innerHTML = `${JSONarr[i].name}`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdplayerName);
var tdAddress = document.createElement("td");
tdAddress.innerHTML = `04/04/2020`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdAddress);
var tdFeesAmount = document.createElement("td");
tdFeesAmount.innerHTML = `10000`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdFeesAmount);
var tdMembershipType = document.createElement("td");
tdMembershipType.innerHTML = `Annually`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdMembershipType);
}
}
};
xhttp.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xhttp.send();
}
else {
document.querySelector("#table-responsive").style.display = "block";
}
if (statictableboolean == true) {
document.querySelector(".staticTable").style.display = "none";
}
// document.querySelector(".staticTable").style.display = "none";
}
//-------------SEARCHING IMPLEMENTATION IN SEARCH BOX----------------
function mySearch() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("searchbox");
filter = input.value.toUpperCase();
table = document.getElementById("table-responsive");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
}
else {
tr[i].style.display = "none";
}
}
}
manageFees.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manage Fees</title>
<!-- ADDING FONT AWESOME CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ADDING BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- ADDING STYLE.CSS -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body onload="showfees()">
<!-- ADDING BUTTONS LIKE SHOW MATCHES, ADD MATCHES USING CSS BOOTSTRAP -->
<!-- <button type="button" class="btn btn-secondary showfees" onclick="showfees()">Show Fees</button> -->
<button type="button" class="btn btn-secondary addfees" onclick="addfees()">Add Fees</button>
<button type="button" class="btn btn-danger showfees" onclick="showfees()">Back</button>
<!-- ADDING SEARCH BAR -->
<input type="text" class="searchbox" id="searchbox" onkeyup="mySearch()" placeholder="Search by ID...">
<!-- CREATING REGISTRATION PAGE FOR ADDING FEES -->
<table class="feesregistration" id="feesregistration">
<!-- <tr>
<td>
<label>ID :</label>
</td>
<td>
<input type="text" class="feesid" id="feesid">
</td>
</tr> -->
<tr>
<td>
<label>Name :</label>
</td>
<td>
<input type="text" class="playerNameFees" id="playerNameFees" maxlength="40">
</td>
<td>
<label class="playerNameFeeserror"></label>
</td>
</tr>
<tr>
<td>
<label>Fees For :</label>
</td>
<td>
<select class="feesFor" id="feesFor">
<option value="select">---Select---</option>
<option value="court">Court</option>
<option value="tournament">Tournament</option>
<option value="both">Both</option>
</select>
</td>
<td>
<label class="feesForerror"></label>
</td>
</tr>
<tr>
<td>
<label>Fee Type :</label>
</td>
<td>
<select class="feesType" id="feesType">
<option value="select">---Select---</option>
<option value="monthly">Monthly</option>
<option value="halfyearly">Half Yearly</option>
<option value="annually">Annually</option>
</select>
</td>
<td>
<label class="feesTypeerror"></label>
</td>
</tr>
<tr>
<td>
<label>Date :</label>
</td>
<td>
<input type="date" class="feesdate">
</td>
<td>
<label class="feesdateerror"></label>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-success savefees" onclick="saveFees()">SAVE</button>
</td>
<td>
<button type="button" class="btn btn-info clearfees" onclick="clearfees()">CLEAR</button>
</td>
</tr>
</table>
<!-- ADDING BOOTSTRAP JS -->
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<!-- ADDING INDEX.JS -->
<script src="/js/sidebar.js"></script>
<script src="/js/index.js"></script>
</body>
</html>
Screenshots
Any solution please ?
my javascript function is below where I am creating the 2 textboxes dynamically each time when the addRow() function is called on button click.Also,I am setting name attribute for each textbox dynamically.but I am not able to access these textbox values from servlet and getting null value as output.
<html>
<head>
<script>
var count=1;
function addRow()
{
var table = document.getElementById('table');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "item "+ count;
// document.write(element1.name);
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "amount" + count;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = ' <input type="button" value="Edit" onclick="editRow(this)"/><input type="button" value="Delete" onclick="deleteRow(this)"/>';
cell3.setAttribute("style", "display:none;");
var cell4 = row.insertCell(3);
cell4.innerHTML = '<input type="button" value="Save" onClick="saveRow(this)">';
document.listform.hfield.value=rowCount;
count++;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Create your list</title>
</head>
<body>
<form name="listform" method="post" action="Billingservlet">
<div class="wrap">
<center>
<div id="display">
<table id='table' border="0">
<tr id='id'>
<th>
Item Name
</th>
<th>
No. of units
</th>
</tr>
</table>
<input type="button" value="Add another item" onclick="addRow()">
<input type="submit" value="Submit List">
<input type="hidden" name="hfield">
</div>
</center>
</div>
</form>
</body>
</html>
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.
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?