I’ve been working through one of those client requests that isn’t use too often. They wanted a PDF be automatically downloaded after submitting their email (the only field on the form).
I started thinking about different scenarios, particularly this one:
If a visitor successfully completes the form and hits submit, should the PDF open on a new window tab or should it be automatically be downloaded?
I came up with an awesome solution, two methods that work slightly the same.
Method #1
<script>
jQuery(document).ready(function() {
if (jQuery("#confirm-download").length) {
var pdfDocument = jQuery("#download-pdf").attr("href");
var newTab = window.open(pdfDocument, '_blank');
newTab.location;
}
});
</script>
The problem with the #1 method is that trigger a browser pop up blocker. I spent hours on this subject and there’s no way around it with javascript/jQuery.
The only workaround would be to reload the PDF document on the same URL, see method #2.
Method #2
<script>
jQuery(document).ready(function() {
if (jQuery("#confirm-download").length) {
var pdfDocument = jQuery("#download-pdf").attr("href");
jQuery.get(pdfDocument, function() {
window.location.href = jQuery("#download-pdf").attr('href');
});
}
});
</script>
My particular project didn’t need a submit() or click() handler but if you wanted to integrate that you just need to wrap the function within an event handler of your choice. Yeah, my particular situation a bit unique.
For most situations you’re probably going to run into a more common scenario where the event handler is attached to the button itself. If you’re interested in this approach, I’ve got you covered.
Check it out…
<script>
jQuery(document).ready(function() {
jQuery("#the-button-that-is-clicked").click(function() {
if (jQuery("#check-input-field").val() != '') {
var pdfDocument = "/wp-content/uploads/the-pdf-file.pdf";
var newTab = window.open(pdfDocument, '_blank');
newTab.location;
} else {
return false; // optional
}
});
});
</script>
The last final solution you might have thought about would be html5’s download attribute, look I think it’s awesome – at the time of this posting it is only supported by the latest browsers though.
The download attribute in action below:
// (.img, .pdf, .txt, .html, etc.) <a href="/pdf/pdf-file.pdf" download>Download</a>