AJAX加载页面后表单提交按钮失效问题求助

你遇到的提交按钮失效问题，主要是HTML结构不规范和前端脚本加载错误导致的，下面分点说明并给出修复方案：

1. 核心问题：表格与表单的嵌套违反HTML规范 #

在load.php中，你将<form>直接包裹在<tr>外部/内部，这不符合HTML语法规则：<table>的直接子元素只能是<thead>、<tbody>、<tr>等，不能直接放置<form>标签。浏览器会自动修正这种错误结构，导致表单和提交按钮的关联关系被破坏，最终按钮无法触发提交动作。

修复后的load.php代码 #

我们可以将表单放在每行的最后一个<td>内部，确保结构合法：

<table class="dataTable">
    <tr>
        <th>Serial</th>
        <th>Date</th>
        <th>Voltage</th>
        <th>Current</th>
        <th>Action</th>
    </tr>
    <?php
    include ("DBconnect.php");
    $conn= mysqli_connect( $dbhost, $dbuser, $dbpass, $db );
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    $sql = "SELECT Date, Voltage, Current FROM dataTable WHERE Date >= (CURDATE() - INTERVAL 10 DAY) ORDER BY Date DESC";
    $result = $conn->query($sql);
    $i=1;
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo '<tr>';
            echo"<td>" . $i. "</td>";
            echo"<td>" . $row["Date"]. "</td>";
            echo"<td>". $row["Voltage"] . "</td>";
            echo"<td>". $row["Current"]. "</td>";
            echo "<td>";
            // 将表单放在td内部，保证结构合法
            echo "<form action='action.php' method='get' target='_blank'>";
            echo '<input type="hidden" name="getTime" value="' . $row["Date"] . '" />';
            echo '<input type="submit" name="Submit" value="select"/>';
            echo "</form>";
            echo "</td>";
            echo '</tr>';
            $i++;
        }
    } else {
        echo "<tr><td colspan='5'>0 results</td></tr>";
    }
    $conn->close();
    ?>
</table>

2. 前端脚本加载错误 #

在index.html中，你存在script标签嵌套和重复加载jQuery版本的问题：

• 嵌套的script标签会被浏览器解析错误，导致后续脚本无法正常加载
• 同时加载jQuery 3.1.1和1.9.0会引发版本冲突，破坏原有功能

修复后的index.html代码 #

移除重复的jQuery引用，修正script标签结构：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 只保留一个jQuery版本，推荐用较新的3.1.1 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="myScript.js"></script>
</head>
<body>
    <div id="auto"></div>
</body>
</html>

3. 可选优化：避免重复刷新的冗余操作 #

你的myScript.js中，每次刷新的逻辑可以稍微优化，确保DOM操作的顺序更合理（不影响功能，但体验更好）：

$(document).ready(function(){
    $('#auto').load('load.php');
    refresh();
});

function refresh() {
    setTimeout(function() {
        $('#auto').fadeOut('slow', function() {
            // 等待淡出完成后再加载新内容
            $(this).load('load.php', function() {
                // 加载完成后再淡入
                $(this).fadeIn('slow');
            });
        });
        refresh();
    }, 10000);
}

完成以上修复后，动态加载的表单提交按钮就能正常触发提交动作了。

内容的提问来源于stack exchange，提问作者dragon123