How do I prevent my program from skipping html2pdf function?

Question

How do ensure that the program executes the GenPDF entirely before returning true? I have tried using returning a variable at the end of the GenPDF() to checkForMissingFields() function, but the program still skips the middle portion in the GenPDF function and immediately returns the variable to the checkForMissingFields() function.

I have also tried using a delay after the GenPDF function is called, but it just delays the redirection of the page.

This is the library I used: https://github.com/eKoopmans/html2pdf.js

HTML Form:

<form
  id="form"
    class="ui form"
    action="/PageTwo"
    method="POST"
    onsubmit="return checkForMissingFields()"
  >
 <tr>
      <td>Name of checklist:</td>
      <td>
        <input
          type="text"
          name="checklist[AuditFormName]"
          placeholder="Name"
          id="AuditFormName"
        />
      </td>
    </tr>
    <tr>
      <td>Select Instituion:</td>
      <td>
        <select
          name="checklist[SelectedInstituion]"
          class="questionsInstitution"
          id="SelectedInstituion"
          onchange="updateRetailTenants()"
        >
          <option value="default"></option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Select Retail Tenant:</td>
      <td>
        <select
          name="checklist[SelectedRetailTenant]"
          class="questionsRetailTenant"
          id="SelectedTenant"
          style="width: 200px"
        >
          <option value="default"></option>
        </select>
      </td>
    </tr>
    <tr>
     <td>Send a copy of this checklist?</td>
      <input type="checkbox" Id="SendCopy" value="off" 
    </tr>
    <table>
      <input
        type="hidden"
        name="checklist[sessionEmail]"
        value="<%=sessionLogin %>"
      />
     
......
</form>

Javascript:

<script src='https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js'></script>
 <script scr='script.js'></script>
<script>
   // var form = getElementById('form')
function GenPDF(){
      var name= document.getElementById('Name')
      var element = document.getElementById ('form');
      var opt = {
          margin:       1,
          filename:     name+'.pdf',
          image:        { type: 'png', quality: 0.98 },
          html2canvas:  { scale: 2 },
          jsPDF:        { unit: 'in', format: 'letter', orientation: 'landscape' }
      };


    html2pdf().set(opt).from(element).save();

}

function checkForMissingFields() {
      if (document.getElementById("Name").value.length == 0) {
        alert("Name field cannot be blank");
        return false;
      } 
      else{
        GenPDF();
        return true;
      }
}
      
</script>

Answer 1

you need event.preventDefault(); working demo

// var form = getElementById('form')
function GenPDF() {
  var name = document.getElementById('Name').value;
  var element = document.getElementById('form');
  var opt = {
    margin: 1,
    filename: name + '.pdf',
    image: {
      type: 'png',
      quality: 0.98
    },
    html2canvas: {
      scale: 2
    },
    jsPDF: {
      unit: 'in',
      format: 'letter',
      orientation: 'landscape'
    }
  };

  html2pdf().set(opt).from(element).save();

}

function checkForMissingFields(event) {
  // event.preventDefault(); // <== completely cancel submit
  if (document.getElementById("Name").value.length == 0) {
    event.preventDefault();
    alert("Name field cannot be blank");
    return false;
  } else {
    GenPDF();
    // then submit the form
    return true;
  }
}

<script src='https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js'></script>

<form id="form" class="ui form" action="/PageTwo" method="POST" 
   onsubmit="checkForMissingFields(event)">

  <input type="text" id="Name">
  <button>submit</button>

</form>