jsPDF script won't run when I hit submit button-CodePudding

I am trying to take the info collected from my form and make it into a PDF but my submit button doesn't take the variables I gathered and create a PDF, nothing happens when I hit submit.

I have tried moving the script in and out of the form tag but I am not very familiar with Javascript at all.

<!DOCTYPE html>
<html>
<body>
<script src="https://gist.githubusercontent.com/AlexErmakov/b16df3e89e935e0ad4f6/raw/ff6ca3439ed6e2f88563a363ea2b51f46ebb3906/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<center>
<div  id="myHeader">
  <img src="Archive.png" alt="Archive" style="width:100%,height:100%;">
      <style type="text/css">
    body { margin:0; padding:0;}
    </style>
</div>
  <button type="button" ><center>PDF Form</center></button>
<div >
<form>
        <input type="text" id="name" value=""/ placeholder="Name"><br>
        <input type="text" id="company" value="" placeholder="Company" /><br>
        <input type="text" id="department" value="" placeholder="Department" /><br>
        <input type="text" id="title" value="" placeholder="Job Title"/><br>
        <input type="button" id="button" value="Submit"/>
</form>
<script>
    $('#button').click(function() {
        
         var doc = new jsPDF();
         
         
         
        var name = $('#name').val();
        var company = $('#company').val();
        var department = $('#department').val();
        var title = $('#title').val();
        
        doc.setFontSize(26);
        doc.setTextColor(92, 76, 76);
        
        doc.text(23, 81, name);
        doc.text(23, 122, company);
        doc.text(23, 162, department);
        doc.text(23, 202, title);
         doc.save('test.pdf');

        
        
    

    });
</script>
</div>
<script>

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i  ) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>
</center>
 
</style>
</center>
</body>
</html>

CodePudding user response：

There is a problem with versions of those two external scripts you are loading at the beginning of the code.

Try these two instead:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>