提交表单后显示模式对话框答案

【问题标题】：Show modal dialog after form submitted提交表单后显示模式对话框
【发布时间】：2015-08-20 01:55:27
【问题描述】：

我有一个提交下载文件后的表单。我想自动而不是自动下载文件..来显示模式对话框并显示下载链接。

<form name="softwareform" id="softwareform" action="../downloadlink.php" method="POST" align="left">
  <div class="input-group margin-bottom-sm">
      <span class="input-group-addon">
         <i class="fa fa-windows fa-fw"></i>
      </span>
      <input class="form-control" type="text" placeholder="Software Title" name="softtitle" id="softtitle">
  </div>

  <button type="submit" class="btn btn-primary"  >
      <i class="fa fa-cogs"></i>Download File
  </button>
</form>

在下载 link.php 中，我在使用标头处理后重定向到下载文件。这是我要显示的模态对话框。

<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-sm">
      <div class="modal-content" id="dialog-download">
         <br/><br/>
         <h2>Your Download is ready.</h2>
         <hr/>
         Your Download link is here <br/>
      </div>
   </div>
</div>

如何在表单提交后显示此对话框？提前致谢

【问题讨论】：

@Epodax 我可以从第二个表单回显下载链接，但是如何在第一个表单上触发它？谢谢
@Epodax No....我想在第一页上显示模式....不在进程页面上..我想显示而不是重定向
查看 Namit 的回答 :) 它解释了我试图比我做得更好的东西。

标签： php jquery forms twitter-bootstrap

【解决方案1】：

$("#softwareform").submit(function(e){
    e.preventDefault();
    $.ajax({
        type : 'POST',
        data: $("#softwareform").serialize(),
        url : 'url',
        success : function(data){
            $("#download_link").html(data);
            $("#download_modal").modal("show");
        }
    });
    return false;
});

<div id="download_modal" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" id="dialog-download">
            <br/><br/><h2>Your Download is ready.</h2>
            <hr/>
             Your Download link is here<a id="download_link" target="_blank"> </a>
            <br/>
        </div>
     </div>
</div>

要显示模态，使用函数 modal("show")。

这里提交表单时，从php文件返回下载链接，它会通过jquery填充并显示模态，当用户点击该链接时，文件将被下载

还可以查看 jsfiddle：-http://jsfiddle.net/h3WDq/559/

来源：- How to open a Bootstrap modal window using jQuery?

您可以将方法更改为 POST 并使用序列化表单从表单发送数据。

【讨论】：

……感谢您的回答。我在我的表单上添加了上面的代码......还检查了你发给我的链接..但我仍然无法让它工作。在我处理我使用标题重定向的表单的 php 上......我必须在上面添加一些东西.php 文件？我还阅读了您提到的网址，但对我没有帮助...
你好，在php文件上，不要再使用redirect了，只返回需要下载的文件的url，这样如果用户点击新的url，文件就是为他下载
重点是，在第一次提交时，您处理表单信息，并将文件的下载 url 返回到前端以显示在 modal 上，然后使用该链接下载文件模态本身
我试过了……我删除了重定向，但是当我提交表单并且没有打开对话框时，它仍然会打开 downloadlink.php
另外，如果你需要表单数据，只需将方法从get改为post，并序列化表单

【解决方案2】：

您需要通过 ajax 发送表单数据，然后手动打开模式。在表单页面上

    <form name="softwareform" id="softwareform" method="POST" align="left">
    <div class="input-group margin-bottom-sm">
    <span class="input-group-addon">
     <i class="fa fa-windows fa-fw"></i>
    </span>
    <input class="form-control" type="text" placeholder="Software Title" name="softtitle" id="softtitle">
    </div>
    <a href="javascript:void(0);" onclick="submit_form()" class="btn btn-primary"  >
    <i class="fa fa-cogs"></i>Download File
    </button>
    </form> 

    <div id="download_modal" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
    <div class="modal-content" id="dialog-download">
        <br/><br/><h2>Your Download is ready.</h2>
        <hr/>
         Your Download link is here<a id="download_link" target="_blank"> </a>
        <br/>
     </div>
    </div>
    </div>

    <script type="text/javascript">
         function submit_form(){
           var data = $('#softwareform').serialize();
           url = 'downloadlink.php',
             $.ajax({
             method: 'POST',
             url : 'url',
             dataType:'html', //json,html you will echo on the php file
             success : function(data){
        $("#download_link").html(data);
        $("#download_modal").modal("show");
    }
});
         }

    </script>

【讨论】：