table data is clear after submitting the form - javascript

I am working with javascript
when I submit the form I store the data in a table but the table data is also clear
index.html
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick='onFormSubmit()'/>
</form>
<br/> <br/>
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
index.js
function onFormSubmit() {
document.getElementById('fname').value;
document.getElementById('lname').value;
document.getElementById('location').value;
readFormData();
}
function readFormData() {
var data = {};
data.fname = document.getElementById('fname').value;
data.lname = document.getElementById('lname').value;
data.location = document.getElementById('location').value;
insertnewrecord(data);
}
function insertnewrecord(data) {
document.getElementById('ffname').innerHTML = data.fname;
document.getElementById('llname').innerHTML = data.lname;
document.getElementById('olocation').innerHTML = data.location;
resetform();
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
I am working with html with javascript
when I submit the form then not able to see the data in table I put debug and I can see the data is store in table but then tabale data is clear.

Here is my solution, you need to insert a row each time and then instead of doing a submit, just clear the form instead!
reference
function onFormSubmit() {
insertRow();
}
function insertRow() {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var location = document.getElementById('location').value;
var table = document.getElementById("myTable");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(-1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = location;
resetform();
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='button' value='submit' onclick='onFormSubmit()' />
</form>
<br/> <br/>
<table id="myTable">
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

you just need to prevent form to refresh page
then you just need remove function that clear form Cell
index.html
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick="event.preventDefault(); onFormSubmit()" /><!-- <<<<<<<<<<<<<<<<< -->
</form>
<br /> <br />
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
index.js
function onFormSubmit() {
document.getElementById('fname').value;
document.getElementById('lname').value;
document.getElementById('location').value;
readFormData();
}
function readFormData() {
var data = {};
data.fname = document.getElementById('fname').value;
data.lname = document.getElementById('lname').value;
data.location = document.getElementById('location').value;
insertnewrecord(data);
}
function insertnewrecord() {
document.getElementById('ffname').innerHTML = data.fname;
document.getElementById('llname').innerHTML = data.lname;
document.getElementById('olocation').innerHTML = data.location;
// resetform(); <<<<<<<<<<<<<<<<<
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}

You should declare the data object globally inside the js script. Also, use event.preventDefault() inside custom button click function.
Also, I changed the insertnewrecord() function to handle multiple insert operations in the table.
Check following code:
var data = {};
function onFormSubmit(e) {
readFormData();
e.preventDefault();
}
function readFormData() {
data.fname = document.getElementById("fname").value;
data.lname = document.getElementById("lname").value;
data.location = document.getElementById("location").value;
insertnewrecord(data);
}
function insertnewrecord(data) {
var table = document.getElementById("show-data");
table.innerHTML += `<tr> <td>${data.fname}</td> <td>${data.lname}</td> <td>${data.location}</td> </tr>`;
resetform();
}
function resetform() {
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("location").value = "";
}
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick='onFormSubmit(event)' />
</form>
<br/> <br/>
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody id="show-data">
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>

use event.preventDefault(); in your onFormSubmit
function
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

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>

How to insert particular cell values of HTML table in TextBoxes using JavaScript?

I have a HTML form. The save and delete button are working fine. But I want to write JavaScript (not jQuery or AngularJS) code of edit and update button. When I click the edit the data of particular row should be displayed in the textboxes and when I press update button the updated data of that particular row should get submitted in the HTML table.
function addRow() {
var id= document.getElementById("id");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("email");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= id.value;
row.insertCell(1).innerHTML= name.value;
row.insertCell(2).innerHTML= gender.value;
row.insertCell(3).innerHTML= address.value;
row.insertCell(4).innerHTML= email.value;
row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';
id.value="";
name.value="";
gender.value="";
address.value="";
email.value="";
}
function updateRow(obj){
}
function reset(){
var id= document.getElementById("id");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("email");
var table = document.getElementById("myTableData");
id.value="";
name.value="";
gender.value="";
address.value="";
email.value="";
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
}
Add Function will look like this..
function addRow() {
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var id = document.getElementById("id");
var name = document.getElementById("name");
var gender = document.getElementById("gender");
var address = document.getElementById("address");
var email = document.getElementById("email");
var cell1 = row.insertCell(0);
cell1.innerHTML=id.value;
var cell2 = row.insertCell(1);
cell2.innerHTML = name.value;
var cell3 = row.insertCell(2);
cell3.innerHTML = gender.value;
var cell4 = row.insertCell(3);
cell4.innerHTML = address.value;
var cell5 = row.insertCell(4);
cell5.innerHTML = email.value;
var cell6 = row.insertCell(5);
var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"UpdateRow(" + rowCount + ")\" VALUE=\"Update Row\">|<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow(" + rowCount + ")\" VALUE=\"Delete Row\">";
cell6.innerHTML = strHtml5;
}
</script>
I copied your code and executed in my machine and found minor errors as well as big mistake you did by not using form tag and created the form.
After reverse engineering I appended your code and made it fully functional as well as simple to understand.
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<!-- ### <script type="text/javascript" src="D:\LatestNewProject-JavaScript\script.js"></script> -->
</head>
<body>
<div id="myform">
<b>Employee Information</b>
<form method="post" action=""> <!-- ###Form tag is not used -->
<table>
<tr>
<td>ID:</td> <!-- ###change id to empId as id="id" will cause ambiguity -->
<td><input type="text" id="empId"></td> <!-- ###use text field instead of number to make input of 3 digit no. easy -->
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Gender:</td> <!-- ### imstead of select option you must use radio button -->
<td> <input type="radio" id="gender" value="male" /> Male <br>
<input type="radio" id="gender" value="Female" /> FeMale
</td>
</tr>
<tr>
<td>Address:</td>
<td><input type="textarea" id="address"></td> <!-- ###insted of text field you should give textarea field-->
</tr>
<tr>
<td>Email:</td> <!-- ###email is new element in HTML5 so, id="email" can cause issue, so email=Email -->
<td><input type="email" id="mail" name="Email"></td>
</tr>
<!-- No need to use this [<table>] --> <!-- ### onclick should be onClick [best practice]-->
<tr>
<td><input type="button" id="add" value="Add" onclick="javascript:addRow()"></td>
<td><input type="reset" value="Reset" /> </td>
<td><input type="button" id="update" value="Update" onClick=""></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
<td><b>Gender</b></td>
<td><b>Address</b></td>
<td><b>Email</b></td>
<td><b>Action</b></td>
</tr>
</table>
</div>
<!-- ============ JavaScript ========== -->
<script>
function addRow() {
var id= document.getElementById("empId");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("mail");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= empId.value;
row.insertCell(1).innerHTML= name.value;
row.insertCell(2).innerHTML= gender.value;
row.insertCell(3).innerHTML= address.value;
row.insertCell(4).innerHTML= mail.value;
row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';
empId.value="";
name.value="";
gender.value="";
address.value="";
mail.value="";
}
function updateRow(obj){
}
function reset(){
var id= document.getElementById("empId");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("mail");
var table = document.getElementById("myTableData");
empId.value="";
name.value="";
gender.value="";
address.value="";
mail.value="";
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
</script>
</body>
</html>

How to show temp data and delete in html table?

I have three input box and below one button
when I click that button I want input data should come into html table and sholud able to delete that record
Kindly help me out
advance thanks
I did the same with one input box. So making it for three shouldn't be an issue. You must be looking out for this code:
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
You can either press Enter or click on the button to insert temp data. Okay, just heads up, as you didn't put enough code, you can do it this way:
$(function () {
$("#tempInsert").keyup(function (e) {
if (e.keyCode == 13)
insertRow();
});
$("#tempBtn").click(function () {
insertRow();
});
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
});
function insertRow() {
if ($("#tempInsert").val().length > 0)
$("table tbody").append('<tr><td>' + $("#tempInsert").val() + '</td><td><a href="#">×</td></tr>');
$("#tempInsert").val("");
}
* {font-family: 'Segoe UI'; text-decoration: none;}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<input type="text" id="tempInsert" />
<input type="button" id="tempBtn" value="Add" />
<table width="100%">
<thead>
<tr>
<th width="85%">Stuff</th>
<th width="15%">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
I supposed that you are absolutely new and I wrote a simple example for you, just to get the idea of how to do.
HTML
<table style="border: 1px solid red; width: 200px; height: 80px; ">
<tr>
<td id="nm"></td>
</tr>
<tr>
<td id="fnm"></td>
</tr>
<tr>
<td id="ag"></td>
</tr>
</table>
Name : <input type="text" id="n"><br />
F/Name: <input type="text" id="fn"><br />
Age : <input type="text" id="age"><br />
<button>Click</button>
SCRIPT
$(function(){
$('button').click(function(event) {
$('#nm').text($('#n').val());
$('#fnm').text($('#fn').val());
$('#ag').text($('#age').val());
$('#n').val('');
$('#fn').val('');
$('#age').val('');
});
});
$('#submitBtn').click(function(){
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
$('#td1').html(input1);
$('#td2').html(input2);
$('#td3').html(input3);
});
<table>
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
</table>
Try this Demo
function Add() {
var tbl = document.getElementById("tbl");
var fname = document.getElementById("FName").value;
var lname = document.getElementById("LName").value;
var city = document.getElementById("City").value;
if (fname == "" && lname == "" && city == "")
alert("Enter Text in input box");
else {
var tblcount = tbl.rows.length;
var row = tbl.insertRow(tblcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = city;
}
}
#tbl tr td {
padding: 0 10px;
}
<input id="FName" type="text"></input>
<input id="LName" type="text"></input>
<input id="City" type="text"></input>
<button id="btnAdd" onclick="Add();">Add</button>
<table id="tbl">
<tr>
<td>Fisrt Name</td>
<td>Last Name</td>
<td>City</td>
</tr>
</table>

Creating 2 html tables using javascript

I'm trying to create 2 dynamic html tables using Javascript with data from html inputs. I was able to create the first table I wanted but I've been unable to create 2 different tables using different inputs on the same page.
I tried changing the addRow() functions in the html and JS to have different names but this caused both tables to fail.
Any help would be appreciated. Here's the test code I've been using.
<!DOCTYPE html>
<body onload="load()">
<div id="myform">
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" id="age">
<input type="button" id="add" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table>
<tr>
<td>Height:</td>
<td><input type="text" id="height"></td>
</tr>
<tr>
<td>Width:</td>
<td><input type="text" id="width">
<input type="button" id="addDim" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Name</b></td>
<td><b>Age</b></td>
</tr>
</table>
<table id="myTableData2" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Height</b></td>
<td><b>Width</b></td>
</tr>
</table>
</body>
</html>
function addRow() {
var myName = document.getElementById("name");
var age = document.getElementById("age");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="deleteRow(this)">';
row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;
var width = document.getElementById("width");
var height = document.getElementById("height");
var table2 = document.getElementById("myTableData2");
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row.insertCell(1).innerHTML = width.value;
row.insertCell(2).innerHTML = height.value;
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
function load() {
console.log("Page load finished");
}
Looks like in the bottom section, you're not using the row2 variable you've defined.
Should be:
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row2.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row2.insertCell(1).innerHTML = width.value;
row2.insertCell(2).innerHTML = height.value;
here how i did it. you can use the same function for any amount of table, if pass the parameter in the function.
http://jsfiddle.net/8t5aqomk/2/
function myFunction(thisTable) {
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var age = document.getElementById('age').value;
var info = [firstName,lastName,age]
var table = document.getElementById(thisTable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cellCount = table.rows[0].cells.length;
for(var i=0; i<cellCount; i++) {
row.insertCell(i).innerHTML=info[i];
}
}

Clone a row in an HTML table and call JavaScript function with the new row

I have a table which has one row in which I multiply two fields, namely quantity and rate/quantity, to get the product total. I have provided a button to add a new row which basically clones the 1st row. Now I want the cloned row to also have the same product as the 1st row. I have tried the following code:
<!DOCTYPE html>
<html>
<h3 align="center">K J Somaiya College Of Engineering, Vidyavihar, Mumbai-400 077</h3>
<h3 align="center">Department Of Information Technology</h3>
<body>
<script>
function WO1() {
var qty = document.getElementById('qty').value;
var price = document.getElementById('price').value;
answer = (Number(qty) * Number(price)).toFixed(2);
document.getElementById('totalprice').value = answer;
}
function WO2() {
var qty = document.getElementById('qty1').value;
var price = document.getElementById('price1').value;
answer = (Number(qty) * Number(price)).toFixed(2);
document.getElementById('totalprice1').value = answer;
}
function WO3() {
var qty = document.getElementById('qty2').value;
var price = document.getElementById('price2').value;
answer = (Number(qty) * Number(price)).toFixed(2);
document.getElementById('totalprice2').value = answer;
}
</script>
<script>
function validateNumbe()
{
var x=document.getElementById("floor").value;
if (x==null || x=="")
{
alert("Floor must be entered");
return false;
}
}
function validateN()
{
var x=document.getElementById("lab").value;
if (x==null || x=="")
{
alert("Laboratory Name must be entered");
return false;
}
}
function validateNumb()
{
var x=document.getElementById("room").value;
if (x==null || x=="")
{
alert("Room No must be entered");
return false;
}
}
function validateNum()
{
var x=document.getElementById("labi").value;
if (x==null || x=="")
{
alert("Name of Laboratory Incharge must be entered");
return false;
}
}
function validateNu()
{
var x=document.getElementById("year").value;
if (x==null || x=="")
{
alert("Budget for the year must be entered");
return false;
}
}
</script>
<table width="100%" cellspacing="10">
<tr>
<td align="left">Date:<input type="date" name="date"/></td>
<td align="right">Floor: <input type="text" id="floor" onchange="validateNumbe()"
onblur="validateNumbe()"/> </td>
</tr>
<tr>
<td align="left">Laboratory Name: <input type="text" id="lab" onchange="validateN()"
onblur="validateN()"/></td>
<td align="right">Room no: <input type="text" id="room" onchange="validateNumb()"
onblur="validateNumb()"/></td>
</tr>
<tr>
<td align="left">Name of Laboratory Incharge: <input type="text" id="labi"
onchange="validateNum()" onblur="validateNum()"/></td>
<td align="right">Budget for the year: <input type="text" id="year" onchange="validateNu()"
onblur="validateNu()"/></td>
</tr>
</table>
<h3 align="left"><b>Computer</b><h3>
<table id="POITable" border="1" width="100%">
<tr>
<td style="width:10%">Sr No.</td>
<td>Item Description</td>
<td>Quantity</td>
<td>Rate(Inclusive of Taxes)</td>
<td>Total Cost</td>
</tr>
<tr>
<td>1</td>
<td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
<td><input type='text' name='Quantity' id='qty' class="qty" placeholder='Qty' /></td>
<td><input type='text' name='Rate' id='price' class="price" placeholder='Price (£)'
onChange="WO1()" /></td>
<td><input type='text' name='Total' id='totalprice' class="price" placeholder='Total
Price (£)' /></td>
</tr>
</table>
<input type="button" id="addmorePOIbutton" value="Add New Row"/>
<h3 align="left"><b>Equipment</b><h3>
<table id="POITable1" border="1" width="100%">
<tr>
<th style="width:10%">Sr No.</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Rate(Inclusive of Taxes)</th>
<th>Total Cost</th>
</tr>
<tr>
<td>1</td>
<td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
<td><input type='text' name='Quantity' id='qty1' class="qty" placeholder='Qty' /></td>
<td><input type='text' name='Rate' id='price1' class="price" placeholder='Price (£)'
onChange="WO2()" /></td>
<td><input type='text' name='Total' id='totalprice1' class="price" placeholder='Total
Price (£)' /></td>
</tr>
</table>
<input type="button" id="addmorePOIbutton1" value="Add New Row"/>
<h3 align="left"><b>Furniture</b><h3>
<table id="POITable2" border="1" width="100%">
<tr>
<th style="width:10%">Sr No.</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Rate(Inclusive of Taxes)</th>
<th>Total Cost</th>
</tr>
<tr>
<td>1</td>
<td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
<td><input type='text' name='Quantity' id='qty2' class="qty" placeholder='Qty' /></td>
<td><input type='text' name='Rate' id='price2' class="price" placeholder='Price (£)'
onChange="WO3()" /></td>
<td><input type='text' name='Total' id='totalprice2' class="price" placeholder='Total
Price (£)' /></td>
</tr>
</table>
<input type="button" id="addmorePOIbutton2" value="Add New Row"/>
<script>
( function() { // Prevent vars from leaking to the global scope
var formTable = document.getElementById('POITable');
var newRowBtn = document.getElementById('addmorePOIbutton');
newRowBtn.addEventListener('click', insRow, false); //added eventlistener insetad of inline
onclick-attribute.
function insRow() {
var new_row = formTable.rows[1].cloneNode(true),
numTableRows = formTable.rows.length;
// Set the row number in the first cell of the row
new_row.cells[0].innerHTML = numTableRows;
numTableRows=numTableRows - 1;
var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
inp1.name += numTableRows;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.name += numTableRows;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
inp3.name += numTableRows;
inp3.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
inp4.name += numTableRows;
inp4.value = '';
// Append the new row to the table
formTable.appendChild( new_row );
}
var formTable1 = document.getElementById('POITable1');
var newRowBtn1 = document.getElementById('addmorePOIbutton1');
newRowBtn1.addEventListener('click', insRow1, false); //added eventlistener insetad of inline
onclick-attribute.
function insRow1() {
var new_row = formTable1.rows[1].cloneNode(true),
numTableRows = formTable1.rows.length;
// Set the row number in the first cell of the row
new_row.cells[0].innerHTML = numTableRows;
numTableRows=numTableRows - 1;
var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
inp1.name += numTableRows;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.name += numTableRows;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
inp3.name += numTableRows;
inp3.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
inp4.name += numTableRows;
inp4.value = '';
// Append the new row to the table
formTable1.appendChild( new_row );
}
var formTable2 = document.getElementById('POITable2');
var newRowBtn2 = document.getElementById('addmorePOIbutton2');
newRowBtn2.addEventListener('click', insRow2, false); //added eventlistener insetad of inline
onclick-attribute.
function insRow2() {
var new_row = formTable2.rows[1].cloneNode(true),
numTableRows = formTable2.rows.length;
// Set the row number in the first cell of the row
new_row.cells[0].innerHTML = numTableRows;
numTableRows=numTableRows - 1;
var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
inp1.name += numTableRows;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.name += numTableRows;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
inp3.name += numTableRows;
inp3.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
inp4.name += numTableRows;
inp4.value = '';
// Append the new row to the table
formTable2.appendChild( new_row );
}
})();
function myfun()
{
var lun= document.getElementById('POITable').rows.length;
document.getElementsByName("len")[0].value = lun-1;
var lun1= document.getElementById('POITable1').rows.length;
document.getElementsByName("len1")[0].value = lun1-1;
var lun2= document.getElementById('POITable2').rows.length;
document.getElementsByName("len2")[0].value = lun2-1;
}
function myFunction()
{
window.print();
}
</script>
<input type="hidden" name="len" value="1">
<input type="hidden" name="len1" value="1">
<input type="hidden" name="len2" value="1">
<table width="100%">
<tr>
<td><br><br><br></td>
<td><br><br><br></td>
<td><br><br><br></td>
</tr>
<tr>
<td align="left">Signature <br>Lab-In-Charge</td>
<td align="center">Signature<br>Lab Assistant</td>
<td align="right">Signature <br>Head of Department</td>
</tr>
</table>
<br><br><br>
<input type="submit" value="SUBMIT" onclick='this.form.action="archive.php";myfun();'>
<input type="submit" value="SAVE AND CONTINUE LATER"
onclick='this.form.action="myphpformhandler.php";myfun();'>
</form>
<h3 align="center"><button onclick="myFunction()"><h3>Print this page</h3></button></h3>
</body>
</html>
i have created the JSFiddle but the multiplication is not working in it.
http://jsfiddle.net/xkY4Z/2/
Not a perfect solution to your problem but a bit closer Working Fiddle
Done using jQuery
$(document).on('change','input', function () {
var id = $(this).attr('id').split("-");
var answer = (Number($('#qty-' + id[1]).val()) * Number($('#price-' + id[1]).val())).toFixed(2);
$('#totalprice-' + id[1]).val(answer);
});
Update
Working Fiddle with name
Latest
Fiddle with Grand total

Categories