Francisunoxx Francisunoxx - 4 months ago 37
jQuery Question

Getting the values from textfield to save as PDF

I already can retrieve every values on my cell depending on what the user input. Using this.

$("#customFields > tbody tr > td").each(function()
{
console.log($(this).find("input").val());
});


But I'm just having a little problem on how can I append user input in the textfield? Becasue when I save as a pdf I got a crumpled
<input type="text" class="form-control">
in one cell and it's not getting the values that I input. Screenshot below.

Screenshot:

SC

Is there a way how can I input that values that I inserted here in every cell? I'm stuck in this part I need opinion from others how can I do this.

Table:

<div class = "col-md-12">

<table class = "table" id = "customFields">

<thead>
<tr>
<th>Stock No.</th>
<th>Unit</th>
<th>Description</th>
<th>Quantity</th>
</tr>
</thead>

<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
</tr>
</tbody>

</table>

<button type = "submit" class = "btn btn-primary" id = "addMore">+ Add</button>
<button type = "submit" class = "btn btn-danger" id = "removeRow">- Remove</button>
<button type = "submit" class = "btn btn-primary" id = "save">Save</button>
</div>


Script:

$("#customFields > tbody tr > td").each(function() {
console.log($(this).find("input").val());
});

function tableToJson(table) {

var data = [];

// first row needs to be headers
var headers = [];

for (var i = 0; i < table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.replace();
}

data.push(headers);
// go through cells
for (var i = 1; i < table.rows.length; i++) {

var tableRow = table.rows[i];
var rowData = {};

for (var j = 0; j < tableRow.cells.length; j++) {

rowData[headers[j]] = tableRow.cells[j].innerHTML;

}

data.push(rowData);
}

return data;
}

function genPDF() {
//tableToJson is a special function which converts HTML object to Javascript Object Notation

var table = tableToJson($('#customFields').get(0));

//Defining pdf object
var doc = new jsPDF('1', 'pt', 'letter', true);

doc.cellInitialize();
$.each(table, function(i, row) {
$.each(row, function(j, cell) {
doc.cell(1, 10, 90, 20, cell, i);
});
});
doc.save('text.pdf');
}

javascript: genPDF();

Answer

Replace your source code to:

for (var j = 0; j < tableRow.cells.length; j++) {
    rowData[headers[j]] = tableRow.cells[j].children[0].value;
    alert(rowData[headers[j]]);
}

This is my test enter image description here

Hope this can help you. xD

Comments