2

I want to allow visitors to download a PDF after they click the form submit button.

The PDF should automatically initiate the "save as dialog" after the Download button is pressed and form details sent.

I am using Javascript to send the details to a PHP form processor. I'm not an expert in either languages and I put the code together from various examples I found online.

In a nutshell, I dont know how to initiate the download automatically after form submit and I dont know whether I should use PHP or Javascript to achieve it.

Appreciate in advance any help or advise given. Thanks

This is the Javascript

    $("#fhb_download_form").validator().on("submit", function (event) {
        if (event.isDefaultPrevented()) {
            formError1();
            submitMSG1(false, "Did you fill in the form properly?");
        } else {
            event.preventDefault();
            submitForm1();
        }
    });


    function submitForm1(){
        var fhb_fullname = $("#fhb_fullname").val();
        var fhb_email = $("#fhb_email").val();

        $.ajax({
            type: "POST",
            url: "php/fhb_form.php",
            data: "fhb_fullname=" + fhb_fullname + "&fhb_email=" + fhb_email,
            success : function(text){
                if (text == "success"){
                    formSuccess1();

                } else {
                    formError1();
                    submitMSG1(false,text);
                }
            }
        });
    }

    function formSuccess1(){
        $("#fhb_download_form")[0].reset();
        submitMSG1(true, "Download Ebook")

    }

    function formError1(){
        $("#fhb_download_form").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $(this).removeClass();
        });
    }

    function submitMSG1(valid, msg){
        if(valid){
            var msgClasses = "h3 text-center tada animated text-success";
        } else {
            var msgClasses = "h3 text-center text-danger";
        }
        $("#fhb_msgSubmit").removeClass().addClass(msgClasses).text(msg);
    }

And this is the PHP processing code

$errorMSG = "";

if (empty($_POST["fhb_fullname"])) {
    $errorMSG = "Name is required ";
} else {
    $name = $_POST["fhb_fullname"];
}

if (empty($_POST["fhb_email"])) {
    $errorMSG .= "Email is required ";
} else {
    $email = $_POST["fhb_email"];
}

$EmailTo = "junk@zenwebcreative.com.au"; 
$Subject = "Ebook Downloaded by $name";

$Body = "";
$Body .= "Name:\n";
$Body .= $name;
$Body .= "\n\n";

$Body .= "Email:\n";
$Body .= $email;
$Body .= "\n\n";

$success = mail($EmailTo, $Subject, $Body, "From:".$email);

Thanks

Kelvin Chong
  • 29
  • 8
  • 1
    Check [**`this answer`**](http://stackoverflow.com/questions/1465573/forcing-to-download-a-file-using-php#answer-1667651). – Bhavik Shah Nov 21 '16 at 04:23
  • Hi Bhavik. It sort of worked. I pasted the code you shared at the end of my php file and renamed $yourfile to my PDF. After pressing submit a weird error occurs. If you visit [http://www.zenwebcreative.com.au/_dev/financecorp/FC034/] and fill in the form you will see what I mean. Thanks – Kelvin Chong Nov 21 '16 at 05:09
  • Great that you got it working. But, the link you have posted is broken. – Bhavik Shah Nov 21 '16 at 05:12
  • How about, rather than spamming SO with your website, you edit your question and include the "weird error" your browser is getting. Nobody is going to sign up to your little book just to debug your code for you – Jaromanda X Nov 21 '16 at 05:20
  • line 46, check what `text` is ... you'll see it's `success%PDF.....all 1192820 bytes of the pdf here` ... so your code treats it as an error, because `text !== 'success'` – Jaromanda X Nov 21 '16 at 05:30
  • Sorry @Bhavik Shah. Here is a screenshot instead. http://www.zenwebcreative.com.au/_dev/financecorp/FC034/error.jpg – Kelvin Chong Nov 21 '16 at 05:33
  • @KelvinChong: Everything is working fine. Just, don't return anything else than the file in response. From the screenshot, it seems as if you are returning `success` apart from data. – Bhavik Shah Nov 21 '16 at 05:42

1 Answers1

0

Answer is based upon the screenshot you have shared and comments.

On the server-side, you need to remove the line which prints "success". You have to return only the file as response.

On Client-side, update your submitForm1 function as below.

function submitForm1(){
    var fhb_fullname = $("#fhb_fullname").val();
    var fhb_email = $("#fhb_email").val();

    $.ajax({
        type: "POST",
        url: "php/fhb_form.php",
        data: "fhb_fullname=" + fhb_fullname + "&fhb_email=" + fhb_email,
        success : function(text){
            // Whatever processing you need to do here
            formSuccess1();
        }
    });
}

Please note, you have to check the function as per your functionality. I just want to highlight that you don't need to check text == "success"

Bhavik Shah
  • 2,300
  • 1
  • 17
  • 32
  • Hi @BhavikShah. Thanks for trying to help. When you say server side I assume you are referring to the php script? Im sorry for being such a noob but Im not sure what you mean by "the line that prints Success". Thanks – Kelvin Chong Nov 21 '16 at 06:04
  • @KelvinChong: Yes. You are right. Server side means PHP script. You can just comment the line which prints "success". – Bhavik Shah Nov 21 '16 at 06:07
  • Hi. I dont have a line that prints success in the PHP code. I have a variable called $success that sends an email with the form values and that is the only thing in the code that has the word success. Im not sure where else the line that prints success could exist. – Kelvin Chong Nov 21 '16 at 06:13