表单提交后显示模式对话框 [英] Show modal dialog after form submitted

问题描述

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

 < form name =softwareformid =softwareformaction =../ downloadlink.phpmethod = POSTalign =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-controltype =textplaceholder =Software Titlename =softtitleid =softtitle> 
< / div> 
 
< button type =submitclass =btn btn-primary> 
< i class =fa fa-cogs>< / i>下载档案
< / button> 
< / form> 
  

在下载link.php中，我正在使用头文件重定向到下载文件。
这里是我想要显示的模式对话框。

 < div class =modal fade bs-modal- smtabindex = -  1role =dialogaria-labelledby =mySmallModalLabelaria-hidden =true> 
< div class =modal-dialog modal-sm> 
< div class =modal-contentid =dialog-download> 
< br />< br /> 
< h2>您的下载已准备就绪。< / h2> 
< hr /> 
您的下载链接在这里< br /> 
< / div> 
< / div> 
< / div> 
  

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

解决方案

  $（＃softwareform）。submit （函数（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 class =modal-dialog modal-sm> 
< div class =modal-contentid =dialog-download> 
< br />< br />< h2>您的下载已准备就绪。< / h2> 
< hr /> 
您的下载链接在这里< a id =download_linktarget =_ blank> < / A> 
< br /> 
< / div> 
< / div> 
< / div> 
  

要显示一个模态，使用函数模态（show）。

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

同时检出jsfiddle： - http://jsfiddle.net/h3WDq/559/

来源： -
如何使用jQuery打开Bootstrap模式窗口？

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

I have a form that after submitting downloads file . I want automatically instead of download automatically the file ..to show a modal-dialog and display the download link.

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

In the download link.php i am redirecting after process using header to the download file. Here is the modal dialog i want to shown .

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

How can i show this dialog after form submitting? Thanks In advance

解决方案

$("#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>

To show a modal, function modal("show") is used.

Here when submitting the form, return the download link from php file, and it would be populated via jquery and modal will be shown, when user clicks on that link, the file would be downloaded

Also checkout the jsfiddle : - http://jsfiddle.net/h3WDq/559/

source :- How to open a Bootstrap modal window using jQuery?

You can change the method to POST and use serialize form to send the data from form.

这篇关于表单提交后显示模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！