Question

我一直在寻找一种方法，以使提交后的模式表单保持打开状态，而我设法做到了，但是现在我的问题是提交表单没有提交值。 jQuery有什么问题吗？

这是我的代码：

<form class="needs-validation" id="contact-form" action="index13.php" method="post" novalidate>
    <div class="row" style="margin-left: 300px;">
        <label>Date:</label>  
        <span id="date1" name="date"></span>
    </div>
    <div class="row" style="margin-left: 300px;">
        <label>Time:</label> 
        <span id="clock1" name="time"></span>
    </div>  
    <div class="md-form form-sm mb-5" style="margin-top: 05px;">
        <i class="fa fa-user prefix"></i>
        <input type="text" id="username2" name="username2" class="form-control form-control-sm" required>
        <label for="modalUsername">Username</label>
        <div class="invalid-feedback" style="margin-left: 30px">
            Enter username.
        </div>
    </div>
    <div class="md-form form-sm mb-4">
        <i class="fa fa-lock prefix"></i>
        <input type="password" id="password1" name="password1" class="form-control form-control-sm" required>
        <label for="modalPassowrd">Password</label>
        <div class="invalid-feedback" style="margin-left: 30px">
            Enter password.
        </div>
    </div>
    <div class="text-center mb-3">
        <button type="submit" id="submit1" name="submit" class="btn btn-info">Log out <i class="fa fa-sign-out ml-1"></i></button>
    </div>

    <!--Footer-->
    <div class="modal-footer">
        <div class="options text-center text-md-right mt-1">
            <p class="font-small blue-text d-flex justify-content-end" data-toggle="modal" data-target="#modalPush">
                Forgot <a href="#" class="blue-text ml-1" style="margin-right: 310px;">Password?</a>
            </p>
        </div>
    </div>
</form>

index13内的php：

<?php
    include_once ('connection.php');

    if (isset($_POST['submit'])) {
        $username2 = $_POST['username2'];
        $password1 = $_POST['password1'];
        $time = date("H:i:s");
        $sql = "select * from visitor_att where uname = '$username2' and pass = '$password1'";
        $result = mysqli_query($conn,$sql);
        $count = mysqli_num_rows($result);
        if ($count == 0) {
            echo "No Results";
        } else {
            while ($row = mysqli_fetch_array($result)) {
                $username2 = $row['uname'];
                $password1 = $row['pass'];
                $fname=$row['fname'];
                $lname=$row['lname'];   
                $InsertSql = "Update visitor_att set timeout = '$time' where uname = '$username2' and pass = '$password1'";
                $res = mysqli_query($conn, $InsertSql); 
            }
        }
    }
?>

以下是该脚本用于防止提交后的模态表单刷新：

    <script>    
$(function() {


 var frm = $("#contact-form");

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr("method"),
            url: frm.attr("action"),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
           });
        });
    });
</script>

希望您能帮助我，谢谢。

更新了我的jQuery代码，但仍未提交。我尝试运行它在控制台上，它表示提交成功，但没有数据

Answer 1

问题出在服务器端代码，即PHP代码。

在服务器端PHP代码上，您编写了一个条件，即，如果请求中包含$_POST['submit']键，则将数据插入数据库中，否则不执行任何操作。

这是JSFiddle，我在其中尝试了此代码https://jsfiddle.net/g2b4ujzp/1/。转到打开浏览器的小工具，转到“网络”选项卡，单击“注销”按钮。在那里，您会发现请求中的键submit没有任何值。

您正在序列化表单并发送数据，但是form.serialize()方法未序列化按钮元素。因此，命名为submit的输入不会被序列化，从而导致条件isset($_POST['submit'])在服务器端为假。

我建议您为else条件编写isset($_POST['submit'])代码块，以通过打印一些错误来进行调试。然后在客户端上添加一个带有一些值的名为submit的隐藏输入元素。

模态表单不使用jQuery提交

1 个答案: