如何将表单提交到Bootstrap模式(将POST方法发送到模式)Laravel [英] How to Submit Form into Bootstrap Modal (send POST method into Modal) Laravel
问题描述
我已经尝试了2天,但还是没有运气!
I have been trying for 2 days but still no luck!
我想
- 将表单从index.php提交到result.php
- 打开index.php时,在Modal中显示result.php! (没有 关闭index.php)
- Submit Form from index.php to result.php
- Show result.php inside Modal while index.php is open! (without closing index.php)
这是示例代码!
index.php
index.php
<form id="myform" method="post" action="result.php" target="_blank">
<input type="text" name="userId" id="userId"/>
<input id="button" type="submit"/>
</form>
result.php
result.php
<div id="resultModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="fa fa-times-circle"></i>ESC</button>
<h4 class="modal-title">Show Result </h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
在情态身体中
<?php $selectedId = $_POST['userId'];
echo $selectedId;
?>
还有JQuery
<script type="text/javascript">
$('#myForm').on('submit', function(ev) {
var userId = $('#userId').find("input").val();
$.ajax({
type: 'POST',
url : $(this).attr('action'),
data: userId,
success: function () {
// alert('form was submitted');
}
});
});
</script>
推荐答案
嗯,我花了一些时间,但我想我已经找到了您问题的答案,或者至少此解决方案可以为您提供如何继续的好线索与你在做什么.
Well it has taken me some time but I think I found an answer to your question, or at least this solution can give you a good clue on how to continue with what you are doing.
第一个index.php:在这里,您需要具有一个带有输入字段和一个按钮的表单,我们将其称为模式表单,然后提交表单(使用Ajax进行发布)
First index.php: Here you need to have your form with an input field and one button, which we will call modal, and submit form (using Ajax for post)
<form id="form" method="post">
<div id="userDiv"><label>UserId</label>
<input type="text" name="userId" id="userId" placeholder="UserId"/> <br></div>
<button type="button" id="btn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Send Data</button>
</form>
然后,您需要一个模式,您可以在其中放置远程页面中的内容.在模态主体中,您再添加一个id为"bingo"的div标签,可以很容易地找到他:),就像这样:
Then you need a modal where you will put content from remote page. In modal-body you add one more div tag with id="bingo" to locate him easy :) like this:
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">MyModal</h4>
</div>
<div class="modal-body">
<div id="bingo"></div>
</div>
</div>
</div>
</div>
此页面还需要有一个脚本标签来完成这项工作. 重要,必须将其放置在加载jquery文件的脚本标签后 之后.
This page also needs to have a script tag which will do the job. Important it must be placed after the script tag where you load the jquery file.
<script>
$(document).ready(function(){
$("#btn").click(function(){
var vUserId = $("#userId").val();
if(vUserId=='')
{
alert("Please enter UserId");
}
else{
$.post("result.php", //Required URL of the page on server
{ // Data Sending With Request To Server
user:vUserId,
},
function(response,status){ // Required Callback Function
$("#bingo").html(response);//"response" receives - whatever written in echo of above PHP script.
$("#form")[0].reset();
});
}
});
});
</script>
最后但并非最不重要的result.php:
And last but not the least result.php:
<?php
if($_POST["user"])
{
$user = $_POST["user"];
// Here, you can also perform some database query operations with above values.
echo "Your user id is: ". $user;
}
?>
P.S.我希望我不要把id,变量或类似的东西弄乱,因为我试图根据您的示例调整解决方案.我希望这是您所需要的,或者至少这将是完成任务的线索.仍然认为可以在一页上完成此操作,但是对我来说,尝试找到一种使之完成工作的方法很有趣... GL!
P.S. I hope I didn't mess somewhere with ids, variables or similar because I tried to adjust the solution to your example. I hope this is what you need, or at least this will be a clue to accomplish your task. Still think that this could be done on one page but it was interesting for me to try to find a way to make this work... GL!
这篇关于如何将表单提交到Bootstrap模式(将POST方法发送到模式)Laravel的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!