Question

我试图根据用户选择的项目将一些变量发布到PHP脚本，然后将选择加载到当前页面而不重定向用户。但是，当我单击按钮提交数据时，返回false不会触发，我会被重定向到表单中指定的操作。有人能告诉我代码中的问题在哪里吗？

 <!DOCTYPE html>
    <html>
    <head>
    <title> Today's Clients</title>

    <link href="../_css/jquery-ui.min.css">
    <script src="../_js/jquery.min.js"></script>
    <script src="../_js/jquery-ui.min.js"></script>

    <script>
    $(document).ready(function(){
        $("#clientSubmit").submit(function(event) {
            var clientInformation = $(this).serialize();
            $.post('IRCpopulatecheckin.php',clientinformation,clientForm);
            function clientForm(data) {
                if (data!='') {
                    $('#clientform').load("IRCpopulatecheckin.php");
                } else {
                    alert("your data returned nothing!!! rewrite the code...");
                }
            } // end clientForm
         return false;
        }); // end .submit
    }); // end ready

    </script>

    <style>

    /* css to style and remove everything but text */
        #hiddenInput {
                    position    :relative;
                    width       :0px;
                    height      :8px;
                    top         :-40px;
                    left        :-230px;260
                    }
        input[name="dailyClient"] {
                    background-color: white;
                    border: none;
                    font-weight :bold;
                    font-family :sans-serif;
                    font-size: 15px;  
                    color: black;
                    cursor: default;
                    line-height: normal;
                    padding: 6px;
                    text-align: center;
                    text-shadow: none;
                    white-space: pre;
                    }

        input[name="dailyClient"]:hover {
                    color: blue;
                    }
    </style>                
    <body>
    <div id="clientform"></div>

    <?php 

    ini_set('display_errors',1);  error_reporting(E_ALL);

    if(isset($_POST['DATE'])) {
        $DATE = $_POST['DATE'];
        }else{
            $DATE = date('Y-m-d');
             }

    require_once 'IRCconfig.php';

    $connection = new mysqli($db_hostname, $db_username, $db_password, $db_database);
        if ($connection->connect_error) die($connection->connect_error);

    $query  = "SELECT * FROM CLIENT_CHECKIN WHERE DATE>='$DATE' ORDER BY F_NAME ASC";
        $result = $connection->query($query);

    if (!$result) die ("Database access failed: " . $connection->error);

    $rows = $result->num_rows;

    for ($j = 0 ; $j < $rows ; ++$j)
        {
            $result->data_seek($j);
            $row = $result->fetch_array(MYSQLI_NUM);

            echo <<<_END
            <pre>
                <div id="hiddenInput"><div style="display:none">
                <form id="clientSubmit" action="IRCpopulatecheckin.php" method="post"><input id="date" type="hidden" name="DATE" value="$row[0]"><input id="first" type="hidden" name="F_NAME" value="$row[1]"><input id="middle" type="hidden" name="M_NAME" value="$row[2]"><input id="last" type="hidden" name="L_NAME" value="$row[3]"></div>
                <input type="submit" name="dailyClient" value="$row[1] $row[2] $row[3]"></form>
                </pre>
    _END;
        }

    ?>
    </body>
    </html>

Answer 1

而不是return false使用event.preventDefault。请注意您已经在onsubmit：

中拥有参数

$(document).ready(function(){
    $("#clientSubmit").submit(function(event) {
        event.preventDefault();
        var clientInformation = $(this).serialize();
        $.post('IRCpopulatecheckin.php',clientinformation,clientForm);
        function clientForm(data) {
            if (data!='') {
                $('#clientform').load("IRCpopulatecheckin.php");
            } else {
                alert("your data returned nothing!!! rewrite the code...");
            }
        } // end clientForm
    }); // end .submit
});

Answer 2

问题似乎在于您使用相同的clientSubmit ID创建多个表单。（所以它很可能适用于页面中的第一个表单）

我的必须在页面中是唯一的。

如果要将相同的功能应用于多个元素，则应使用类。

因此，请将表单更改为<form class="clientSubmit" action=...

和你的脚本

$(document).ready(function(){
    $(".clientSubmit").submit(function(event) {
        var self = $(this),
            clientInformation = self.serialize();
        $.post('IRCpopulatecheckin.php',clientinformation,clientForm);
        function clientForm(data) {
            if (data!='') {
                self.load("IRCpopulatecheckin.php");
            } else {
                alert("your data returned nothing!!! rewrite the code...");
            }
        } // end clientForm
     return false;
    }); // end .submit
}); // end ready

JQuery .post函数没有正确执行

2 个答案: