时间戳

首页 > 解决方案 > 模态表单不使用jquery提交

javascript - 模态表单不使用jquery提交

问题描述

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

标签： javascriptphpjqueryajax

解决方案

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

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

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

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

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

推荐阅读