一次提交表单并下载文件

Question

I have a file download page where I want people who download my file to fill in a form. The form looks like this:

        <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="download">
            <tr>
                <td width='30%' class="left">Your name</td>
                <td width='70%'><input name="name" type="text" value=""></td>
            </tr>
            <tr>
                <td class="left">Your organisation</td>
                <td><input name="organisation" type="text" value=""></td>
            </tr>
            <tr>
                <td class="left">The place your map will cover</td>
                <td><input name="area" type="text" value=""></td>
            </tr>
            <tr>
                <td class="left">Your email</td>
                <td><input name="email" type="text" value=""></td>
            </tr>
            <tr>
                <td class="left">&nbsp;</td>
                <td><input name="MM_load" type="hidden" value="download">
                    <input style="margin-top: .8em" type="submit" class="button" value="Download Now"></td>
            </tr>
        </form>

In the PHP before the HTML I have:

if ((isset($_POST['MM_load']))&&($_POST['MM_load']=='download')) {
    $organisation = mysqli_real_escape_string($db, stripslashes($_POST['organisation']));
    $area = mysqli_real_escape_string($db, stripslashes($_POST['area']));
    $name = mysqli_real_escape_string($db, stripslashes($_POST['name']));
    $email = mysqli_real_escape_string($db, stripslashes($_POST['email']));
    $query_insert = "INSERT INTO downloads (organisation, area, name, email) VALUES ('$organisation', '$area', '$name', '$email')";
    $result = $db->query($query_insert) or die($db->error.__LINE__);


echo "<script>window.getElementsByClassName('dl_link').click();</script>";

  $insertGoTo = "thanks.php";
  echo "<script type='text/javascript'>window.location.href='".$insertGoTo."'</script>";
}

Then buried in the body of the page is the download link:

<a style="visibility:hidden" class="dl_link" href="https://example.com/defib-package/defib.1.1.zip" download></a>

The intention is:

1. The user fills in the form and clicks the Download Now button.

2. The page reloads and inserts the data in the database.

3. The javascript does a virtual click on the download link so the file is downloaded to the user's Downloads folder.

4. The user is then re-directed to the thanks.php page.

Steps 1, 2 and 4 work, but 3 doesn't.

I've tried modifying the download link so it can be clicked manually. It then works. I've tried putting the PHP (including the embedded javascript) in the head of the page that doesn't help. I'm a complete novice on javascript so I expect the problem lies there, but it's code I have copied from another answer on Stack Overflow. Where should I go from here?

EDIT in response to coredo's reply. Coredo helped me make some progress but I'm not there yet. The timeout works nicely but I'm getting "Uncaught TypeError: window.getElementById is not a function" in the console for the link click. I've swapped from class to id, and put it in a function but all the attempts throw up something along the same line. My latest code is

$insertGoTo = "thanks.php";
  echo "<script type='text/javascript'>
    alert('Just starting');
    function dl() {window.getElementById('dl_link').click();}
    dl();
  alert('Part way');
  setTimeout(function(){ window.location.href='".$insertGoTo."' }, 5000);
  </script>";

EDIT 2 Cracked it!

1. getElementById doesn't work on a window element. It had to be changed to document.

2. It appears that the click was trying to execute before the DOM was created. So I wrapped it in window.onload. The final form of the script is

   $insertGoTo = "thanks.php"; echo " window.onload = function(){ document.getElementById('dl_link').click(); } setTimeout(function(){ window.location.href='".$insertGoTo."' }, 2000); "; }

Answer 1

Change

echo "<script>window.getElementsByClassName('dl_link').click();</script>";

to:

echo "<script>document.getElementsByClassName('dl_link')[0].click();</script>";

as getElementsByClassName may return multiple objects.

Also it is possible that window.location.href redirect will redirect user too fast and download might not start. Try to add some delay here using setTimeout:

setTimeout(function(){ window.location.href='".$insertGoTo."' }, 2000);