模态表单不使用jQuery提交

Question

I was looking for a way to keep my modal form open after submit and I manage to do that but now my problem is the submit form is not submiting the value. Is there somthing wrong with my jQuery?

Here is my code:

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

php inside index13:

<?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); 
            }
        }
    }
?>

Here is the script is use to prevent my modal form from refreshing after submit:

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

Hope you can help me, thanks.

Updated my jQuery code, still not submiting. i try to run it on console, it says submission was successful but no data

Answer 1

The Problem is with server side code ie PHP code.

On server side PHP code you have written a condition ie if the request contains $_POST['submit'] key then insert the data in the database otherwise do nothing.

Here is the JSFiddle where i tried this code https://jsfiddle.net/g2b4ujzp/1/ . Go to the fiddle open developer tools of the browser go to network tab, click the log out button. There you will see that there is no value with the key submit in the request.

You are serializing the form and sending the data but the form.serialize() method does not serializes the button elements. hence the submit named input doesn't serialize causing the condition isset($_POST['submit']) false on server side.

I would suggest you to write an else code block for the condition isset($_POST['submit']) to debug by printing some error. And on client add a hidden input element named submit with some value.