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
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
Share Improve this question edited Jul 3, 2019 at 17:00 Paulmcf1987 asked Jun 26, 2019 at 18:04 Paulmcf1987Paulmcf1987 312 silver badges9 bronze badges1 Answer
Reset to default 2Keep 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.