How to start automatic download of pdf on after form submission

Question

I am new into PHP and Html , I have a form where I am able to post details using third party service.I want to make this form submission in such a way that after submission this should start pdf download automatically.It should perform 2 actions on same button click. I have gone through many solutions but I am not able to make this work. Here is my form

 <div class="modal-body">
  <div class="media-container-column" data-form-type="formoid">


        <div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>

        <form class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
            <div data-for="name">
                <div class="form-group">
                    <input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
                </div>
            </div>
            <div data-for="email">
                <div class="form-group">
                    <input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
                </div>
            </div>
            <div data-for="phone">
                <div class="form-group">
                    <input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
                </div>
            </div>

            <span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
        </form>
    </div>
</div>

This form submission is working fine, how can I start downloading pdf after this, any sample code in javascript or php would be helpful.Thanks

Answer 1

You need to add an id="SampleForm" in your form.

<div class="modal-body">
  <div class="media-container-column" data-form-type="formoid">


        <div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>

        <form id="SampleForm" class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
            <div data-for="name">
                <div class="form-group">
                    <input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
                </div>
            </div>
            <div data-for="email">
                <div class="form-group">
                    <input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
                </div>
            </div>
            <div data-for="phone">
                <div class="form-group">
                    <input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
                </div>
            </div>

            <span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
        </form>
    </div>
</div>

Then you need to add some code to process download on form Submit event.

<script>
    var pdfUrl = "https://example.com/link-to-your-pdf";

    $('#SampleForm').on('submit', function () {
        window.open(pdfUrl, '_blank');
    });
</script>

Answer 2

You'll have to handle submission with Javascript, instead of the default one.

There is some documentation about sending form submission throught javascript: https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript