Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 12 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads