如何将 PHP 表单放入模式中

Question

我有这个 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 页面（我还没有编写登录验证代码）。

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

Answer 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;
});

我还会检查控制台以确保您包含所有 JS 依赖项（即 jQuery） . 最后，$(document).ready()

 选择器不可靠：根据定义，ID 是唯一的。课程不是。理论上，使用

console.log($)

 可以匹配不止一种形式。经验法则：类对于 CSS 规则很有用，对于 JS 事件处理（委托除外）则没有那么多，如果你想处理单个表单/元素：使用 ID。

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

在你的 JS 中，你绑定了一个点击事件，这很好，但是你的

console.log($ === jQuery)

是

$('form.login_form')

Answer 3

首先，删除它。

$('form.login_form')

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

input

没有

type="submit"

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

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

根据您提供的 HTML，我必须假设您想要隐藏

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

而不是

login_form

.

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

如何将 PHP 表单放入模式中

问题描述投票：0回答：3

3个回答

最新问题

如何将 PHP 表单放入模式中

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3