Вызов функции перед отправкой формы

Question

Я пытаюсь вызвать функцию перед отправкой формы. Вот это html

<form id="form_email" method="POST" name="form_email">
<h2>Quel est votre email ?</h2>
<hr>
    <div id="mail">
    {{form_email.mail}}
        </div>

<button type="button" name="Envoi" onclick="hide_generate();">Télécharger</button>
</form>

, а вот функция js

function hide_generate(){
if ( document.getElementById('mail').value == "" ) {
alert("Fill All Fields !");
} else {
document.getElementById('abc').style.display = "none";
generatePDF();
document.getElementById('form_email').submit();
}
}


function generatePDF() {
    var element = document.getElementById('content');
    var opt = {
      margin:       1,
      filename:     'rapport_analyse.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2  },
      jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }
    };

    // New Promise-based usage:
    html2pdf().from(element).set(opt).save();
    }

Проблема в том, что форма отправляется напрямую без вызова функции generatePDF () ... Спасибо за вашу помощь!

Answer 1

Вы можете прикрепить свою функцию к событию нажатия кнопки. Использование jQuery:

$("btn-envoi").on('click', hide_generate);

Использование простого javascript:

var button = document.getElementById('btn-envoi');
button.addEventListener('click', hide_generate);

    // Validating Empty Field
    function check_empty() {
          if ( document.getElementById('email').value == "" ) {
                alert("Fill All Fields !");
          } else {
                document.getElementById('form').submit();
                alert("Form Submitted Successfully...");
          }
    
    }
    //Function To Display Popup
    function div_show() {
          document.getElementById('abc').style.display = "block";
    }
    //Function to Hide Popup
    function div_hide(){
          document.getElementById('abc').style.display = "none";
    }
    
    function hide_generate(ev){
        if (document.getElementById('email').value == "" ) {
            alert("Fill All Fields !");
        } else {
            document.getElementById('abc').style.display = "none";
            generatePDF();
            document.getElementById('form_email').submit();
        }
    }
    
    
    var button = document.getElementById('btn-envoi');
    button.addEventListener('click', hide_generate);

    <div id="abc">
    <!-- Popup Div Starts Here -->
    <div id="popupContact">
    <!-- Contact Us Form -->
      <form id="form_email" method="POST" name="form_email">
        <h2>Quel est votre email ?</h2>
        <hr>
          <input type="text" id="email" />
    
        <button type="button" name="Envoi" id="btn-envoi">Télécharger</button>
      </form>
    </div>
    <!-- Popup Div Ends Here -->
    </div>
    <!-- Display Popup Button -->
    <h1>Telécharger le rapport d'analyse</h1>
    <button id="popup" onclick="div_show()">Télécharger le rapport au format PDF</button>