蓝极冰焰 2024-07-08 11:10 采纳率: 40.7%
浏览 7
已结题

php同一个单元格里多选提交,更新表格

在表格的同一行中,为某位选手匹配了多个选项数据,这些选项数据都在username这一行里的某个单元格里,通过复选以后,提交给PHP更新文件去插入到数据表中
请问以下该如何修改?(目前的状态是,无论选了几个,提交之后,这2个或3个都是重复提交了第一个数据)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>报名参赛 >> 比赛报名</title>
</head>
<body>    

<a style="font-size:18px; font-weight:bold">报名</a>
    <form id="myForm">
    <button type="button" id="bm" name="bm">提交报名</button><br>
 
    <table style="width:70%">
        <tr>
        <th style="width:15%">姓名</th>
        <th style="width:50%">项目-组别</th>
        </tr>
            <?php
                $athletes_sql = "SELECT * FROM athletes WHERE `teamname` = ? AND `game` = ? AND `name` = ? ";
                $athletes_stmt = $pdo->prepare($athletes_sql);
                $athletes_stmt->execute([$selectedTeamnames, $selectedGames, $selectedNames]); 
                $athletes_rows = $athletes_stmt->fetchAll(PDO::FETCH_ASSOC);

                    foreach ($athletes_rows as $row):
                    $username = htmlspecialchars($row['username']);
                    $realname = htmlspecialchars($row['realname']);
                    $idnumber = htmlspecialchars($row['idnumber']);
            ?>
        <tr>      
            <td style="text-align: left;">
                <input type="hidden" class="username" value="<?=$username;?>"><?=$realname;?></td>
            <td style="text-align: left;">
                <input type="hidden" class="idnumber" value="<?=$idnumber;?>"><?=$idnumber;?></td>
            <td style="text-align: left;">
                <?php
                    $xuhao = 0;
                    foreach ($group_rows as $gv_row):
                    $xuhao++;
                    $group = htmlspecialchars($gv_row['group']);
                    $event = htmlspecialchars($gv_row['event']);
                ?>
                (<?=$xuhao;?>)
                <?php 
                    if($OK_rows){
                        echo "<a style='color:#1ab2ab'>本组项已报名</a>";
                    } else {
                        echo "<input type='checkbox' class='row-checkbox' value='<?=$username;?>'>";
                    }
                ?>
                <input type="hidden" class="xuhao" value="<?=$xuhao;?>">
                <input type="hidden" class="group<?=$xuhao;?>" value="<?=$group;?>"><?=$group;?>-
                <input type="hidden" class="event<?=$xuhao;?>" value="<?=$event;?>"><?=$event;?><br>
                <?php endforeach; ?>
            </td>
        </tr>
            <?php endforeach; ?>
    </table>
    </form>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
<script>
    $(document).ready(function() {
        $('#bm').on('click', function(event) {
        event.preventDefault();
        var xuhao = $('#xuhao').val();
        var ids = [];
        var groups = [];
        var events = [];

        $('input.row-checkbox:checked').each(function() {
            var rowId = $(this).val();
            ids.push(rowId);
            var groupVal = $(this).closest('tr').find('.group' + xuhao).val();
            var eventVal = $(this).closest('tr').find('.event' + xuhao).val();
            groups.push(groupVal);
            events.push(eventVal);
        });

        
        if (ids.length === 0) {
            alert('请至少选择一个条目进行更新!');
            return;
        }

        var game = $('#game-select').val();
        var name = $('#name-select').val();
        var teamname = $('#teamname-select').val();
        var username = $('#username').val();
        var station = $('#station-select').val();

            $.ajax({
                url: 'bmcs_bm_bm.php', 
                type: 'POST',
                data: {
                    'ids': ids,
                    'game': game,
                    'name': name,
                    'teamname': teamname,
                    'username': username,
                    'station': station,
                    'groups': groups,
                    'events': events

                },
                success: function(response) {
                    $('#bmcs-content').html(response);
                },
                error: function(xhr, status, error) {
                    console.error("Error submitting form: " + error);
                    alert('批量更新失败:' + error);
                }
            });
        });
    });
    </script>

</html>


  • 写回答

15条回答 默认 最新

  • 杨同学* 2024-07-08 13:18
    关注

    该回答结合ChatGPT4o及杨同学*共同作答, 如有帮助,还请采纳。
    要实现多选提交并正确插入到数据库中,您需要确保所有选中的数据都能正确传递到服务器,并在服务器端正确解析和处理。以下是对您的代码进行的一些调整:

    前端 HTML 和 JavaScript

    1. 确保每个 input 元素都具有唯一的标识符,以便可以正确获取对应的数据。
    2. 更新 JavaScript 代码以正确收集所有选中的值。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>报名参赛 >> 比赛报名</title>
    </head>
    <body>    
     
    <a style="font-size:18px; font-weight:bold">报名</a>
        <form id="myForm">
        <button type="button" id="bm" name="bm">提交报名</button><br>
     
        <table style="width:70%">
            <tr>
            <th style="width:15%">姓名</th>
            <th style="width:50%">项目-组别</th>
            </tr>
                <?php
                    $athletes_sql = "SELECT * FROM athletes WHERE teamname = ? AND game = ? AND name = ? ";
                    $athletes_stmt = $pdo->prepare($athletes_sql);
                    $athletes_stmt->execute([$selectedTeamnames, $selectedGames, $selectedNames]); 
                    $athletes_rows = $athletes_stmt->fetchAll(PDO::FETCH_ASSOC);
     
                    foreach ($athletes_rows as $row):
                        $username = htmlspecialchars($row['username']);
                        $realname = htmlspecialchars($row['realname']);
                        $idnumber = htmlspecialchars($row['idnumber']);
                ?>
            <tr>      
                <td style="text-align: left;">
                    <input type="hidden" class="username" value="<?=$username;?>"><?=$realname;?></td>
                <td style="text-align: left;">
                    <input type="hidden" class="idnumber" value="<?=$idnumber;?>"><?=$idnumber;?></td>
                <td style="text-align: left;">
                    <?php
                        $xuhao = 0;
                        foreach ($group_rows as $gv_row):
                            $xuhao++;
                            $group = htmlspecialchars($gv_row['group']);
                            $event = htmlspecialchars($gv_row['event']);
                    ?>
                    (<?=$xuhao;?>)
                    <?php 
                        if($OK_rows){
                            echo "<a style='color:#1ab2ab'>本组项已报名</a>";
                        } else {
                            echo "<input type='checkbox' class='row-checkbox' data-username='$username' data-group='$group' data-event='$event'>";
                        }
                    ?>
                    <input type="hidden" class="xuhao" value="<?=$xuhao;?>">
                    <input type="hidden" class="group<?=$xuhao;?>" value="<?=$group;?>"><?=$group;?>-
                    <input type="hidden" class="event<?=$xuhao;?>" value="<?=$event;?>"><?=$event;?><br>
                    <?php endforeach; ?>
                </td>
            </tr>
                <?php endforeach; ?>
        </table>
        </form>
     
    </body>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     
    <script>
        $(document).ready(function() {
            $('#bm').on('click', function(event) {
                event.preventDefault();
    
                var selectedData = [];
    
                $('input.row-checkbox:checked').each(function() {
                    selectedData.push({
                        username: $(this).data('username'),
                        group: $(this).data('group'),
                        event: $(this).data('event')
                    });
                });
    
                if (selectedData.length === 0) {
                    alert('请至少选择一个条目进行更新!');
                    return;
                }
    
                var game = $('#game-select').val();
                var name = $('#name-select').val();
                var teamname = $('#teamname-select').val();
                var station = $('#station-select').val();
    
                $.ajax({
                    url: 'bmcs_bm_bm.php', 
                    type: 'POST',
                    data: {
                        'selectedData': selectedData,
                        'game': game,
                        'name': name,
                        'teamname': teamname,
                        'station': station
                    },
                    success: function(response) {
                        $('#bmcs-content').html(response);
                    },
                    error: function(xhr, status, error) {
                        console.error("Error submitting form: " + error);
                        alert('批量更新失败:' + error);
                    }
                });
            });
        });
    </script>
     
    </html>
    

    后端 PHP

    bmcs_bm_bm.php 文件中,解析传入的 JSON 数据并进行处理。

    <?php
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $selectedData = $_POST['selectedData'];
        $game = $_POST['game'];
        $name = $_POST['name'];
        $teamname = $_POST['teamname'];
        $station = $_POST['station'];
    
        foreach ($selectedData as $data) {
            $username = $data['username'];
            $group = $data['group'];
            $event = $data['event'];
    
            // 执行插入或更新操作
            $sql = "INSERT INTO your_table (username, game, name, teamname, station, group, event) VALUES (?, ?, ?, ?, ?, ?, ?) 
                    ON DUPLICATE KEY UPDATE group=?, event=?";
            $stmt = $pdo->prepare($sql);
            $stmt->execute([$username, $game, $name, $teamname, $station, $group, $event, $group, $event]);
        }
    
        echo "报名成功";
    } else {
        echo "无效的请求方法";
    }
    ?>
    

    解释

    1. 前端:每个复选框现在包含 data-usernamedata-groupdata-event 属性。这些属性包含提交所需的数据。JavaScript 脚本收集选中的复选框数据并打包为数组,然后通过 AJAX 提交到服务器。
    2. 后端:服务器脚本接收 selectedData 数组并对其进行迭代。每次迭代都会执行 SQL 插入或更新操作,以确保数据库中记录是唯一的或已更新。

    通过这种方式,您可以确保所有选中的条目都能正确传递和处理,避免重复提交相同的数据。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(14条)

报告相同问题?

问题事件

  • 系统已结题 7月16日
  • 已采纳回答 7月8日
  • 创建了问题 7月8日