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: