php 表单提交后显示模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30661043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show modal dialog after form submitted
提问by jason88
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 .
在下载 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>
How can i show this dialog after form submitting? Thanks In advance
提交表单后如何显示此对话框？提前致谢
回答by Namit Singal
$("#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.
要显示模态，使用函数 modal("show")。
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
在这里提交表单时，从 php 文件返回下载链接，它将通过 jquery 填充并显示模态，当用户单击该链接时，将下载该文件
Also checkout the jsfiddle : - http://jsfiddle.net/h3WDq/559/
还要检查 jsfiddle ： - http://jsfiddle.net/h3WDq/559/
source :- How to open a Bootstrap modal window using jQuery?
来源 :- 如何使用 jQuery 打开 Bootstrap 模式窗口？
You can change the method to POST and use serialize form to send the data from form.
您可以将方法更改为 POST 并使用序列化表单从表单发送数据。
回答by Shreeraj Karki
You will need to send the form data through ajax and then open up the modal manually. On the form page
您将需要通过 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>
