the only problem i have now is i cant save my save my text in text field:
i have tried with java script, i dont know if this can work.
if you have an idea what i can do, it will be nice.
but i think that i have fixed the problem with the file error:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<td valign="top" bgcolor="#eoe1e2" align="center">
<table id="table-text" align="center" border="0" width="100%" height="700px">
<tr height="10px">
<td align="center"></td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<!-- BEGIN MAIN SECTION -->
<!---- BEGIN MAIN BODY OF PAGE ---->
<table align="center" border="0" width="80%">
<tr><td align=center> </td></tr>
<tr>
<td align="center" valign="center">
<form name='plugstatus' action='file:///C:/Users/mib/Desktop/sss.HTML' method='POST' id='plug_form'>
<table border=2 cellpadding=2 cellspacing=2>
<tr>
<td colspan='8' align='center'><b>PLUG CONTROL</b></td>
</tr>
<tr>
<td colspan='8' align='center'><b>Unit LOCAL</b></td>
</tr>
<tr bgcolor='#cfcfcf'>
<td valign='top'>PLUG</td>
<td valign='top'>NAME</td>
<td valign='top'>DEFAULT</td>
<td valign='top'>BOOT/SEQ.<br />DELAY</td>
<td valign='top'>STATUS</td>
<td valign='top'>PRIORITY</td>
<td valign='top'>ACTION</td>
</tr>
<tr>
<td bgcolor='#cfcfcf'>A1</td>
<td align='left' bgcolor='#cfcfcf'>
<input type="text" name="txtfield" id="txtfield" value=""
placeholder="input your text" onchange="storeitem(this.value)" />
</td>
<td bgcolor='#cfcfcf' align='center'>OFF</td>
<td bgcolor='#cfcfcf' align='center'>0.5 Secs</td>
<td bgcolor='#cfcfcf' align='center'>OFF</td>
<td bgcolor='#cfcfcf' align='center'>
1
</td>
<td bgcolor='#cfcfcf' align='center'>
<select name="u1plug1"><option value='0'>On</option><option value='2'>Off</select>
</td>
</tr>
<tr>
¨
<td bgcolor='#efefef'>A2</td>
<td align='left' bgcolor='#efefef'>BDK-ASR1002_RACK04</td>
<td bgcolor='#efefef' align='center'>OFF</td>
<td bgcolor='#efefef' align='center'>0.5 Secs</td>
<td bgcolor='#efefef' align='center'>OFF</td>
<td bgcolor='#efefef' align='center'>2</td>
<td bgcolor='#efefef' align='center'><select name="u1plug2"><option value='0'>On</option><option value='2'>Off</option></td>
</tr>
<tr>
</table>
<script language="javascript">
function storeitem(val) {
localStorage.setItem('txtfield', val)
}
function loaditem() {
var txtfield = document.getElementById('txtfield');
txtfield.value = localStorage.getItem('txtfield');
}
window.onload = loaditem;
</script>
<h1> </h1>
</body>
</html>
If you load your HTML from a local disk and only provide /cgi-bin/gethtml as the action, the browser will try to find this path on your local disk to load it.
This path will almost certainly be invalid (unless you are using a unix based OS and actually created the path /cgi-bin/), so you'll get the error message.
To make this work you need to either add the complete URL as action:
http://server.whatever/cgi-bin/gethtml
or load your HTML via HTTP from the server, so the relative path works.
Edit:
The directory /cgi-bin/ on a webserver has a special meaning, it contains scripts that are executed by the webserver, usually perl or similar scripting languages but they can also be binary programs.
These scripts/programs need to be executed by a webserver, they can't be used with file://... URIs. The same goes for evaluating form data.
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 trying very hard to convert a HTML table into a readonly document with exactly the same display. It can be PDF, all sorts of image types or another type of document or file: it just can't be possible to edit this document. The conversion should happen on a user click and this is a widget for an android smartphone app (not used on browsers, its not a webpage!).
I've been trying to convert this HTML table into PDF with 'jspdf' but until now its not being possible. I'm using an online platform which allows me to use HTML and JS.
Here is a big part of my HTML:
<table>
<tr>
<td colspan="3" align="center" bgcolor="#2AD2C9"><h2>Purchase Order</h2></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#97D700"><h3>Equipamiento</h3></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4"></td>
<td align="center" bgcolor="#D4D4D4"><b><em>Tipo/Cantidad</em></b></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Modelo de Placa:</td>
<td align="center" bgcolor="#D4D4D4"><select id="tipoPlaca" size="1">
<option id="defaultP" value="0">Seleccione una placa</option>
</select>
</td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Modelo de Inversor:</td>
<td align="center" bgcolor="#D4D4D4"><select id="tipoInversor" onchange="espacioArreglos()" size="1">
<option id="defaultI" value="0">Seleccione un inversor</option>
</select>
</td>
</tr>
<tr>
<td align="center" bgcolor="#F4F4F4">Longitud de PVC:</td>
<td align="center" bgcolor="#F4F4F4"><input type="number" id="longitudPVC" onchange="calculoCableria()" size="1"></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Cantidad de arreglos:</td>
<td align="center" bgcolor="#D4D4D4"><input type="number" id="cantidadArreglos" onchange="espacioArreglos()" size="1"></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Cantidad de placas:</td>
<td bgcolor="#FFFF00"><div id="container"></div></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#97D700"><h3>Total de equipamiento</h3>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Total de placas:</td>
<td align="center" bgcolor="#D4D4D4"><input type="number" id="totalPlacas" readonly></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Total de junctions:</td>
<td align="center" bgcolor="D4D4D4"><div id="totalJunctions"></div></td>
</tr>
On the end, I want to click on the 'ConvertPDF' button and it should automatically generate a PDF that would exactly look like the table made by me:
<tr>
<td align="center" bgcolor="#D4D4D4"><button type="reset" value="Reset" onclick="eliminarContenido('totalJunctions');clearArray();">Reset</button></td>
<td align="center" bgcolor="#D4D4D4"><input type="button" id="btnPrint" value="ConvertPDF" onclick="something()" /></td>
</tr>
I tried already different approaches seen in other posts using 'jspdf' but nothing worked so far... As you can see, I'm not an experienced programmer so I would appreciate very much some help to learn how to do this! It does not need to save a pdf, just needs to save in a type of file that you can't edit!
I have a table that looks like this:
<table>
<tr>
<td class='class1' id='id1'></td>
<td class='class2' id='id2'></td>
<td class='class3' id='id3'></td>
<td class='class4' id='id4'><button id='editButton'></button></td>
</tr>
<tr>
<td class='class1' id='id1'></td>
<td class='class2' id='id2'></td>
<td class='class3' id='id3'></td>
<td class='class4' id='id4'><button id='editButton'></button></td>
</tr>
</table>
The code below shows me id4:
$("#editButton").on("click", function(){
alert($(this).parent().attr("id"));
});
Now I need to reach id3 which is the closest one. The functions .next('class3') and .closest('class3') do not help me or i am using them in a wrong way. Please help me
1st : id must be unique
so your code should like
<table>
<tr>
<td class='class1' id='id1'></td>
<td class='class2' id='id2'></td>
<td class='class3' id='id3'></td>
<td class='class4' id='id4'><button class="editButton"></button></td>
</tr>
<tr>
<td class='class1' id='id5'></td>
<td class='class2' id='id6'></td>
<td class='class3' id='id7'></td>
<td class='class4' id='id8'><button class="editButton"></button></td>
</tr>
</table>
and in js
$(".editButton").on("click", function(){
alert($(this).closest('tr').find('td:nth-child(3)').attr("id"));
});
I was wondering if I can pass the tables on the webpage to the body of the email. I was wondering if this was possible and if so point me in the right direction
My Button:
<input type="submit" value="SUBMIT EMAIL TO: GNOC" <a
href="mailto:myemail#whatever.com">
Table:
<table cellpadding="4" cellspacing="0"
border="0" width="100%">
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
colspan="3" valign="top" width="100%">
<WebPartPages:WebPartZone runat="server"
Title="loc:Header" ID="Header"
FrameType="TitleBarOnly"/> </td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
rowspan="4" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server"
Title="loc:LeftColumn" ID="LeftColumn"
FrameType="TitleBarOnly"/> </td>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
valign="top" height="100%"> <WebPartPages:WebPartZone
runat="server" Title="loc:Row1" ID="Row1"
FrameType="TitleBarOnly" Orientation="Horizontal"/>
</td>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
rowspan="4" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server"
Title="loc:RightColumn" ID="RightColumn"
FrameType="TitleBarOnly"/> </td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
valign="top" height="100%"> <WebPartPages:WebPartZone
runat="server" Title="loc:Row2" ID="Row2"
FrameType="TitleBarOnly" Orientation="Horizontal"/>
</td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
valign="top" height="100%"> <WebPartPages:WebPartZone
runat="server" Title="loc:Row3" ID="Row3"
FrameType="TitleBarOnly" Orientation="Horizontal"/>
</td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
valign="top" height="100%"> <WebPartPages:WebPartZone
runat="server" Title="loc:Row4" ID="Row4"
FrameType="TitleBarOnly" Orientation="Horizontal"/>
</td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
colspan="3" valign="top" width="100%">
<WebPartPages:WebPartZone runat="server"
Title="loc:Footer" ID="Footer"
FrameType="TitleBarOnly"/> </td>
</tr>
<script
language="javascript">if(typeof
(MSOLayout_MakeInvisibleIfEmpty) == "function")
{MSOLayout_MakeInvisibleIfEmpty();}</script>
</table>
Goal: Import table from webform into email body
It isn't possible.
However, why don't you use an ajax call to send all the information in a table as if it were a form? On the separate php document you call to, use PHP's mail functionality (http://php.net/manual/en/function.mail.php)
for example:
<form type="POST">
<table> <!-- This is your table -->
<tr>
<td>
Username
</td>
<td>
<input type="text" name="username" value="whateveruserentered" />
</td>
</tr>
<table>
So in the ajax method, you'd send username through. Then in the php page you called you'd say
<table>
<tr>
<td>
Username
</td>
<td>
<?php echo $_POST['username']; ?>
</td>
</tr>
<table>
So you're recreating the table.
Put all of that in the body of the mail property, and off it goes. Fully fledged table just like on the original page.
In order to send the templated information you want to?
i've got a problem i don't know how do solve it.
On my web page i load a table dynamically (and only the user want to) from an other apex application with:
function getParameter (filter){
var url;
var html;
filter = filter.replace(/ /g,'%20')
url = 'http://xxx.xxx.xxx.xxxx:8080/apex/f?p=PAR_PARAMETER:1:'+APP_SESSION+
':IR_REPORT_Query_Parameter::RIR,CIR:IR_P_SYS.SZGETTEXT(T.EZS_NO):'+filter;
html = $('#ParameterSettings').load(url +' .apexir_WORKSHEET_DATA');
}
this works fine.
My problem now is that the user can choose between: I want to edit the values, in this case the value col (display only) will be replaced with:
'<input type="text" value="|HTML|" size="30" maxlength="4000" class="P3_PARAMETER_VALUES">'
This also works fine, but how can i get the values that the user can now enter into the input field?
The table bevor it is editable:
<div id="P3_PARAMETERSETTING">
<table>
<thead></thead>
<tbody>
<tr>
<tr class="even">
<td headers="LINK">
<td align="left" headers="P_SYS.SZGETTEXT(T.EZS_NO)">(Dist) Driving time</td>
<td align="left" headers="NAME">REQ.data.source.trip</td>
<td align="left" headers="Value">tadaaa</td>
<td align="left" headers="Default">0</td>
<td align="left" headers="P_SYS.SZGETTEXT(D.EZS_NO)">Data source for trips to use in the query: 0 = all, 1 = online recorded data, 2 = vehicle recorded data</td>
<td align="left" headers="Max">2</td>
<td align="left" headers="Min">0</td>
</tr>
</tbody>
</table>
</div>
after switch to editable:
<div id="P3_PARAMETERSETTING">
<table>
<thead></thead>
<tbody>
<tr class="odd">
<td headers="LINK">
<td align="left" headers="P_SYS.SZGETTEXT(T.EZS_NO)">(Dist) Driving time</td>
<td align="left" headers="NAME">REQ.grid.value.size</td>
<td align="left" headers="Value">
<input class="P3_PARAMETER_VALUES" type="text" maxlength="4000" size="30" value="tadaaa">
</td>
<td align="left" headers="Default">60</td>
<td align="left" headers="P_SYS.SZGETTEXT(D.EZS_NO)">Default data query value grid size</td>
<td align="left" headers="Max">43200</td>
<td align="left" headers="Min">10</td>
</tr>
</tbody>
</table>
</div>
thanks
mario
if any one need more code just leave a comment.
If you're able to alter the HTML, then the simplest answer would be to ensure you add a unique id to each new input element.
<input id="VALUE_1" class="P3_PARAMETER_VALUES" type="text" maxlength="4000" size="30" value="tadaaa">
Then you can access with normal JavaScript
var value1 = document.getElementById('VALUE_1').value;
You could make this sort of selection more powerful by using a JavaScript library like jQuery:
http://jquery.com/
You may also want to look into contenteditable:
https://developer.mozilla.org/en-US/docs/HTML/Content_Editable