Question

我已经尝试了2天但仍然没有运气！

我想

将表单从index.php提交到result.php
当index.php打开时，在Modal中显示result.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

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

Answer 1

嗯我花了一些时间，但我想我找到了你的问题的答案，或者至少这个解决方案可以给你一个很好的线索，告诉你如何继续你正在做的事情。

首先是index.php：在这里你需要让你的表单有一个输入字段和一个按钮，我们称之为模态，并提交表单（使用Ajax发布）

<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标签，以便找到他:)这样：

<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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">MyModal</h4>
      </div>
      <div class="modal-body">
        <div id="bingo"></div>

      </div>
    </div>
   </div>
</div>

此页面还需要有一个脚本标记来完成这项工作。重要必须将放在加载jquery文件的脚本标记之后。

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

最后但并非最不重要的结果.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。我希望我没有用ids，变量或类似的东西弄乱，因为我试图调整你的例子的解决方案。我希望这是你需要的，或者至少这将是完成你的任务的线索。仍然认为这可以在一个页面上完成，但我尝试找到一种方法来完成这项工作很有趣...... GL！

如何将表单提交到Bootstrap模式（将POST方法发送到Modal）Laravel

1 个答案: