Article Categories

Selected Reading

How to create a button that submits a form and downloads a pdf simultaneously?

Javascript Web Development Front End Technology

By using HTML, JavaScript and jsPDF, we can create a button that can submit the form and download a PDF simultaneously. We will use HTML to create a form, JavaScript to handle the submission process and jsPDF to generate the PDF document. This is a common requirement in web applications where users need to submit data and receive a PDF receipt or confirmation document.

Setting Up the Form

First, let's create a basic HTML form with input fields to collect user information:

<form id="contactForm">
   <h2>Contact Form</h2>
   <label for="name">Enter your Name:</label>
   <input type="text" id="name" name="name" required><br><br>
   
   <label for="email">Enter your Email:</label>
   <input type="email" id="email" name="email" required><br><br>
   
   <label for="phone">Enter your Phone:</label>
   <input type="tel" id="phone" name="phone"><br><br>
   
   <label for="city">Enter your City:</label>
   <input type="text" id="city" name="city"><br><br>
   
   <label for="state">Enter your State:</label>
   <input type="text" id="state" name="state"><br><br>
   
   <button type="button" onclick="submitFormAndDownloadPDF()">Submit & Download PDF</button>
</form>

Creating the PDF Generation Function

Next, we'll create a JavaScript function that captures form data and generates a PDF using the jsPDF library:

function submitFormAndDownloadPDF() {
   // Get form data
   var name = document.getElementById("name").value;
   var email = document.getElementById("email").value;
   var phone = document.getElementById("phone").value;
   var city = document.getElementById("city").value;
   var state = document.getElementById("state").value;
   
   // Validate required fields
   if (!name || !email) {
      alert("Please fill in all required fields");
      return;
   }
   
   // Create PDF
   var doc = new jsPDF();
   doc.setFontSize(16);
   doc.text(20, 20, "Form Submission Details");
   doc.setFontSize(12);
   doc.text(20, 40, "Name: " + name);
   doc.text(20, 50, "Email: " + email);
   doc.text(20, 60, "Phone: " + phone);
   doc.text(20, 70, "City: " + city);
   doc.text(20, 80, "State: " + state);
   doc.text(20, 100, "Submitted on: " + new Date().toLocaleDateString());
   
   // Download the PDF
   doc.save("form-submission.pdf");
   
   // Simulate form submission
   alert("Form submitted successfully! PDF downloaded.");
}

Complete Working Example

Here's the complete HTML page that demonstrates both form submission and PDF download:

<!DOCTYPE html>
<html>
<head>
   <title>Form Submit and PDF Download</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
   <style>
      body {
         font-family: Arial, sans-serif;
         margin: 20px;
      }
      form {
         max-width: 400px;
         margin: 0 auto;
         padding: 20px;
         border: 1px solid #ccc;
         border-radius: 8px;
         background-color: #f9f9f9;
      }
      label {
         display: block;
         margin-top: 10px;
         font-weight: bold;
      }
      input {
         width: 100%;
         padding: 8px;
         margin-top: 5px;
         border: 1px solid #ddd;
         border-radius: 4px;
         box-sizing: border-box;
      }
      button {
         width: 100%;
         padding: 12px;
         margin-top: 15px;
         background-color: #007bff;
         color: white;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-size: 16px;
      }
      button:hover {
         background-color: #0056b3;
      }
   </style>
</head>
<body>
   <form id="contactForm">
      <h2>Contact Information Form</h2>
      
      <label for="name">Full Name *</label>
      <input type="text" id="name" name="name" required>
      
      <label for="email">Email Address *</label>
      <input type="email" id="email" name="email" required>
      
      <label for="phone">Phone Number</label>
      <input type="tel" id="phone" name="phone">
      
      <label for="city">City</label>
      <input type="text" id="city" name="city">
      
      <label for="state">State</label>
      <input type="text" id="state" name="state">
      
      <button type="button" onclick="submitFormAndDownloadPDF()">
         Submit Form & Download PDF
      </button>
   </form>

   <script>
      function submitFormAndDownloadPDF() {
         // Collect form data
         var name = document.getElementById("name").value;
         var email = document.getElementById("email").value;
         var phone = document.getElementById("phone").value;
         var city = document.getElementById("city").value;
         var state = document.getElementById("state").value;
         
         // Validate required fields
         if (!name || !email) {
            alert("Please fill in all required fields (Name and Email)");
            return;
         }
         
         // Create new PDF document
         var doc = new jsPDF();
         
         // Add title
         doc.setFontSize(18);
         doc.text(20, 20, "Form Submission Receipt");
         
         // Add a line
         doc.setLineWidth(0.5);
         doc.line(20, 25, 190, 25);
         
         // Add form data
         doc.setFontSize(12);
         doc.text(20, 40, "Submitted Information:");
         doc.text(20, 55, "Name: " + name);
         doc.text(20, 65, "Email: " + email);
         doc.text(20, 75, "Phone: " + (phone || "Not provided"));
         doc.text(20, 85, "City: " + (city || "Not provided"));
         doc.text(20, 95, "State: " + (state || "Not provided"));
         
         // Add timestamp
         doc.text(20, 115, "Submitted on: " + new Date().toLocaleString());
         
         // Add footer
         doc.setFontSize(10);
         doc.text(20, 140, "Thank you for your submission!");
         
         // Save the PDF
         doc.save("contact-form-submission.pdf");
         
         // Show success message
         alert("Form submitted successfully! Your PDF receipt has been downloaded.");
         
         // Optional: Reset the form
         document.getElementById("contactForm").reset();
      }
   </script>
</body>
</html>

Key Features

This implementation includes several important features:

Form Validation: Checks for required fields before processing
PDF Generation: Creates a formatted PDF with form data
Timestamp: Adds submission date and time to the PDF
Error Handling: Shows alerts for missing required information
Form Reset: Clears the form after successful submission

How It Works

When the user clicks the "Submit Form & Download PDF" button, the following process occurs:

JavaScript collects all form field values
Required fields are validated
A new jsPDF document is created
Form data is formatted and added to the PDF
The PDF is automatically downloaded to the user's device
A success message is displayed

Conclusion

Using JavaScript and jsPDF library, you can easily create a button that submits form data and generates a downloadable PDF simultaneously. This approach provides users with instant feedback and documentation of their submissions without requiring server-side processing.

Saurabh Anand

Updated on: 2026-03-15T23:19:00+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next