textarea element's value or text does not show in PDF generated from the PDF API

Hello,

Is the textarea element supported? After text is entered i copy it to the the value or text attribute before i send it to the pdf generator. The pdf generator returns a pdf with no text in the field.

Here is my html elements in jade format

.input-group
                span#basic-addon1.input-group-addon(style="font-weight:bold !important;") Comments:
                textarea.form-control(id='comments', type='text', placeholder='Comments', aria-describedby='basic-addon1', name='comments') 
            br

and my javascript to copy the elements text:

var comments = document.getElementById("comments");
            comments.setAttribute("value", comments.value);

I then send it off to my server and then to PdfCrowds api. Which works well.

I have to change textarea to input for the value to be read.

Any ideas?

Thank you!

Hello,

Could you please post a link to a web page with the form that demonstrates the issue?

https://elementlabservices.com/demo

Comment box is at the bottom

The function relevant is generatePDF()

As i understand it i just need to set the Value attribute for the form input fields for pdfCrowd to recognize values that a user filled in. I am assuming this is the same for the textarea type.

Here is my code for setting the Value Attribute to the value of the input fields:

var elems = document.getElementsByTagName("input");
for(var i = 0; i < elems.length; i++) {
    // set attribute to property value
    elems[i].setAttribute("value", elems[i].value);
}

I then send the form html to my node.js server with an ajax call:

var content = $("#ScaleForm")[0].outerHTML;
            var businessName = $("#CompanyName").val();
            var request = $.ajax({
                url: "/pdf",
                method: "POST",
                data:{src:content,
                      business:businessName},
                contentType: "application/x-www-form-urlencoded",
                success: function(msg) {
                    console.log(msg.msg);
                    if(download)
                    {
                     $("#scaleText").hide();
                     $("#scaleTextDiv").hide();
                     $("#pdfReady").show();
                     $("#downloadPDF").attr("href", msg.file)
                    }
                    else
                    {
                        pdfWindow.location=msg.file;
                        $("#scaleText").hide();
                        $("#scaleTextDiv").hide();
                    }
                    
                },

                error: function(msg) {
                    console.log(msg.msg);
                    if($preparingFileModal)
                        $preparingFileModal.dialog('close');
                    $("#error-modal").dialog({ modal: true });
                }
            });
            afterPrint();
        }

My server code for the pdf function is (email info taken out but working)

app.post('/pdf', function (req, res) {
    console.log('Connected to Pdf Route');
    var data = [];
    var date = new Date();
    var time = date.getUTCMilliseconds();
    client.convertHtml(req.body.src + "<link rel='stylesheet' type='text/css' href='http://elementlabservices.com/stylesheets/jquery-ui.min.css'>"
                     + "<link rel='stylesheet' type='text/css' href='http://elementlabservices.com/bootstrap/docs/assets/css/docs.min.css'>"
                     + "<link rel='stylesheet' type='text/css' href='http://elementlabservices.com/bootstrap/docs/assets/css/bootstrap-autocolumns.css'>"
                     + "<link rel='stylesheet' type='text/css' href='http://elementlabservices.com/bootstrap/css/bootstrap.min.css'>"
                     + "<link rel='stylesheet' type='text/css' href='http://elementlabservices.com/stylesheets/style.css'>"
                     + "<link rel='stylesheet' type='text/css' href='http://elementlabservices.com/stylesheets/screen.css'>"
                     + "<link rel='stylesheet' type='text/css' href='http://elementlabservices.com/bootstrap/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css'>",
        { pdf: function (rstream) {
            rstream.on('data', function (chunk) {
                data.push(chunk);
            });

            rstream.on('end', function () {
                var buffer = new Buffer(data.reduce(function (prev, current) {
                    return prev.concat(Array.prototype.slice.call(current));
                }, []));

                fs.writeFile("pdfs/" + req.body.business + time + ".pdf", buffer, 'binary', function onComplete(err) {
                    if (err) {
                        throw err;
                    }
                    console.log("pushing download");
                    var mailOpts, smtpTrans;
                    smtpTrans = nodemailer.createTransport({
                        service: '',
                        auth: {
                            user: "<email>",
                            pass: <pass>
                        }
                    });
                    //Mail options
                    mailOpts = {
                        from: '', //grab form data from the request body object
                        to: '',
                        subject: 'PDF generated',
                        text: ""
                    };
                    console.log('Sending Mail');
                    smtpTrans.sendMail(mailOpts, function (error, response) {
                        //Email not sent
                        if (error) {
                            console.log(error.message);
                        }
                        //Yay!! Email sent
                        else {
                            console.log("Email Successfully sent");
                        }
                    });
                    res.send(200, { msg: "completed", file: "/pdfs/" + req.body.business + time + ".pdf" });
                    console.log("Sent");
                });
            });
        }
        }, {
            width: "8.5in",
            height: "-1",
            margin_top: ".2in",
            margin_left: ".4in",
            margin_right: ".4in",
            margin_bottom: ".2in",
            footer_html: '<div style=text-align:center;font-size:smaller;color:gray;">\
                              Page %p out of %n\
                          </div>',
            use_print_media: '1'
        });
    console.log("Done with PDF");
});

libraries i am using are:

Bootstrap
Jquery
Jqueir-UI
JqueryValidation (http://jqueryvalidation.org/validate/)
jquery.fileDownload (http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/)
Node.js with Express/PdfCrowd/cookie-parser

Thanks for your time!

Hello,

I'm not sure where the problem is. The textarea element should work with Pdfcrowd - try to paste the following code to https://pdfcrowd.com/#convert_by_input and click the "Convert to PDF" button.

<textarea rows="4" cols="50">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</textarea>

I would recommend that you check the HTML code that your server sends to the API and ensure that the text area is not empty.

Setting the innerHTML instead of the value worked! I just assumed i needed to set the value like the other inputs.

var comments = document.getElementById("comments");
comments.innerHTML = comments.value;

Thanks for your help!