如何在递交表格后开始自动下载pdf

Question

我是新加入的PHP和Html，我有一个表单，我可以张贴详细信息使用第三方服务。我想使此表单提交方式，在提交后，这应该开始pdf下载automatically.It应该执行两个动作，在同一按钮点击。我经历了许多解决办法，但我无法做到这一点。这是我的表格

 <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>

此表单提交工作正常，在此之后我如何开始下载pdf，javascript或php中的任何示例代码都将是helpful.Thanks。

Answer 1

您需要在表单中添加一个id="SampleForm"。

<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>

然后您需要添加一些代码来处理表单提交事件上的下载。

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

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

Answer 2

您必须使用Javascript来处理提交，而不是默认的提交。

有一些关于通过javascript：https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript发送表单提交的文档