Changed values do not show after PDF conversion

Question

I've created a html page, which has some values that can be changed through a textfield. An example of how this works:

Voornaam: <h3 class="title1">Test</h3>
      <input type="text" id="myTextField1"/>
      <input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>

Which is linked to the function:

function change1(){
   var myNewTitle = document.getElementById('myTextField1').value;
   if( myNewTitle.length==0 ){
       alert('Write Some real Text please.');
   return;
   }
   var titles = document.getElementsByClassName('title1');
   Array.prototype.forEach.call(titles,title => {
    title.innerHTML = myNewTitle;
   });
}

What it's supposed to change here is:

<p class="title1">Test.</p><p class="title2">Achternaam</p>

It does change this value, however I have created a html to PDF method using wkhtmltopdf. And after converting, the first value is returned. My new value is not in the PDF version.

I can provide an example of the way I convert html to PDF, however I feel like this is unnecessary as it is a simply command using wkhtmltopdf.

Could anyone explain to me how to make it so my new value will be converted and seen in the PDF.

Edit: Some explanation of how the conversion works.

On the bottom of my html page there is:

  <?php
         $link_address = 'convert.php';
          echo "<a href='".$link_address."'>converten naar pdf.</a>";
          ?>

Which runs this:

$command = '/usr/local/bin/wkhtmltopdf [my link here] '.$path;

if($status = 1){
shell_exec($command);
echo 'De offerte is omgezet naar pdf en opgeslagen in: '. $path;
}

This does work, but as I said.. not with my changed value.

Answer 1

You need to send the changes to the server. Exactly like submitting a form works.

One way to do this is to make your JS code also set hidden input fields:

<form id="changes" action="convert.php" method="post">
  <input type="hidden" name="title">
  <!-- more inputs here -->
  <input type="submit" value="converten naar pdf.">
</form>

When a user submits that form, your convert.php can now

• read the HTML document
• replace the original title with $_POST['title']
• save the altered document as temp file
• run the conversion