I have made a form which converts to a PDF using jQuery. I am on a shared hosting package and as a result, cannot add any libraries such as wkhtmltopdf on to the server so in a sense am restricted.

Currently the code validates the form to ensure that the relevant areas are filled out. If filled out then submits the form.

The JS code:

jQuery(function($) {

var $form = $("form[name='pdf-download']"),
    $successMsg = $(".alert");
$.validator.addMethod("letters", function(value, element) {
    return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
    rules: {
        firstname: {
            required: true,
            minlength: 3,
            letters: true
        email_id: {
            required: true,
            email: true
    messagess: {
        firstname: "Please specify your name (only letters and spaces are allowed)",
        email_id: "Please specify a valid email address"
    submitHandler: function() {
        $ = jQuery;

        $("#submit").click(function() {

        function make_product_sheet() {

            console.log("#submit clicked");
            var pdf = new jsPDF('p', 'pt', 'a4');

            pdf.addHTML(document.getElementById("product_sheet"), function() {

                ps_filename = "generated-product-sheet";
                pdf.save(ps_filename + '.pdf');

There are a few areas I am keen to sort.

Firstly - I would rather that the form was sent to the server and stored rather than being downloaded on the clients browser. I have tried adding the following code but with no joy:

function sendToServer() {
let pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.body, {
    callback: function (pdf) {
        let obj = {};
        obj.pdfContent = pdf.output('datauristring');
        var jsonData = JSON.stringify(obj);
            url: '/wp-content/uploads/',
            type: 'POST',
            contentType: 'application/json',
            data: jsonData

If anyone can advise how to send the file to the back end that would be great. I know I need to use ajax to send to the back end but am fairly new to coding and unsure exactly how to implement

Ideally, If I could also initiate an email which is sent to me to advise that the pdf has been uploaded, that would be even better.

The other issue I have is that currently, I need to press the button twice to download the pdf. It looks as though the first click validates the form and if everything is ok, the second click sends it. Ideally, I would like everything done with one click

  • You need to have some of this functionality in PHP for the content to be saved on the server. You should also do any serious validation of the form on the server side to prevent people from bypassing your client-side validation. Jun 25, 2019 at 18:04
  • @MikeNGarrett thank you for your reply, are there any tutorials you could point me in the direction of? I honestly wouldnt know where to start with this. Ive put a lot of research into the above code but seem to have hit a wall and have no idea how to take it any further Jun 25, 2019 at 18:15
  • maybe this link will be useful : stackoverflow.com/questions/29826687/… Jun 25, 2019 at 18:17
  • @ChetanVaghela Thank you for that, I have looked at this post already and have tried altering it to work for me but cannot figure out how. I used the top answer as it looks most suited to my needs but struggled to get it to work. when i submit the form it took me back to homepage but could not see any errors on console Jun 25, 2019 at 18:33
  • My problem is the pdf... Submitting the form is easy. But it needs to be a PDF os it is serving as a proof of delivery that I can then send to the customer to show that their goods have been signed for. The hard part os getting the form to do what I want after it has converted to pdf. Jun 25, 2019 at 18:39


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.