我正在尝试在提交表单之前调用函数。 这是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()函数... 感谢您的帮助!
答案 0 :(得分: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>