Question

我的表格如下：

<div id="up">
<center>
<p >
<h3> Reimbursement Form For Employee Day Care</h3>
</center>


<form action="./ssoServlet?from=amount" method="post">

<input type="hidden" name="formName" value="DayCareForm" >
<center>
<table>
<tr>
<td> Date </td>
<td> <input type="text" name="date" id="date" readonly>
</td>
</tr>
<tr>
<td> Name </td>
<td> <input type="text" name="name" id="name"> </td>
</tr>
<tr>
<td> Department </td>
<td> <input type="text" name="department" id="department"> </td>
</tr>
<tr>
<td> Designation </td>
<td> <input type="text" name="designation" id="designation"> </td>
</tr>
<tr>
<td> Name of the Day Care</td>
<td> <input type="text" name="daycare" id="daycare" required> </td>
</tr>
<tr>
<td> Name of the Child </td>
<td> <input type="text" name="childName" id="childName" required> </td>
</tr>
<tr>
<td> Date of Birth </td>
<td> <input type="date" name="dob" id="dob" onchange="ageCalculation()"  required> </td>
</tr>
<tr>
<td> Age </td>
<td> <input type="text" name="age" id="age" required readonly> </td>
</tr>
<tr>
<td> Amount  </td>
<td> <input type="text" name="amount" id="amount" onchange="dayCareAmount()" required > </td>
</tr>
 <tr>
<td> Total amount claimed </td>
<td> <input type="text" name="total" id="total" required> </td>
</tr> 
</table>

</center>

<p>

 *(Employee to attach birth certificate of the child on claiming reimbursement for the first time) 
 <hr>
<br>

<font color="red">Maximum of INR 2000 p.m. </font> 

<br>


 I hereby declare that all the information provided above is correct. <br><br>
Signature of Applicant: ......................................................... <br>
<hr>
<br>
Signature of Manager: ......................................................... <br>
<hr>
Receipt of the Day Care
<br>
<br>
Signature of Finance Controller <br>
<hr>
Signature of Vice President & Managing Director: <br>
<br>
<br>
<br>
Approved/Not Approved: .........................................................


<br>
<p> Note: -  <br>
Employees to ensure that the DAY CARE Center is registered under shop act establishment.
<br>
Employees will be responsible towards the safety of the child and company holds no obligation.   
</p>

<div id="down">
<button onclick="dayCarePdf()" type="submit"> Convert to PDF </button>
</div>
</form>
</div>

我有以下函数在我的.js文件中生成pdf

function dayCarePdf(){


     var doc = new jsPDF();  
            doc.setFontSize("15");
        doc.setFontType("bold");  
        doc.text(85, 35, 'IDeaS INDIA');  
        doc.text(50, 42, 'Reimbursement Form For Employee Day Care');
        doc.setFontType("normal");  
        doc.setFontSize("12");
        doc.text(50, 58, 'Date');  
        doc.text(50, 68, 'Name');  
        doc.text(50, 78, 'Department');  
        doc.text(50, 88, 'Designation');  
        doc.text(50, 98, 'Name of the Day Care  ');  
        doc.text(50, 108, 'Name of the Child');  
        doc.text(50, 118, 'Date of Birth');  
        doc.text(50, 128, 'Age');  


--etc etc
doc.save('DayCareForm.pdf');
}

正确生成pdf。当我点击转换为pdf按钮时，我希望仅在填写所有字段且不为空白时生成pdf。但是，我收到了说明＆＃34;请填写此字段＆＃34;对于我想要的文本字段，但pdf也是同时生成的。如果没有输入字段，我不希望调用daycarepdf函数

Answer 1

您缺少金额和参考金额的参考资料您在函数dayCarePdf（）

中声明的总金额

Answer 2

由于需要阻止button type="submit"默认行为，否则它将提交表单。

验证完成后，您最好使用action

执行ajax

function dayCarePdf(event){
    event.preventDefault()
     // Rest of the code
    doc.save('DayCareForm.pdf');
}

Answer 3

你可以这样做......

{

    $('#submit_btn').on('click', function() {
        $("#form_id").valid();
    });

}

Answer 4

当我编写以下代码时，验证和pdf生成可以同时工作：

function dayCarePdf(){

    if(document.getElementById("daycare").value=="" || document.getElementById("childName").value=="" || document.getElementById("dob").value==""
        || document.getElementById("age").value=="" || document.getElementById("amount").value=="" || document.getElementById("total").value=="")
    {
        //alert("Please fill all the data required");
        return false;
    }
    else{
     var doc = new jsPDF();
 --- etc etc
doc.save('DayCareForm.pdf');}
}

无法同时验证表单和调用函数onclick提交按钮

4 个答案: