downloading pdf using jquery after submit function

Question

in this code from https://www.codingsnow.com/2021/01/create-php-send-email-contact-form.html

<center>
    <h4 class="sent-notification"></h4>

    <form id="myForm">
        <h2>Send an Email</h2>

        <label>Name</label>
        <input id="name" type="text" placeholder="Enter Name">
        <br><br>

        <label>Email</label>
        <input id="email" type="text" placeholder="Enter Email">
        <br><br>

        <label>Subject</label>
        <input id="subject" type="text" placeholder=" Enter Subject">
        <br><br>

        <p>Message</p>
        <textarea id="body" rows="5" placeholder="Type Message"><textarea><!--textarea tag should be closed (In this coding UI textarea close tag cannot be used)-->
        <br><br>

         <a  id="linkID" href="#"  >   
        <button type="button" class="btn btn-primary"  onclick="sendEmail()" value="Send An Email" 
         >Submit</button>
        </a>
    </form>
</center>

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    function sendEmail() {
        var name = $("#name");
        var email = $("#email");
        var subject = $("#subject");
        var body = $("#body");

        if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body)) {
            $.ajax({
               url: 'sendEmail.php',
               method: 'POST',
               dataType: 'json',
               data: {
                   name: name.val(),
                   email: email.val(),
                   subject: subject.val(),
                   body: body.val()
               }, success: function (response) {
                    $('#myForm')[0].reset();
                    $('.sent-notification').text("Message Sent Successfully.");
               }
            });
        }
    }

    function isNotEmpty(caller) {
        if (caller.val() == "") {
            caller.css('border', '1px solid red');
            return false;
        } else
            caller.css('border', '');

        return true;
    }
</script>

when I click the submit button, I want to download a pdf called "./sales.pdf" only when the submit is a success

this is what i tried to change in the code in the script, i have added $('#linkID').attr({target: '_blank', href : url}); but this does not give any result, nothing downloads also in phpmailer...if i try to add three forms on the same page, they all stop working..is it related to script integrity?

<script type="text/javascript">
    function sendEmail() {
        var name = $("#name");
        var email = $("#email");
        var subject = $("#subject");
        var body = $("#body");
        var url = "./Sales.pdf";


        if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body)) {
            $.ajax({
               url: 'sendEmail.php',
               method: 'POST',
               dataType: 'json',
               data: {
                   name:email.val(),
                   email: email.val(),
                   subject: body.val(),
                   body: body.val()
               }, success: function (response) {
                    $('#myForm')[0].reset();
                    $('#linkID').attr({target: '_blank', href : url});<<<<<----this
                                 }
            });
        }
    
    

Answer 1

Since jQuery 3.0, success: function does no more work as it has been suppressed, see https://api.jquery.com/jquery.ajax/ .

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

But you can use this arrangement for the new sendMail():

    function sendEmail() {
        var name = $("#name");
        var email = $("#email");
        var subject = $("#subject");
        var body = $("#body");

        if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body)) {
            $.ajax({
               url: 'sendMail.php',
               method: 'POST',
               dataType: 'json',
               data: {
                   name: name.val(),
                   email: email.val(),
                   subject: subject.val(),
                   body: body.val()
               }
            })
            .done(function(response) {
              //alert(response.status);
              $('#myForm')[0].reset();
              $('#linkID').attr({target: '_blank', href : "./sales.pdf", download: "download"});
              $('#linkID')[0].click();

            })
            ;
        }
    }

When you press submit, after sending mail, sales.pdf will be automatically downloaded.