![Trending Articles on Technical and Non Technical topics](/images/trending_categories.jpeg)
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a button that submits a form and downloads a pdf simultaneously?
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. The act of submitting a form and getting a PDF is among the most frequent use cases. On the internet, PDFs are a common format for documents. They may be used to keep track of contracts, invoices, and other crucial data. In many instances, submitting a form is required before receiving a PDF. Let’s discuss the complete procedure in detail.
Developing a Form
For any online application, forms are a necessary component. They enable us to gather user data and transmit it to the server. We'll use HTML to build a form. Here's an illustration of a straightforward form with five input fields −
<form> <h2>Tutorials point Contact Form</h2> <label for="name">Enter your Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Enter your Email:</label> <input type="email" id="email" name="email"><br><br> <label for="phone">Enter your Ph.no.:</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 current State:</label> <input type="text" id="state" name="state"><br><br> <button onclick="downloadPDF()">Submit & Download PDF</button> </form>
We will use a function named downloadPDF() to download and submit the form at the same time.
function downloadPDF() { .....CODE HERE …… } <button onclick="downloadPDF()">Submit & Download PDF/button>
Generating the PDF
We'll make use of the jsPDF package to create a PDF. A JavaScript client-side library for creating PDFs is called jsPDF. Without requiring any server-side processing, it enables us to produce PDFs instantly. A JavaScript method contained in this code creates a PDF file and downloads it to the user's device. When a user hits a button on the website, the function gets activated. The following is an illustration of how to create a PDF using jsPDF −
function downloadPDF() { .....CODE HERE …… } function downloadPDF() { 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; var doc = new jsPDF(); doc.text(20, 20, "Name: " + name); doc.text(20, 30, "Email: " + email); doc.text(20, 40, "Phone: " + phone); doc.text(20, 50, "City: " + city); doc.text(20, 60, "State: " + state); doc.save("form.pdf"); }
Integrating the form and PDF Generation
We can now combine the two since we have a form and a method for creating a PDF. We'll design a button that simultaneously submits the form and downloads the PDF. Here is an example of a JavaScript button that simultaneously submits a form and downloads a PDF −
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <style> form { margin: 20px auto; padding: 20px; border: 1px solid gray; border-radius: 5px; width: 500px; text-align: center; } label { display: inline-block; width: 120px; text-align: left; margin-right: 10px; } input[type="text"], input[type="email"], input[type="tel"] { padding: 10px; font-size: 18px; border-radius: 5px; border: 1px solid gray; width: 250px; margin-bottom: 20px; } button { margin-top: 20px; padding: 10px 20px; border-radius: 5px; background-color: green; color: white; font-size: 18px; cursor: pointer; } </style> <script> function downloadPDF() { 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; var doc = new jsPDF(); doc.text(20, 20, "Name: " + name); doc.text(20, 30, "Email: " + email); doc.text(20, 40, "Phone: " + phone); doc.text(20, 50, "City: " + city); doc.text(20, 60, "State: " + state); doc.save("form.pdf"); } </script> </head> <body> <form> <h2>Tutorials point Contact Form</h2> <label for="name">Enter your Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Enter your Email:</label> <input type="email" id="email" name="email"><br><br> <label for="phone">Enter your Ph.no.:</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 current State:</label> <input type="text" id="state" name="state"><br><br> <button onclick="downloadPDF()">Submit & Download PDF</button> </form> </body> </html>
In this article, we explored the exciting world of web development and discovered how to create a button that not only submits a form but also downloads a PDF all at once using JavaScript. We walked through the steps of using HTML to create a form, JavaScript to handle the submission process and jsPDF to generate the PDF document. By combining these powerful technologies, we successfully crafted a button that can perform both functions with a single click. I hope this article has been informative and provided you with a clearer understanding of how to create a button that submits a form and downloads a PDF simultaneously with the help of JavaScript.