模态表单不使用jQuery提交

时间:2018-07-29 13:45:08

标签: javascript php jquery ajax

我一直在寻找一种方法,以使提交后的模式表单保持打开状态,而我设法做到了,但是现在我的问题是提交表单没有提交值。 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代码,但仍未提交。我尝试运行它 在控制台上,它表示提交成功,但没有数据

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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