How to create download countdown page in wordpress using javascript and form post method

Rahul Yogi 0
Viewed 32

How to create a file download page that show countdown before downloading a file. (like https://ihax.io/mx-player-tegra2-codec-zip/) when click on download button below it redirect to a page (/download-is-starting) and after a countdown over file is automatically downloaded.

On post page it uses -

<form method="post" action="https://ihax.io/download-is-starting/" class="wp-block-imple-download-file-button"><input type="hidden" name="time" value="20"><input type="hidden" name="url" value="https://driverdroidstorage.b-cdn.net/MX/mx_tegra2.zip"><button>Download mx_tegra2.zip</button></form>

and on download page (https://ihax.io/download-is-starting/) it shows javascript code like

<script type="text/javascript">
            var timeleft = 20;
            var downloadTimer = setInterval( function() {
                if( timeleft < 0 ) {
                    clearInterval(downloadTimer);

                    const link = document.createElement('a');
                    link.href = 'https://driverdroidstorage.b-cdn.net/MX/mx_tegra2.zip';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);

                    // Set the success message.
                    document.getElementById("download-message").innerHTML = 'Your download has started. ';
                } else {
                    document.getElementById("sdf-countdown").innerHTML = timeleft;
                    timeleft -= 1;
                }
            }, 1000);
        </script>

I want to insert the same function on my wordpress site but when i an unable to understand how to bring (link.href) value in javascript from form method post.

Basically when you alter form url value, it should also change javascript url value for a file.

Please check the site above, i am unable to explain, i am noob in coding.

wordpress-shortcode forms jquery javascript html
1 Answers

If you are actually posting the form and need to handle the data in your javascript you can get the url value like this:

link.href = '<?php echo filter_input(INPUT_POST, 'url', FILTER_SANITIZE_URL); ?>';

Since you are adding a html block from your editor this will not work, instead you will need to install a plugin which supports adding PHP code in the editor for instance:

https://wordpress.org/plugins/php-everywhere/

Another and in my opinion a better way would be to create a page template for this:

<?php /* Template name: Custom Download Template */ ?>
<?php 
get_header();
// Get the 'url' POST parameter from the form
$fileUrl = filter_input(INPUT_POST, 'url', FILTER_SANITIZE_URL);
$fileName = basename($fileUrl);
// Get the 'timeout' POST parameter from the form
$timeout = filter_input(INPUT_POST, 'timeout', FILTER_VALIDATE_INT);
?>
<p class="has-text-align-center">Please wait while we prepare your download. Your download will begin automatically.</p>
<script>
let timeleft = <?php echo $timeout; ?>
let downloadTimer = setInterval(function() {
  if (timeleft < 0) {
    clearInterval(downloadTimer)
    const link = document.createElement('a')
    link.href = '<?php echo $fileUrl; ?>'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    // Set the success message.
    document.getElementById("download-message").innerHTML = 'Your download has started. '
  } else {
    document.getElementById("sdf-countdown").innerHTML = timeleft
    timeleft -= 1
  }
}, 1000);
</script>
<div class="download-message-wrap">
  <h2 id="download-message">Your download of <?php echo $fileName; ?> will start in <span id="sdf-countdown"><?php echo $timeout; ?></span> seconds..</h2>
  <p>If your download does not start click here to start the download <a href="<?php echo $fileUrl; ?>" target="_blank" rel="noopener" download><?php echo $fileName; ?></a></p>
</div>
<?php
get_footer();

After placing this template in your current theme directory you should be able to select the template named 'Custom download template' for your page in the edit screen.

Cyclonecode0
Related