1

I have been doing everything to find a solution but there appears to be nothing evident...

I have created a form which requires a signature at the bottom and have created the full form with html and jQuery.

I have also added some jQuery which converts the html to a PDF. The issue is that the PDF downloads on the client side browser and I need the PDF to come to me.

The whole script I have has been done via jQuery and I am trying to find a work around so that the PDF comes to me either via email or downloaded straight into a folder fo my choosing.

What I have tried since...

Currently, The validation is performed and I then get a notification onscreen telling me that the form has been submitted.

when I look in the POD folder, however, the document is not there, also it does not download to the browser.

Is there something I need to change in my code to make sure it goes to the correct folder?

N.B I use a shared hosting package from 1&1 Ionos. I do not have access to any folders below htdocs, hence why I have put the full path in my commands and route it towards a folder which I do have access to.

jQuery which should validate the form then convert to PDF and then the AJAX request which should initiate the upload.php to save to server

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]*$/);
    });
    $form.validate({
        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() {
                alert("Submitted");
                make_product_sheet();
            });


            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";
                    var pdf = btoa(doc.output()); 
                        $.ajax({
                        method: "POST",
                        url: "/kunden/homepages/8/d692312546/htdocs/clickandbuilds/Website/wp-content/themes/Theme/POD/upload.php",
                        data: {data: pdf},
                        }).done(function(data){
                        console.log(data);
                        });
                });
            }
        }   
    });

});

upload.php

<?php
if(!empty($_POST['data'])){
$data = base64_decode($_POST['data']);
// print_r($data);
file_put_contents( 
"/kunden/homepages/8/d692312546/htdocs/clickandbuilds/Website/wp-content/themes/Theme/POD/test.pdf", $data );
} else {
echo "No Data Sent";
}
exit();
?>

The script seems to work as intended, however, I cannot find where the final PDF document has gone, it is not in the specified folder.

If I change

ps_filename = "generated-product-sheet";
    var pdf = btoa(doc.output()); 
        $.ajax({
        method: "POST",
        url: "kunden/homepages/8/d692312546/htdocs/clickandbuilds/Website/wp-content/themes/Theme/POD/upload.php",
        data: {data: pdf},
        }).done(function(data){
        console.log(data);
        });

to

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

then the file saves to the client's browser so I am thinking it is the ajax section which has a slight error?

Update...

When I click submit, I am getting an uncaught referencing error no line:671 which is the line:

submitHandler: function() {
        $ = jQuery;
          /*** LINE:671**/ 
        $( "#submit" ).click(function() {
            alert("Submitted");
            make_product_sheet();
        });

However, the submitted message does when submitted

2

Keep in mind not everyone is running JavaScript, so you really need a server-side form processor like PHP rather than relying solely on jQuery.

Best thing to do on a WordPress site is create a plugin that processes your form. You can include helper libraries like FPDF to not only generate the PDFs but that also have the option to save them to your server instead of just outputting to the client's browser.

  • (And yes, you can store them inside the /wp-content/ folder, but with PHP you will also be able to store them in a much higher directory, outside of public_html or whatever your public folder is, where they can only be accessed by you or other PHP. That way you won't have to worry about people stumbling across these PDFs like you would if you stored them in /wp-content/.) – WebElaine Jun 26 at 18:46
  • Thank you for your reply. My main issue along with the above lol is that I am new to all this and still learning. so... a lot of the jargon that people use confuses me more than the code lol. my current code is here: jsfiddle.net/SupGen/paufgsd9 . I was wondering is it was possible to include the likes of $.ajax({ type: "POST", url: 'handler.php', data: $form.serialize(), success: after_form_submitted, dataType: 'json' }); to then send the converted pdf via email? – Paulmcf1987 Jun 26 at 19:36
  • I have added some of the code I have been tinkering with. I don't think I am 1 million miles off but I cannot figure out how to sort it so it works as it should – Paulmcf1987 Jul 2 at 18:30

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.