dsfhe34889
dsfhe34889
2019-06-09 13:37

如何在单击按钮或链接后在两个页面之间传递元素的属性值?

已采纳

I am reading records from a database and used a card to display them. Each row from the record is used to construct a single card which is independent of the others. Every card has a button to expand view to show more details of that particular user on the next page. I want the 'id' the user whose card has been clicked and transfer it to the next page so that I can use it in another mysql query.

Please answer the question using php and javascript.

<?php
 include_once('connect.php');
 $sql = "SELECT * FROM user";
 $result = $conn->query($sql);

?>

<!DOCTYPE html>

    <header>

        <meta charset="utf-8">

        <!--========Personal style sheet link===========-->
        <link rel="stylesheet" href="css/style.css">

        <!--========Bootstrap cdn link============-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <!--==========Google fonts link==========-->
        <link href="https://fonts.googleapis.com/css?family=Montserrat|Oswald|Poppins|Roboto|Roboto+Condensed|Roboto+Mono&display=swap" rel="stylesheet">
        <!--

            font-family: 'Roboto Condensed', sans-serif;
            font-family: 'Montserrat', sans-serif;
            font-family: 'Roboto', sans-serif;
            font-family: 'Oswald', sans-serif;
            font-family: 'Roboto Mono', monospace;
            font-family: 'Poppins', sans-serif;

        -->

    </header>

    <body id="users-body" onload="createCard();">

            <!--========Navigation bar==========-->
            <div id="navbar" class="container">

                    <ul class="nav nav-pills justify-content-end">
                        <li class="nav-item"><a class="nav-link" href="/index.html">HOME</a></li>
                        <li class="nav-item"><a class="nav-link active" href="/users.php">VIEW ALL USERS</a></li>
                    </ul>

                </div>


<!--===========Function for creating dynamic card element===========-->

                            <script>


                                function createCard(){

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

                                    ?>

                                    var box = document.createElement("div");
                                    box.setAttribute("class", "container");
                                    box.setAttribute("class", "justify-content-center");


                                    var card = document.createElement("div");
                                    card.setAttribute("class","card");

                                    var cardBody = document.createElement("div");
                                    cardBody.setAttribute("class", "card-body");

                                    var cardImage = document.createElement("img");
                                    cardImage.setAttribute("class", "card-img-top");
                                    cardImage.setAttribute("src", "/images/dummy_user_image.png");
                                    cardImage.setAttribute("alt", "user-image");
                                    cardImage.setAttribute("style", "width: 10rem; height: 10rem; border-radius: 50%;");

                                    var cardTitle = document.createElement("h2");
                                    cardTitle.setAttribute("class", "card-title");
                                    cardTitle.innerText = "<?php echo $row['name'] ?>";

                                    var idLabel = document.createElement("h6");
                                    idLabel.setAttribute("id", "<?php echo $row['id'] ?>");
                                    idLabel.innerText = "ID: ";

                                    var idNum = document.createElement("span");
                                    idNum.setAttribute("id", "id-pass");
                                    idNum.innerText = "<?php echo $row['id'] ?>";

                                    var cardSubtext = document.createElement("h6");
                                    cardSubtext.innerText = "Credit: ";

                                    var creditPoint = document.createElement("span");
                                    creditPoint.innerText = "<?php echo $row['credit'] ?>";

                                    var btn = document.createElement("a");
                                    btn.setAttribute("id", "view-btn");
                                    btn.setAttribute("href", "/details.html");
                                    btn.setAttribute("class", "btn btn-success");
                                    btn.setAttribute("role", "BUTTON");
                                    btn.innerText = "VIEW DETAILS";

                                    document.body.appendChild(box);
                                    box.appendChild(card);
                                    card.appendChild(cardBody);
                                    cardBody.appendChild(cardImage);
                                    cardBody.appendChild(cardTitle);
                                    cardBody.appendChild(idLabel);
                                    idLabel.appendChild(idNum);
                                    cardBody.appendChild(cardSubtext);
                                    cardSubtext.appendChild(creditPoint);
                                    cardBody.appendChild(btn);

                                    <?php 

                                    }
                                    ?>


                                }


                            </script>

    </body>

</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • douguai4653 douguai4653 2年前

    You can store the data in different ways while switching between pages.

    1. Local storage Documentation

    2. Session storage Documentation

    3. Keep data in url as params.(Make sure that you encode the data in the URL)

    点赞 评论 复制链接分享

相关推荐