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

17 Feb, 2022
There is no direct method to download and submit the form simultaneously, but we can perform this task if we control the form submission and on clicking the submit form button we first trigger the downloading of the PDF and then submit the form. So, the approaches which we can follow to achieve this are discussed below:
Approach 1: Creating submit form button outside the form:
Firstly, create a form with the hidden submit button.
Give id to the form submit button to access it using JS.
Create a button outside the form and also give it a unique id to access it.
Make an anchor tag using createElement property and assigning it the href and download attribute.
After that, we simply call the submit button click event on clicking the download button, using onClick property.
HTML
<!DOCTYPE html><html lang="en"><head>    <style>        form {            color: green;        }    </style></head>    <body>    <!-- GFG is the name of the file to be downloaded-->    <!-- In order to run the code, the location of the         file "GFG.pdf" needs to be changed to your local        directory, both the HTML and downloadable file         needs to be present in the same directory -->    <form method="post">        <label for="username">GFG Username</label>        <input type="text" name="username" />        <input type="submit" id="submit-form"             value="submit" hidden />    </form>      <button id="download-pdf">Submit</button>      <script>        const downloadPdf = document            .querySelector("#download-pdf");          const submitForm = document            .querySelector("#submit-form");          downloadPdf.addEventListener("click", () => {              // Creating the element anchor that            // will download pdf            let element = document.createElement("a");            element.href = "./GFG.pdf";            element.download = "GFG.pdf";              // Adding the element to body            document.documentElement.appendChild(element);              // Above code is equivalent to            // <a href="path of file" download="file name">               // onClick property, to trigger download            element.click();              // Removing the element from body            document.documentElement.removeChild(element);               // onClick property, to trigger submit form            submitForm.click();        });    </script></body>  </html>
Output:
On Submit:
Approach 2: Disable submission on submit: The more easy method can be disabling the submission on clicking the submit-form button and do submission manually on calling a function that downloads PDF first and then submits the form.
Firstly, create the form with attribute onsubmit set to ‘return: false;’, which actually prevents the form from submitting on clicking the submit button.
Make an anchor tag using createElement property and assigning it the href and download attribute.
After that, we simply call the submit event on the form to submit it, after triggering the download from the element we created.
HTML
<!DOCTYPE html><html>  <head>    <style>        form {            color: green;        }    </style></head>  <body>    <!-- GFG is the name of the file to be downloaded-->    <!-- In order to run the code, the location of the         file "GFG.pdf" needs to be changed to your local        directory, both the HTML and downloadable file          needs to be present in the same directory -->    <form id="my-form" onsubmit="return: false;">        <label for="username">GFG username</label>        <input type="text" name="username" />        <input type="submit" id="submit-form"             value="Submit" />    </form>      <script>        const myForm = document            .querySelector("#my-form");          const submitForm = document            .querySelector("#submit-form");          submitForm.addEventListener("click", () => {              // Creating element to download pdf            var element = document.createElement('a');              // Setting the path to the pdf file            element.href = 'GFG.pdf';              // Name to display as download            element.download = 'GFG.pdf';              // Adding element to the body            document.documentElement.appendChild(element);              // Above code is equivalent to            // <a href="path to file" download="download name"/>              // Trigger the file download            element.click();              // Remove the element from the body            document.documentElement.remove(element);              // Submit event, to submit the form            myForm.submit();        });    </script></body>  </html>
Output:
On Submit:
surinderdawra388
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
Technical Scripter 2020
CSS
HTML
JavaScript
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
HTML Cheat Sheet - A Basic Guide to HTML
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)