By using HTML, JavaScript and jsPDF we can create a button that can submit a form and download a pdf at the same time. We will use HTML to create the 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 one of the most common use cases. PDF is a common document format on the Internet. They can be used to track contracts, invoices, and other critical data. In many cases, a form needs to be submitted before the PDF is received. Let us discuss the complete process in detail.
Forms are a necessary component of any online application. They enable us to collect user data and transmit it to our server. We will use HTML to build the form. Here is an example of a simple 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 called downloadPDF() to download and submit the form at the same time.
function downloadPDF() { .....CODE HERE …… }
<button onclick="downloadPDF()">Submit & Download PDF/button>
We will use the jsPDF package to create the PDF. The JavaScript client library for creating PDFs is called jsPDF. It allows us to generate PDF instantly without any server-side processing. The JavaScript method contained in this code creates and downloads a PDF file to the user's device. The feature is activated when a user clicks a button on the website. Here are instructions on 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");
}
We can now combine the two since we have a form and method for creating PDFs. We will design a button that simultaneously submits the form and downloads the PDF. Below is an example of a JavaScript button that simultaneously submits the form and downloads the 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 explore the exciting world of web development and learn how to create a button that not only submits a form, but also downloads a PDF in one go using JavaScript. We walked through the steps of creating a form using HTML, handling the submission process using JavaScript, and generating a PDF document using jsPDF. By combining these powerful technologies, we managed to make a button that performs both functions with a single click. I hope this article was informative and gave you a clearer idea of how to create a button that simultaneously submits a form and downloads a PDF with the help of JavaScript.
The above is the detailed content of How to create a button that submits a form and downloads a pdf at the same time?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
