模态表单不使用jquery提交答案

【问题标题】：modal form not submit using jquery模态表单不使用jquery提交
【发布时间】：2018-07-29 13:45:07
【问题描述】：

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

【问题讨论】：

密码不应以纯文本形式存储。应该加盐和加密。
我认为你必须使用一些 ajax 解决方案来做这件事。 api.jquery.com/jquery.post
正如@Endless 提到的，PHP 提供了password_hash() 和password_verify() 请使用它们。您的脚本也很容易受到 SQL 注入攻击。因此，当您让表单提交通过 ajax 工作时，请查看prepared parameterized statements。
您确定页面中只有一个表单吗？也许更好地使用$('form#contact-form').serialize()
您的 PHP 代码中存在语法错误。随机的</script> 标签在那里有什么作用？

标签： javascript php jquery ajax

【解决方案1】：

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

在服务器端 PHP 代码中，您已经编写了一个条件，即如果请求包含 $_POST['submit'] 键，则将数据插入数据库中，否则什么也不做。

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

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

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

【讨论】：