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
Related
I am trying to show some words in bold inside a table. That is, I am putting a sentence inside td tag, and I want to bold some words of that sentence.it is working when I put a string in Html and give to that word. but when I give a variable it is not working.
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name1:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name2:</td>
<td class="content_column">{{element[0].matched_keyword}}</td>
</tr>
<tr>
<td class="header_column">Subject1:</td>
<td class="content_column">{{element[0].nlp_matched_sentence}}</td>
</tr>
<tr>
<td class="header_column">bold value1:</td>
<td class="content_column">{{x}}</td>
</tr>
<tr>
<td class="header_column">bold value2:</td>
<td class="content_column"><span style="font-weight:bold">Your bold text</span></td>
</tr>
</table>
.ts file
element = [
{
id: 5636,
matched_keyword: "test",
nlp_matched_sentence:
"The <strong>Air Force</strong> Test Center"
}
];
after my research I got 3 solutions but none of them are working for me. please check the demo for more information.
stackbliz demo
Take a look at demo code
You need to add [innerHTML] as below:
<td class="content_column" [innerHTML]="element[0].nlp_matched_sentence"></td>
To set html content programatically, we need to use innerHTML.
To use innerHTML as a data binding, we need to use interpolation syntax => innerHTML = {{}}
To use innerHTML as property binding, we need to use square brackets syntax => [innerHTML]=""
Change your html code like below,
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name:</td>
<td class="content_column">{{ element[0].matched_keyword }}</td>
</tr>
<tr>
<td class="header_column">Subject:</td>
<td class="content_column">
<div innerHTML="{{ element[0].nlp_matched_sentence }}"></div>
</td>
</tr>
<tr>
<td class="header_column">bold value:</td>
<td class="content_column"><div innerHTML="{{ x }}"></div></td>
</tr>
</table>
I want to get all fields data separately from the table. as the table is dynamically created so main problem is newly created one.
Please check out:
I tried to get all fields using Javascript, but I still can't get values of newly created rows. Please check out the screenshot of Javascript method result:
I want to get all fields of table values, including newly created values too..so that I can post the data and access data using URL and post it in database
Here is my HTML :
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><textarea name="invoice_item[]">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div>
</td>
<td class="description"><textarea name="description[]">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost" name="unit_cost[]">$650.00</textarea></td>
<td><textarea class="qty" name="quantity[]">1</textarea></td>
<td><span class="price">$650.00</span></td>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><textarea name="invoice_item[]">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div>
</td>
<td class="description"><textarea name="description[]">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost" name="unit_cost[]">$75.00</textarea></td>
<td><textarea class="qty" name="quantity[]">3</textarea></td>
<td><span class="price">$225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value">
<div id="subtotal">$875.00</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value">
<div id="total">$875.00</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">$875.00</div>
</td>
</tr>
</table>
My Javascript code :
function myFunction() {
let QueryString = '';
var formFields = document.querySelectorAll('textarea');
formFields.forEach(function(textarea) {
//creates querystring for the form inputs
QueryString += textarea.name + '=' + textarea.value + '&';
//show the value of the textarea
console.log(textarea.value);
});
//remove the extra "&" from the end of the querystring
QueryString = QueryString.substr(0, QueryString.length - 1);
console.log("==FOR USING AS QUERY STRING FOR====");
// window.location.href = "index.php?name=" + QueryString;
alert(QueryString);
}
By newly created rows do you mean rows created after the page has loaded?
If so why don't you play around with
const formFields = [].slice.call(document.querySelectorAll('textarea'));
let AllValues = "";
formFields.forEach(formField => formField.addEventListener("input", yourFunction, false));
function yourFunction() {
AllValues += `${event.target.name}=${event.target.value}&`;
console.log(AllValues);
}
note: I'd target the id of the form otherwise all the textareas will be targetted...
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 an HTML Table like the following.
<table id="items">
<tr class="total_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value" id="total"><div id="total">$875.00</div></td>
</tr>
<tr class="disc" id="disc">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Discount</td>
<td class="total-value" id="discount">
<div id="discount"><input type="text" name="disco" class="dis"></div>
<input type="button" id="discount" name="apply" value="apply"/>
</td>
</tr>
</table>
I want the value of the input field with class=dis to a Javascript variable. I already tried the following, but failed.I am a noob in jQuery.
$("#items #disc").val();
#disc is a tr. The input has the class dis. Try like following.
$("#items #disc .dis").val();
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.