表单提交前的函数调用

Question

I'm trying to call a function before submitting a form. Here is the 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>

and here is the js function

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();
    }

The problem is the form is submitted directly without calling the generatePDF() function... Thanks for your help !

Answer 1

You can attach your function to the button click event. Using jQuery:

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

Using plain 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>