如何将 PHP 表单放入模态框
Posted
技术标签:
【中文标题】如何将 PHP 表单放入模态框【英文标题】：How to put a PHP form into a modal 【发布时间】：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">×</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 我并不是说雄心勃勃是错误的，但是有更有效的学习方法，考虑到我们甚至不知道，尝试同时学习可能不是最好的方法他正在咨询什么知识来源，这可能会成为未来澳元的痛苦。
【参考方案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");
);
);
);
【讨论】：
以上是关于如何将 PHP 表单放入模态框的主要内容，如果未能解决你的问题，请参考以下文章