Signature Pad and DOMPDF used in e-signature plugin for CRM platform

I have created a plugin which must generate a signed PDF. Before generating the PDF, you will need to input your name in a box and draw a signature using the pad.

I tried to do like in this question, but I get an error: Uncaught TypeError: $(...).signaturePad is not a function. Beside this error, the CSS is not loading, not JS too and the page where you need to sign looks like this: enter image description here, but if I open the sign.html file in PC, it looks normal, like this: enter image description here

I get this on every CSS and JS file that I have: enter image description here

So, what I want to do is to solve the error from the signaturePad function and load the CSS & JS files properly, then after clicking Sunt de acord cu termenii si conditiile! to go to /templates/contract.php page and generate the PDF file with the signature that I have made on the sign.php file.

This is the code of sign.php file:

<?php chdir(__DIR__); ?>

<!DOCTYPE html>
<html lang = "EN">
        <meta charset = "UTF-8">
        <meta http-equiv = "X-UA-Compatible" content = "IE=Edge">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">
            body {  font: normal 100.01%/1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;    }
        <link href = "<?php __DIR__ . '/assets/jquery.signaturepad.css' ?>" rel = "stylesheet">
        <script src = ""></script>

        <form method = "post" action = "<?php __DIR__ . '/templates/contract.php' ?>" class = "sigPad">
            <div class = "sigPad">

                <label for = "name">
                    Introdu numele in casuta de mai jos:
                <input type = "text" name = "name" id = "name" class = "name">

                <p class = "typeItDesc">
                    Previzualizeaza semnatura
                <p class = "drawItDesc">
                    Deseneaza semnatura

                <ul class = "sigNav">
                    <li class = "typeIt">
                        <a href = "#type-it" class = "current">

                    <li class = "drawIt">
                        <a href = "#draw-it" class = "current">

                    <li class = "clearButton">
                        <a href = "#clear" class = "current">
                <div class = "sig sigWrapper">
                    <div class = "typed"></div>
                    <canvas class = "pad" width = "198" height = "55"></canvas>

                    <input type = "hidden" name = "imgOutput" class = "output" />
                <button type = "submit">
                    Sunt de acord cu termenii si conditiile!


        <script src = "<?php __DIR__ . '/assets/jquery.signaturepad.js' ?>"></script>
            $(document).ready(function() {
        <script src = "<?php __DIR__ . 'assets/json2.min.js' ?>"></script>

1 answer

  • answered 2021-04-21 14:13 matei_

    Now CSS and JS files are loading.

    I've added:

       <?php include __DIR__ . '/assets/jquery.signaturepad.css' ?>


       <?php include __DIR__ . '/assets/json2.min.js' ?>