如何将 PHP 表单放入模态框答案

【问题标题】：How to put a PHP form into a modal如何将 PHP 表单放入模态框
【发布时间】：2016-01-19 02:42:54
【问题描述】：

我有这个用于模态表单的 HTML 代码（使用 Bootstrap）

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="edit-user-modal-label" aria-hidden="true">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">


          <form name="login_form" action="test.php" method="post" role="form">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">                  
                      <label for="email">Email:</label>
                      <input type="email" class="form-control" id="email" placeholder="Enter email">                  
                </div>

                <div class="form-group">
                      <label for="pwd">Password:</label>
                      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                </div>
            </div>

            <div class="modal-footer">
                <input id="submit" name="submit" type="submit" value="Ok" class="btn btn-primary">
            </div>

          </form>

      </div>

    </div>
</div>

问题是当我点击“确定”按钮时，什么也没有发生。这是“test.php”文件（我只是用来看看它是否有效）

<html>
    logged
</html>

我是 bootstrap 的新手，所以我不太清楚为什么它不能像通常的 HTML+CSS 页面那样工作。谢谢你的帮助！

编辑

我找到了这个 AJAX 代码，并尝试将其调整到我的代码中，但仍然无法正常工作。

$(document).ready(function () {
            $("input#submit").click(function(){
                $.ajax({
                    type: "POST",
                    url: "test.php", // 
                    data: $('form.login_form').serialize(),
                    success: function(msg){
                        $("#form-content").modal('hide');   
                    },
                    error: function(){
                        alert("failure");
                    }
                });
            });
        });

现在，我只想在按下按钮后转到另一个 PHP 页面（我还没有编写登录验证代码）。

【问题讨论】：

显示处理表单的实际 PHP 代码，并显示处理表单的 submit 事件的任何 JS 代码。如果您想要一个模态表单提交，您可能需要处理提交事件，取消提交并改为执行 AJAX 调用。 PS：你不需要 action="test.php" 属性：默认情况下，表单提交到当前 url
对不起，我不清楚，已经编辑了我的帖子。我以前没有工作过 AJAX，所以我不确定我添加的代码是否正确。谢谢四位您的回答！
你真的应该一步一步地开始，你试图在没有清楚了解基础知识的情况下把事情推到你的喉咙里。缓慢而稳定的进步比快速而断断续续的进步要好
@Onilol：有野心并没有错，只要你有足够的耐心去调试、编码和同时学习
@EliasVanOotegem 我并不是说雄心勃勃是错误的，但是有更有效的学习方法，考虑到我们甚至不知道，尝试同时学习可能不是最好的方法他正在咨询什么知识来源，这可能会成为未来澳元的痛苦。

标签： php html twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

我知道发生了什么，只需添加这个

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
    $(document).ready(function(){

    $('#submit').click(function(){

      $('#loginModal').modal('show'); 
    });

</script>

【讨论】：

您如何“看到正在发生的事情”？ OP 没有发布任何 JS 代码，也没有展示可能处理表单的 PHP 代码
对不起，我编辑了这个问题以获得更多细节。这不是我想做的，但仍然感谢您的帮助！
@Elias 当我发布我的答案时没有 javascript...对不起。

【解决方案2】：

您的问题最明显的部分是，当您执行 AJAX 调用时，您实际上并没有阻止表单提交。您不想提交页面，而是等待 ajax 请求结束，并在成功回调中处理响应。由于您使用的是 jQuery，因此最简单的方法是从事件回调中返回 false：

$(document).ready(function () {
            $("input#submit").click(function(){
                $.ajax({
                    type: "POST",
                    url: "test.php", // 
                    data: $('form.login_form').serialize(),
                    success: function(msg){
                        $("#form-content").modal('hide');   
                    },
                    error: function(){
                        alert("failure");
                    }
                });
                return false;//stop form submission
            });
        });

jQuery 的 return false 相当于 vanilla-JS 的：

eventObj.preventDefault();//do not handle event in a normal fashion
eventObj.stopPropagation();//do not propagate event to other handlers

话虽如此，您的选择器和事件绑定可能会更好，我会为表单设置一个 ID (<form id='modalformid'>)，并绑定 submit 事件（可以由用户按下enter)，然后像这样绑定处理程序：

$('#modalformid').on('submit', function()
{
    var frm = $(this);//reference to the form that is submitted
    $.ajax({
        type: "POST",
        url: "test.php",
        data: frm.serialize(),//serialize correct form
        success: function(msg) {
            //the response from the server is in msg here!
            $("#form-content").modal('hide');   
        },
        error: function(){
            alert("failure");
        }
    });//your ajax call here
    return false;
});

我还会检查控制台以确保您在调用 $(document).ready() 之前包含所有 JS 依赖项（即 jQuery）并仔细检查名称冲突（在控制台 @ 987654331@ 和 console.log($ === jQuery))。
最后，$('form.login_form') 选择器不可靠：ID 根据定义是唯一的。上课不是。理论上，使用$('form.login_form') 可以匹配不止一种形式。经验法则：类对 CSS 规则很有用，而不是对 JS 事件处理（委托除外），如果你想处理单个表单/元素：使用 ID。

【讨论】：

没用 :( 我还删除了表单代码中的“action”和“method”属性，但仍然没有用。我在所需的引导脚本之后添加了
@user3587175：更新的答案：您没有完全正确地绑定处理程序，还添加了一些步骤来调试您的问题
我在i809.photobucket.com/albums/zz12/laura_bruges1/… 表单中添加了id，这就是我实现脚本s809.photobucket.com/user/laura_bruges1/media/… 的方式你认为这可能是什么错误？非常感谢您的帮助
@user3587175：在第二个 sn-p 中，我没有发布完整的 $.ajax 调用，只发布了 data 键，因为它需要更改。您省略了关键参数（如type 和url）。如果 JS 代码不起作用，总是首先检查控制台的错误输出（在 chromium & co 上按 ctrl+shift+j）

【解决方案3】：

我同意埃利亚斯的观点。在 AJAX 调用的情况下，您不想提交表单，因为页面会重新加载并且您永远不会得到响应。

在您的 JS 中，您正在绑定一个点击事件，这很好，但您的 input 是 type="submit"，这会导致问题。

首先，删除它。

<input id="submit" name="submit" value="Ok" class="btn btn-primary">

其次，在 JQuery 中，您为表单引用了无效的选择器。

$('form.login_form').serialize()

没有login_form 类。由于 AJAX 会为您处理请求，因此我建议您改用 id 并最小化属性。

<form id="login_form" role="form">

根据您提供的 HTML，我必须假设您想要隐藏 #loginModal 而不是 #form-content。

$(document).ready(function () {
    $("input#submit").click(function(){
        $.ajax({
            type: "POST",
            url: "test.php",
            data: $('form#login_form').serialize(),
            success: function(msg){
                $("#loginModal").modal('hide');
                // show validation error if applicable   
            },
            error: function(){
                alert("failure");
            }
        });
    });
});

【讨论】：