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]*$/);
});
$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";
                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);
        $.ajax({
            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