Function call before form submit

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 !

• BadPiggie: You have set an id mail for div. And trying to access value of the div. document.getElementById('mail').value. NOTE That div doesn't have value. You need to use innerHTML or innerText
• Ruan Mendes: As a side note, you should handle the submit event, not the click of a button, since users can submit the form by pressing enter.

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>

• Ruan Mendes: The button will not submit the form automatically, it says type="button". That means OP also doesn't need to call preventDefault()
• romainvdl: Hi Bruno and Juan ,thanks for your answer, I tried but nothing happens when I click on the button, I put the full code below
• romainvdl: Thanks again Bruno, we're alomst there but now it submits the form without editing the pdf (which is done by the generatePDF function), and the function works fine since it generates the PDF if I put the document.getElementById('form_email').submit(); line in comment...
• Bruno Farias: Is the generatePDF function asynchronous? If so, there is probably a callback that is executed when the PDF is complete, you need to move the submit() function call to inside this callback.
• romainvdl: I added the generatePDF() function code in the question. I tried to put the submit at the end of teh function but then it was submitted directly without generating the PDF. You're right, it must be a question of asynchronicity but I'm not familiar with this...