My end goal with this project is to basically have a spreadsheet (really just a giant HTML table) with the contenteditable value set to true. The other thing I need is to be able to create an input box, and drag it anywhere on the screen, including on the spreadsheet. Right now, whenever I try to drag an input box, it gives me the little red circle with a line through it in the top right corner of the box, telling me that I can't drop it anywhere.
My HTML is so long because it's a huge spreadsheet, but with a couple hundred fewer rows, it basically looks like this:
$(document).ready(function() {
$("#addTileButton").click(function() {
$("body").append("<div id=draggable></div>");
var tile = $("<form><input id=tile draggable=true type=text> </form>");
$("#draggable").append(tile);
$("#tile").draggable();
});
});
td {
border: 1px solid black;
}
#tile {
cursor: move;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
<button id="addTileButton">Click to add tile</button>
<div contenteditable="true" id="tableDiv">
<table cellspacing="0" border="0">
<colgroup width="509"></colgroup>
<colgroup span="5" width="166"></colgroup>
<tr>
<td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">C.3</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">HRC</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">SC</font></b>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Afghanistan</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Albania</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Algeria</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
Thanks in advance!
EDIT - I don't need the generated element to be an input field. It just has to be an element that can have text in it.
Try making a droppable div
<div id="droppable">
...
</div>
And in Jquery
$("#droppable").droppable();
Related
I am having a template file which I am trying to convert into pdf. After googling a bit I found a framework called JSPDf. When I am trying to use it it gives me error Uncaught TypeError: Cannot read property 'name' of undefined jspdf.
we have two button 1->printDiv this one is working fine.
2->saveDiv this button having issue.when we are pressing this button to download pdf
i get console error like Uncaught TypeError: Cannot read property 'name' of undefined at tableToJson(jspdf.debug.js).
Here is My Code i put all code in single file.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script>
var doc = new jsPDF();
function saveDiv(divId, title) {
doc.fromHTML(`<html><head><title>${title}</title></head><body>` + document.getElementById(divId).innerHTML + `</body></html>`);
doc.save('div.pdf');
}
function printDiv(divId,
title) {
let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');
mywindow.document.write(`<html><head><title>${title}</title>`);
mywindow.document.write('</head><body >');
mywindow.document.write(document.getElementById(divId).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
</script>
<style>
tbody {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<p> </p>
<div id="pdf">
<p>
<font size="6" color="black"></font>
<table border="1" width="600">
<tbody>
<tr>
<td width="96">
<p><strong>PROJECT TITLE</strong></p>
</td>
<td colspan="3" width="225">
<p>HYATT CENTRIC KOTA KINABALU</p>
<p><Project N ame></p>
</td>
<td colspan="3" width="97">
<p><strong>PROJ.NO</strong></p>
</td>
<td colspan="2" width="182">
<p>HCKK1904</p>
<p><Project code></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>LOCATION</strong></p>
</td>
<td colspan="8" width="504">
<p>Lot 017512533 Along Jalan Haji Saman, 88000 Kota Kinabalu, Sabah.</p>
<p><Location></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>NO</strong></p>
</td>
<td colspan="3" width="225">
<p>RFI-001 <operation prefix -in sequence no></p>
</td>
<td colspan="2" width="96">
<p><strong>DATE</strong></p>
</td>
<td colspan="3" width="183">
<p>23/1/2020</p>
<p><Created date></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>TITLE</strong></p>
</td>
<td colspan="8" width="504">
<p>HCKK Blueprint Document</p>
<p><user entered title of operation title field></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>ASSIGNED TO</strong></p>
</td>
<td colspan="4" width="227">
<p>David Khor (Sunhill Ventures Sdn Bhd)</p>
<p><Assign To></p>
</td>
<td width="94">
<p><strong>PURPOSE</strong></p>
</td>
<td colspan="3" width="183">
<p>Approval</p>
<p><purpose></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>CC USERS</strong></p>
</td>
<td colspan="3" width="225">
<p>Chirs Chiew (Sunhill Ventures Sdn Bhd)<br /> Roy Chiew (Sunhill Ventures Sdn Bhd)</p>
<p><Cc user name’s></p>
</td>
<td colspan="2" width="96">
<p><strong>REQUESTED BY</strong></p>
</td>
<td colspan="3" width="183">
<p>Manfred weber</p>
<p>(Sunhill Ventures Sdn Bhd)</p>
<p><Created by name></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>DISCIPLINE</strong></p>
</td>
<td colspan="3" width="225">
<p>Architecture</p>
<p><User selected discipline ></p>
</td>
<td colspan="2" width="96">
<p><strong>DUE DATE:</strong></p>
</td>
<td colspan="3" width="183">
<p>25/1/2020</p>
<p><Action by></p>
</td>
</tr>
<tr>
<td colspan="9" width="600"> </td>
</tr>
<tr>
<td colspan="9" width="600">
<p><strong>DESCRIPTION</strong></p>
</td>
</tr>
<tr>
<td colspan="9" width="600">
<p>Sending the blueprint of the hckk1904 document for approval</p>
<p><Initiator description></p>
</td>
</tr>
<tr>
<td colspan="9" width="600"> </td>
</tr>
<tr>
<td colspan="9" width="600">
<p><strong>RESPONDANT COMMENT</strong></p>
</td>
</tr>
<tr>
<td colspan="9" width="600">
<p>Approving the blueprint document<strong> DATE:</strong></p>
<p><strong><< the assignee comments ></strong></p>
</td>
</tr>
<tr>
<td colspan="2" width="101">
<p><strong>LEAD RESPONDANT</strong></p>
</td>
<td width="122">
<p>David Khor (Sunhill Ventures Sdn Bhd)</p>
<p><strong><Assignee></strong></p>
</td>
<td width="98">
<p><strong>RESPONSE</strong></p>
</td>
<td colspan="3" width="97">
<p>Approved</p>
<p><Assignee status></p>
</td>
<td width="97">
<p><strong>RESPONDED DATE</strong></p>
</td>
<td width="85">
<p>23/1/2020</p>
<p><Assignee edited on></p>
</td>
</tr>
<tr>
<td colspan="2" width="101">
<p><strong>DOCUMENTS ATTACHED</strong></p>
</td>
<td colspan="7" width="499">
<p>Filename.pdf</p>
<p><file attachment names of the Created by / Assignee></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>This is a system generated document, no signature is required.</p>
</p>
</div>
</body>
<button onclick="printDiv('pdf','New Operations Details')">print div</button>
<button onclick="saveDiv('pdf','New Operations Details')">save div as pdf</button>
</html>
please help me..
fromHTML() is no longer being maintained from jsPDF. As the author himself said:
https://github.com/MrRio/jsPDF/issues/2268#issuecomment-460108597
i am to trying export a report data / html to excel / csv using tableExport with this code logic
$('#tblRpt').tableExport({ type: 'csv', escape: 'false', tableName:
'yourTableName' });
this code works in other reports which has simple html structure. The report which i am trying to export has nested tables in it. The exported file loses its html formatting. I don't have choice to use third party plugin because of project optimization issues.
Please suggest me a way to solve this issue without using any third party tool/plugin, Thank you
This is the html of my report which i am trying to export.
<tbody><tr>
<td colspan="2" class="no-border-right"><strong></strong></td>
<td align="right" valign="top" class="no-border-left">10/01/2020
10:53</td>
</tr>
<tr>
<td width="20%" class="no-border-right"><strong>User: Practical Head
Office</strong></td>
<td width="60%" align="center" class="no-border-left no-border-right">
<strong id="MidRptHeading">
M.I.D Report - Curent Fleet Only
</strong> (01 Dec 2019 - 31 Dec 2019)
</td>
<td width="20%" align="right" valign="top" class="no-border-left">
<strong></strong></td>
</tr>
<tr>
<td colspan="3" style="padding: 0; border:0;">
<table width="100%" style="border-collapse:collapse; border-spacing: 0; margin: 0 auto;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th valign="top"><strong>Reg no</strong></th>
<th valign="top"><strong>Insure type</strong></th>
<th valign="top"><strong>Make</strong></th>
<th valign="top"><strong>Model type</strong></th>
<th valign="top"><strong>Derivative</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Engine size</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Date of Registration</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Value</strong></th>
<th valign="top" style="text-align: center;"><strong>Seats</strong></th>
<th align="right" valign="top" style="text-align: center;"><strong>Gross vcl wt</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Vehicle on date</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Vehicle off date</strong></th>
<th valign="top"><strong>Location</strong></th>
<th valign="top" style="text-align: center;"><strong>VIN number</strong></th>
</tr>
</thead>
<tbody id="tblMidVehiclesList">
<tr>
<td valign="top">KP69WBZ</td>
<td valign="top">Car</td>
<td valign="top">NISSAN</td>
<td valign="top">QASHQAI</td>
<td valign="top">QASHQAI DIG-T TEKNA</td>
<td align="center" valign="top">1332</td>
<td align="center" valign="top">20/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">4</td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">05/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">SJNFFAJ11U2647316</td>
</tr>
<tr>
<td valign="top">BJ69JXU</td>
<td valign="top">Car</td>
<td valign="top">PEUGEOT</td>
<td valign="top">Peugeot GTL 1.2 GT LINE</td>
<td valign="top">308 GT LINE PURETECH S/S</td>
<td align="center" valign="top">1200</td>
<td align="center" valign="top">27/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">4</td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">10/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">VF3LPHNSJKS346785</td>
</tr>
<tr>
<td valign="top">KN69TGX</td>
<td valign="top">Van up to 3.5T</td>
<td valign="top">VOLKSWAGEN</td>
<td valign="top">Transporter T30</td>
<td valign="top">TRANSPORTER T30 H-LINE TD</td>
<td align="center" valign="top">1968</td>
<td align="center" valign="top">30/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">2</td>
<td align="center" valign="top">3000</td>
<td align="center" valign="top">12/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">WV1ZZZ7HZKH180620</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="border-bottom: 1px solid #000; padding: 0;"></td>
</tr>
<tr>
<td colspan="3" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" style="border-collapse:collapse; border-spacing: 0; margin: 0 auto;" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="40%" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" class="table-summary">
<tbody><tr>
<td width="17%" valign="top"> </td>
<td width="14%" align="center" valign="top"><strong>At Start of Month</strong></td>
<td width="8%" align="center" valign="top"><strong>Current</strong></td>
</tr>
<tr>
<td valign="top"><strong>Owned vehicles</strong></td>
<td align="center" valign="top">21</td>
<td align="center" valign="top">0</td>
</tr>
<tr>
<td valign="top"><strong>Leased vehicles</strong></td>
<td align="center" valign="top">38</td>
<td align="center" valign="top">3</td>
</tr>
<tr>
<td valign="top"><strong>Temporary vehicles</strong></td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">0</td>
</tr>
<tr>
<td valign="top"><strong>Total fleet</strong></td>
<td align="center" valign="top"><strong>59</strong></td>
<td align="center" valign="top"><strong>3</strong></td>
</tr>
</tbody></table>
</td>
<td width="30%" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" class="table-summary">
<tbody><tr>
<td align="left" valign="top"> </td>
<td align="center" valign="top"><strong>Current fleet</strong></td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Car</strong></td>
<td align="center" valign="top">2</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Minibus</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Motorhome up to 3.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Motorhome 3.5T-7.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>MPV</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Van up to 3.5T</strong></td>
<td align="center" valign="top">1</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Van 3.5T-7.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>HP Cars</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
</tbody></table>
</td>
<td width="30%" style="padding: 0; border:0; vertical-align:top;"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="3" valign="top" align="center" style="border-top: 1px solid #000;"><strong>End of report</strong></td>
</tr>
</tbody>
I have a program in the form of an HTML page that contains both draggable/droppable elements and contenteditable elements. Is there any way to save both the positions of the elements as well as the contenteditable text? There may be over a hundred of each type of element, and I can't premake their ids, because they are generated when a button is clicked. I've looked into using localStorage but haven't found anything that pertains to my problem. It has to be an easy solution that I can apply to everything as it happens.
Here is my shortened HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<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>
<style>
td {
border: 1px solid black;
}
.tile {
cursor: move;
min-width: 48px;
width: fit-content;
height: 24px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<button id="addTileButton">Click to add tile</button>
<div contenteditable="true" id="tableDiv">
<table cellspacing="0" border="0">
<colgroup width="509"></colgroup>
<colgroup span="5" width="166"></colgroup>
<tr>
<td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">C.3</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">HRC</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">SC</font></b></td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Afghanistan</td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Albania</td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Algeria</td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Andorra</td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
</tr>
</table>
</div>
</body>
</html>
and here is my JavaScript:
$(document).ready(function() {
$("#addTileButton").click(function() {
$("body").append("<div id=draggable></div>");
var tile = $("<div class=tile contenteditable=true></div>");
$("#draggable").append(tile);
$(".tile").draggable().resizable();
$("#tableDiv").droppable();
$("<td>").resizable();
});
});
Any and all advice is welcome.
Thanks in advance!
There are three ways to do this.
1) Save the whole html in which user has made changes, as a template.
This is not advisable as while saving the page, it can be noticed that some of the information is lost.
2) Save the whole html structure of the div which you need in a javascript variable and store it in a database. When needed get it from the server and display it as it is by simply making the innerHtml of the parentDiv to the data you got from the server.
3) The method which i would personally prefer. Save the state of your html div in a JSON format ( information like width, height, positions, images of divs, etc. ). Store that in the database. Now make a rest API and get the JSON data whenever needed. Parse it and display it as you need it to be displayed. A much cleaner approach !!!
The best way for it to do it is to save the state of each object on a json and save that on a database. So with the help of a rest api you can fetch the data back and rebuild everything from the same state json that you created.
Edited -
So what i've done in a similar project is to take all the html properties data like width, height, position x and y etc and store it on an object like
"input1": {
"text": "Hello",
"placeholder": "Put a text in here!",
"width": "100%",
"height": "100%",
"position" : {
"x": 10,
"y": 10
}
}
Put all your objects in one and pass that as a JSON on the server and then rebuild it from the same object.
You will need more than just javascript for that for sure.
I have a HTML tag like:
<tr class="evenRow" id="5"><td align="left" noWrap="nowrap">
<input id="array_5" type="checkbox" value="on"/> </td>
<td align="left" noWrap="nowrap"> SAMPLE </td>
<td align="center" id="row_at_plant_0" noWrap="nowrap" class="data-current-value" row_index="2"> 1112</td>
<td align="left" noWrap="nowrap"> 1.0457 </td>
</tr>
I have this code to get the <td> tag that has row_index attribute when array_* is checked. But it's not working in IE.
$('table#headerSelectTable input[id^="array_"]:checked').each(function() {
input = $(this).parent().parent().find('.data-current-value');
if ($(this).parent().parent().get(0).tagName == 'TR') {
rows.push(input);
}
});
I have an invoice.jsp page where I have to calculate some value in the textbox using jQuery or with any other way.
I don't know much about jQuery. Please help me to solve this problem.
In my invoice there is a quantity textbox. If the user enters the quantity then the calculated price should be calculated dynamically i.e (total_subPrice= unit_price * quantity) and shown in another textbox called "price".
And again the total sum of all the prices should appear in the button as a Total.
Please note: all the row values are coming from my database table based on the selection of items by users.
I have used only this code to show values in my invoice.jsp page:
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center" >
<s:textfield value="%{price}" name="" size="6"></s:textfield>
</td>
</tr>
</s:iterator>
And my invoice.jsp output looks like this:
I have no idea how to calculate the line Total based on the quantity chosen and also display the sum of all the line total in the grand total textbox (see below invoice image).
I also tried this but I am still unable to solve my problem.
My full JSP code:
<table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="74%">
<s:form action="dfs" id="form3" theme="simple">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" id="your_content">
<tr>
<td valign="top" height="10%">
<div id="invNum">Invoice# 12688</div>
<div id="ttielMain">Vision Books</div>
<div id="Orgaddress"> Thamel Kathmandu Nepal</div>
<div id="phoneNum"> Tel# 00977-1-12173803</div>
<div id="websiteOrg"> www.thebestbookfinder.com</div>
</td>
</tr>
<tr>
<td valign="top" width="100%" align="left">
----------------------------------------------------------- -----------------------------------
</td>
</tr>
<tr>
<td height="6%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;font-family: serif;font-weight: bold;font-size: 14px;">
<td width="65%" align="left">Title</td>
<td width="10%" align="left">Unit Price</td>
<td width="10%" align="center">Qty</td>
<td width="15%" align="left">Line Total</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="65%" align="left">
-------------------------------------------------------
</td>
<td width="10%" align="left">----------</td>
<td width="10%" align="center">-----</td>
<td width="15%" align="left">-------------</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="65%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center"><s:textfield value="%{price}" name="" size="6"></s:textfield></td>
</tr>
</s:iterator>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: b">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
<s:textfield name="subtotal" value="%{'' + #attr.total}" size="5"> </s:textfield>
</td>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">Discount:<sj:textfield name="amt" size="1" placeholder=" %"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: bolder;">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
Total: <s:property value="%{'' + #attr.total}" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>
As #flow said, use .change():
$(function() {
$('input[name^="quantity"]').change(function() {
var unitprice = $(this).siblings('input[name^="unitprice"]').val();
$(this).siblings('input[name^="price"]')
.val($(this).val() * unitprice);
});
});
Use .change() on your inputs.
jQuery Docs - Change