CODEWITHSUNDEEP
javascriptphpjquerypdfjspdf
Francisunoxx
Francisunoxx

Reputation: 1458

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();

Upvotes: 0

Views: 451

Answers (1)

Quynh Nguyen
Quynh Nguyen

Reputation: 3009

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

Upvotes: 1

Related Questions