Question

有3个问题文件。
一个是dashboard.php文件，其中包含指向Course_mg.js文件的脚本标记。
course_mg.js文件使用Ajax来获取course_mg.php文件以显示学生列表。

因此，这是上面提到的两个文件（不包括dashboard.php，因为它只有脚本标签，但请记住，这是正在使用ajax的主页）。

course_mg.php

<?php

    require('../../inc/connect.php');
    if(isset($_POST['delete_course'])){
        $id = $_POST['delete_course'];
        $sql_del = "DELETE FROM courses WHERE courses.id = $id";
        $result = $mysqli->query($sql_del) or die($mysqli->error);
    if($result){
        header('location: ../dashboard.php');
    } else{
        echo "Error in deleting user";
    }
}

?>

<div class="dash_head">Manage Course</div>
<div class="card mx-5 my-5 px-5">

    <h3 class="h3">View Courses Info</h3>
    <table class="table table-bordered table-sm table-hover text-center">
        <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Created_At</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>

        <?php
        $offset = (1 - 1) * 3;
        $row_count = 3;
        $sql = "SELECT * FROM courses"; // order by id limit $row_count offset $offset"    
        $result = $mysqli->query($sql) or die($mysqli->error);  
        while($row = $result->fetch_assoc()){
            $_SESSION['id'] = $row['ID'];
            ?>
                <tr>
                    <th scope="col">
                        <?php echo $row['ID']; ?>
                    </th>
                    <td>
                        <?php echo $row['Name']; ?>
                    </td>
                    <td>
                        <?php echo $row['Created_At']; ?>
                    </td>
                    <td>
                        <form method="POST" action="php/course_mg.php">
                            <button class="btn btn-sm bg-danger text-white" type="submit" name="delete_course" value="<?php echo $_SESSION['id'];?>">Delete</button>
                        </form>  
                    </td>
                </tr>
                <?php
        }
    ?>
        </tbody>
    </table>
    <div>
        <h6><em>List of Available Courses</em></h6>
    </div>
    <div>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link disabled" href="#">Previous</a></li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link disabled" href="#">Next</a></li>
            </ul>
        </nav>
    </div>
</div>

course_mg.js

document.getElementById('course_mg').addEventListener('click', load_managecourse);

    function load_managecourse(e) {

        e.preventDefault();

        var xhr = new XMLHttpRequest();

        xhr.open('GET', 'php/course_mg.php', true);

        xhr.onload = function () {

            if(this.status == 200) {
                document.getElementById('showresults').innerHTML = this.responseText;
                document.getElementById('ID').addEventListener('submit', deleteCourse(this.value));

                function deleteCourse($id) {

                    e.preventDefault();
                    console.log($id);
                    var name = document.getElementById(ID).value;

                    console.log(name);

                    var params = "delete_course=" + name;

                    var xhr = new XMLHttpRequest();

                    xhr.open('POST', 'php/course_mg.php', true);

                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

                    xhr.onload = function() {
                        if(this.status == 200){
                            document.getElementById('userAdded').style.padding = "15px 0px";
                            document.getElementById('userAdded').style.borderRadius = "200px";
                            document.getElementById('userAdded').innerHTML = `
                                Course Deleted
                            `;
                        }
                    }

                    xhr.send(params);
                }
            }
        }
        xhr.send();
    }

现在，这在PHP中可以正常工作，但在AJAX中却失败了，正是因为我无法弄清楚如何在javascript中获取动态php表单ID。

例如，这就是我想要做的：

<form id="dynamic_id_based_on_user_id_extracted_from_database">
 <button type="submit" name="delete_course" value="<?php echo $_SESSION['id'];?>">Delete</button>
</form>

我想要一个表单ID的值，另一个是 course_mg.js 中button值中提到的值用于此目的的代码从下面提到的行开始：在此之前，它加载相同的 course_mg.php 页面以获取该页面，然后单击“删除”以尝试删除用户。

document.getElementById('ID').addEventListener('submit', deleteCourse(this.value));

我想知道如何从上述表格中动态获取“ ID”占位符？

在另一个文件中使用Ajax获取动态PHP表单ID

0 个答案: