Converting HTML form input to PDF - How to print more than 2 outputs-CodePudding

I'm new to coding and trying to accomplish passing input data from a form to a PHP response page and displaying it in the browser. The user can then click on a button to save the HTML element to PDF. The code works when displaying 2 form outputs eg. but as soon as I add more outputs from the form the javascript doesn't seem to run. I cant understand what is going wrong.

HTML form input page:

<!DOCTYPE html>
<html>
<body>
<img src ="ff.png">
<form action="response.php" method="post">
Invoice Number/Reference:<br>
<input type="text" name="ref"><br>
Customer Name:<br>
<input type="text" name="cname"><br>
<br>
Item:<br>
<input type="text" name="i1">
Cost
<input type="text" name="c1">
<br>
Item:<br>
<input type="text" name="i2">
Cost
<input type="text" name="c2">
<br>
Item:<br>
<input type="text" name="i3">
Cost
<input type="text" name="c3">
<br><br>
Total Cost:<br>
<input type="text" name="t1"><br><br>
<input type="submit">
</form>

</body>
</html>

PHP response page with button to download to PDF

<!DOCTYPE html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js" ></script>
<script>
function generatePDF() {
 var doc = new jsPDF();  //create jsPDF object
  doc.fromHTML(document.getElementById("input_data"), // page element which you want to print as PDF
  15,
  15, 
  {
    'width': 170  //set width
  },
  function(a) 
   {
    doc.save("ClientInvoice.pdf"); // save file name as HTML2PDF.pdf
  });
}
</script>
</head>


  <body>
    <div id="input_data">
      <img src = "ff.png" width="150"><br>
      <h2>Invoice Reference: <?php echo $_POST["ref"]; ?></h2><br>
      Customer name: <?php echo $_POST["cname"]; ?><br><br>
      Item: <?php echo $_POST["i1"]; ?><br>
      £ <?php echo $_POST["c1"]; ?><br>
      Item: <?php echo $_POST["i2"]; ?><br>
      £ <?php echo $_POST["c2"]; ?><br>
      Item: <?php echo $_POST["i3"]; ?><br>
      £ <?php echo $_POST["c3"]; ?><br><br>
      Total: <?php echo $_POST["t1"]; ?><br><br>

      Thank you for choosing My Company.
  
    </div>
    
<a href="javascript:generatePDF()">Dowload PDF</a>
  </body>
</html>

CodePudding user response：

For your case applying jspdf.debug.js

Please enclose your string data by <div> (so use </div>TEXT</div>)
Please use £ for the pound sign (to avoid seeing weird characters when you view this character on page)

So please change your code (response.php) to:

<!DOCTYPE html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js" ></script>
<script>
function generatePDF() {
 var doc = new jsPDF();  //create jsPDF object
  doc.fromHTML(document.getElementById("input_data"), // page element which you want to print as PDF
  15,
  15, 
  {
    'width': 170  //set width
  },
  function(a) 
   {
    doc.save("ClientInvoice.pdf"); // save file name as HTML2PDF.pdf
  });
}
</script>
</head>


  
  <body>
    <div id="input_data">
      <img src = "ff.png" width="150"><br>
      <h2>Invoice Reference: <?php echo $_POST["ref"]; ?></h2><br>
      <div>Customer name: <?php echo $_POST["cname"]; ?></div><br><br>
      <div>Item: <?php echo $_POST["i1"]; ?></div><br>  
      <div>&#163; <?php echo $_POST["c1"]; ?></div><br>
      <div>Item: <?php echo $_POST["i2"]; ?></div><br>
      <div>&#163; <?php echo $_POST["c2"]; ?></div><br>
      <div>Item: <?php echo $_POST["i3"]; ?></div><br>
      <div>&#163; <?php echo $_POST["c3"]; ?></div><br><br>
      <div>Total: <?php echo $_POST["t1"]; ?></div><br><br>
      <div>Thank you for choosing My Company.</div>
     </div>
    
<a href="javascript:generatePDF()">Dowload PDF</a>
  </body>
</html>

See a working version here:

http://www.createchhk.com/SOanswers/testSO17apr2022.html