从具有ID的“下一步”按钮更改页面

时间：2018-08-13 13:05:35

标签： javascript php html

我正在做一个程序，其中有多个带有ID的练习（例如，Id = 1、2、3 ...）。我想做的是，一旦用户进行了练习，他可以按单击下一步，然后带他进行下一个练习，例如id +1。

下面，我展示我的工作。你能帮我吗？

这是我修改过的问题，现在可以了：

<?php
include_once("functions.php");

// Start the session
session_start();
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "project";

$conn = new mysqli($servername, $username, $password, $dbname);
/*echo*/ $id=$_GET['id']; // Current question
$sql = "SELECT * FROM exercises where exercise_id='$id'";
$result = $conn->query($sql); /*Check connection*/


$question_ids = [];
$result2 = doSearch($conn, 'exercise_id');
while($row = $result2->fetch_assoc()) {
    array_push($question_ids,  $row["exercise_id"]);
}
$order = $_GET['order'];
$next_question_id = -1;
$next_question_order = $order + 1;
if (count($question_ids) >= $next_question_order) {
    $next_question_id = $question_ids[$order];
}

?>

<div id="centered_B" class="header">

    <?php
    $row = $result->fetch_assoc();

    ?>

    <p><?php echo $row["exercise_id"] . ". " . $row["text"]?></p>
    <img width="603" height="auto" src="<?php echo $row["image_path"]?>"><br/><br/>

    <form action='' method='post'>
        <input type="radio" name="choice" value= "1" /><img src="<?php echo $row["image_path_A"] ?>"/><br>
        <input type="radio" name="choice" value= "2" /><img src="<?php echo $row["image_path_B"] ?>"><br>
        <input type="radio" name="choice" value= "3" /><img src="<?php echo $row["image_path_C"] ?>"><br>

    <br><br><br><!--- Select difficulty --->

    <p2>Select difficulty level:</p2>

    <form action='' method='post'>
        <select name="choose" id="choose">>
        <option value="1" <?php if($row["difficulty"]=="1") { echo "selected"; } ?> >1</option>
        <option value="2" <?php if($row["difficulty"]=="2") { echo "selected"; } ?> >2</option>
        <option value="3" <?php if($row["difficulty"]=="3") { echo "selected"; } ?> >3</option>
        <option value="4" <?php if($row["difficulty"]=="4") { echo "selected"; } ?> >4</option>
        <option value="5" <?php if($row["difficulty"]=="5") { echo "selected"; } ?> >5</option>
    </select>

    <br><br><br>


        <input class="buttonSubmit" type="submit" name="submit" value="Submit">
        <?php
        if ($next_question_id >= 0) {
        ?>
            <a href="?id=<?php echo $next_question_id; ?>&order=<?php echo $next_question_order; ?>" class="buttonNext" >Next Question</a>
        <?php
        }
        ?>

    </form>

</div><!--- end of centered_B div --->


<?php

if (isset($_POST['submit'])) {
    $user_id = $_SESSION['user_id'];
    $user_check_query = "SELECT * FROM users WHERE id='$user_id'";
    if(isset($_POST['choice'], $_POST['choose'])){
            $choice_answer=$_POST['choice'];
            $difficulty=$_POST['choose'];
//      */$user_id = $_SESSION['user_id'];*/
            $query = "INSERT INTO answers (exercise_id_fk, student_id, difficulty_student, choice_answer) VALUES ('$id','$user_id', '$difficulty', '$choice_answer')";
            $sql=mysqli_query($conn,$query);

    }
}
?>

3 个答案:

答案 0 :(得分：1)

也许这可以帮助您：

var i=$_GET['id']){;

function getNext()
{
    var = var + 1; //increase var by one
return var;
}</script>

<button class="buttonNext" onclick="getNext" >Next Question</button>

答案 1 :(得分：1)

不确定您的JS或PHP级别是什么，但这是一个纯PHP解决方案-不使用JS。

注意事项：

  • 使用PDO参数化查询来防止SQL注入
  • 使用隐藏的表单字段来传递当前的问题ID。用户提交后，我们将其回复插入数据库中，然后通过增加$id++
    • 重定向到下一个问题
  • 您有2个<form>标签。我删除了一个。

请注意，此代码未经测试。如果您有任何疑问，请告诉我。祝你好运！

<?php
session_start();

// Using PDO instead of mysqli. Nothing wrong with mysqli but I'm more comfortable with PDO.
$host = '127.0.0.1';
$db = 'test';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$opt = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES => false,
];
// This is your connection to the DB.
$pdo = new PDO($dsn, $user, $pass, $opt);

// This is the current question being displayed to the user.
$id = $_GET['id'];

// You should probably do some validation on $id here. Should it be numeric, not null etc.

// Notice that we're using ? instead of passing the value directly to the DB. This is called prepared statements.
// https://phpdelusions.net/pdo#prepared
$stmt = $pdo->query('SELECT * FROM exercises where exercise_id = ?');
$stmt->execute([$id]);
$row = $stmt->fetch(PDO::FETCH_ASSOC);


// You should also validate the $row here. Did you actually find a question from the DB?
?>

    <div id="centered_B" class="header">

        <p><?php echo $row["exercise_id"] . ". " . $row["text"] ?></p>
        <img width="603" height="auto" src="<?php echo $row["image_path"] ?>"><br/><br/>

        <!--        Changed the method to GET -->
        <form action="" method="GET">

            <!-- Notice that we're passing the question ID to server when the form submits. -->
            <input type="hidden" name="id" value="<?php echo $id; ?>">

            <label>
                <input type="radio" name="choice" value="1"/>
            </label><img src="<?php echo $row["image_path_A"] ?>"/><br>

            <label>
                <input type="radio" name="choice" value="2"/>
            </label><img src="<?php echo $row["image_path_B"] ?>"><br>

            <label>
                <input type="radio" name="choice" value="3"/>
            </label><img src="<?php echo $row["image_path_C"] ?>"><br>

            <br><br><br><!--- Select difficulty --->

            <p>Select difficulty level:</p>

            <label for="choose"> Difficulty
                <select name="choose" id="choose">>
                    <option value="1" <?php if ($row["difficulty"] == "1") {
                        echo "selected";
                    } ?> >1
                    </option>
                    <option value="2" <?php if ($row["difficulty"] == "2") {
                        echo "selected";
                    } ?> >2
                    </option>
                    <option value="3" <?php if ($row["difficulty"] == "3") {
                        echo "selected";
                    } ?> >3
                    </option>
                    <option value="4" <?php if ($row["difficulty"] == "4") {
                        echo "selected";
                    } ?> >4
                    </option>
                    <option value="5" <?php if ($row["difficulty"] == "5") {
                        echo "selected";
                    } ?> >5
                    </option>
                </select>
            </label>

            <br><br><br><!--- Button --->

            <!--        <button class="buttonSubmit" >Submit</button>-->
            <input type="submit" name="submit" value="Submit">
            <button class="buttonNext">Next Question</button>
        </form>

    </div><!--- end of centered_B div --->

<?php

if (isset($_POST['submit'])) {

    // Changed to a single if-statement
    if (isset($_POST['choice'], $_POST['choose'])) {

        $user_id = $_SESSION['user_id'];
        $choice_answer = $_POST['choice'];
        $difficulty = $_POST['choose'];

        // Again, using prepared statements.
        $query = "INSERT INTO answers (exercise_id_fk, student_id, difficulty_student, choice_answer) VALUES (?, ?, ?, ?)";
        $pdo
            ->prepare($query)
            ->execute([$id, $user_id, $difficulty, $choice_answer]);

        // Redirect to self with incremented question ID.
        // https://stackoverflow.com/a/8131377/296555
        header('Location: ' . $_SERVER['PHP_SELF'] . '?id=' . $id++);
        die;
    }
}

答案 2 :(得分：1)

嗯，我不知道从哪里开始... 好的，首先，您的代码太糟糕了-涉及样式，安全性和所有方面-抱歉;）

但是为了帮助您解决问题： 不要直接访问下一个ID，而是按

SELECT * FROM exercises  WHERE exercise_id > $currentId ORDER BY exercise_id ASC LIMIT 0,2

如果您想在某个时候删除某项练习，这将有所帮助，因此，请留出1,2,4之类的空白（删除了3条）。您还可以创建一个position字段来手动对问题的顺序进行排序，但我想这太先进了。

但是： 在开始时，您检查是否存在$_GET['id']参数并将其设置为$ currentId。最好$currentId = (int)$_GET['id']，以防止严重注射。如果没有GET参数，则设置$currentId = 0（然后第一个调用）。 然后，您运行查询以开始锻炼-它会在结果的第一行。

在HTML方面，您只需将数据库结果中的exercise_id分配给下一个练习的链接（因此不需要JavaScript）。

要测试，是否还有一个下一个问题，请检查结果中是否存在第二行（这就是为什么LIMIT 0,2而不是0,1）以确定是否显示“下一个练习按钮”。

相关问题
最新问题