Question

我有一个用于模态（使用Bootstrap）

的表单的HTML代码

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

问题在于，当我点击＆＃34; ok＆＃34;按钮，没有发生任何事情。这是＆＃34; test.php＆＃34;文件（我以前只看它是否有效）

<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＆＃39; s return false相当于vanilla-JS＆＃39>：

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

话虽如此，您的选择器和事件绑定可能会更好，我会为表单（<form id='modalformid'>）设置ID，并绑定 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）并且检查名称冲突（在控制台console.log($)和console.log($ === jQuery)中）最后，$('form.login_form')选择器不可靠：ID根据定义是唯一的。课程不是。理论上，使用$('form.login_form')可以匹配多个表单。经验法则：如果你想处理单个表单/元素，那么类对CSS规则很有用，而不是JS事件处理（委托协助）：使用ID。

Answer 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表单工作成模态

3 个答案: