javascript - 从 foreach 语句填充多个表单字段

Question

我正在尝试从 foreach 语句中生成的按钮填充多个表单字段。我对 JS 没有太多了解，所以我不知道我是否只是没有想到某个功能。

我有以下代码，我能够在表单中填充标题，但我不知道从哪里开始填充内容以及基于同一按钮。例如:一个按钮将加载特定的标题和内容值，而另一个编辑按钮将加载另一个特定的标题和内容值。

                //Announcement table select
                $sql = "SELECT * FROM `announcements` ORDER BY `startDate` DESC"; //I want to see all existing announcements from database

                    $announcement = $dbConnect->query($sql);//execute query

$a = 0;
?>
<script type="text/javascript">
function changeText(title, content){
     document.getElementById('title').value = title.id;
     document.getElementById('content').value = document.getElementById(content).getAttribute('data-content');
}
</script>
<?php
foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database 
    $x[$a] = $row["title"];
    $y[$a] = $row["content"];

    echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
    echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
    echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
    echo '<input id="'.$x[$a].'" type=button class=test onclick="changeText(this, '.$y[$a].');" value="Edit">';
    echo '<p id="'.$y[$a].'"  data-content="'.$row["content"].'">test</p>';
    echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}

                ?>

                        </div>
                    </div>
                </div> <!--m4 ends here-->
                <div class="col m8 s8"> <!--m8 starts here-->
                    <div class="titleboxmargin grey" style="width:100%;">
                        <div class="bar yellow"></div>
                        <img class="boxicon" src="../images/announcementsicon.svg">
                        <h3 class="title">Announcements</h3>
                    </div>
                    <div class="col yellow-light"> <!--Announcement Form Starts-->
                        <form action="includes/postAnnouncement.php" method="post">
                            <ul class="yellow-form">
                                <li class="textfield-container">
                                    <label for="text" class="textlabelblack">Title:</label>
                                    <input id="title" name= "title" type="text" placeholder="Title of My Announcement">
                                </li>
                                <li class="textfield-container">
                                    <label for="textarea" class="textlabelblack">Start Date:</label>
                                    <input type="date" id="startDate" name="startDate">
                                </li>
                                <li class="textfield-container">
                                    <label for="textarea" class="textlabelblack">End Date:</label>
                                    <input type="date" id="endDate" name="endDate">
                                </li>
                                <li class="textfield-container">
                                    <label for="textarea" class="textlabelblack">Announcement:</label>
                                    <textarea id="content" name="content" rows="7"></textarea>
                                </li>
                                <li class="textfield-container">
                                    <div class="leftsidebutton">
                                        <input type="submit" class="button" style="width:auto; padding:5px; border:0;" name="register" value="Submit the form"/><!--Action: Attempts to Redirect to postAnnouncement.php-->
                                    </div>
                                </li>       
                            </ul>
                        </form> 

以下代码有效

编辑:

        <script type="text/javascript">
            function changeText(title, content){
               document.getElementById('content').value = document.getElementById(content).getAttribute('data-content');
               document.getElementById('title').value = document.getElementById(title).getAttribute('data-content');
       }
       </script>
       <?php
       foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database 
       $tile = $row["announcementID"] * 2;
       $cont = $row["announcementID"];


       echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
       echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
       echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
       echo '<input id="'.$tile.'" data-content="'.$row["title"].'" type=button class=test onclick="changeText(id, '.$cont.');" value="Edit">';
       echo '<p id="'.$cont.'"  data-content="'.$row["content"].'">test</p>';
       echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
      }

        ?>

Answer 1

您可以向 onclick 处理程序添加第二个参数:

$a = 0;
?>
<script type="text/javascript">
function changeText(elem, content){
     document.getElementById('title').value = elem.id;

     /* 
      * Here we get the value of the hidden content by the passed
      * in id and assign it to the value of the #content form element
      */
     document.getElementById('content').value = document.getElementById(content).value;
}
</script>
<?php
foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database 
    $x[$a] = $row["title"];
    $y[$a] = $row["content"];

    echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
    echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
    echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
    echo '<input id="'.$x[$a].'" type=button class=test onclick="changeText(this, '.$y[$a].'); startDate('.$y[$a].'); " value="Edit">';
    echo '<p style="display:hidden;" id="'.$y[$a].'" ></p>';
    echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}

编辑:

$a = 0;
?>
<script type="text/javascript">
function changeText(elem, contentID){
     var contentElem = document.getElementById(contentID);
     document.getElementById('title').value = elem.getAttribute('data-title');

     /* 
      * Get the value of the hidden content's data attribute by the passed
      * in id and assign it to the value of the #content form element
      */
     document.getElementById('content').value = contentElem.getAttribute('data-content');
}
</script>
<?php
// Let's get $index as well
foreach ($announcement as $index => $row){ //Displays title, startDate, endDate from announcement table from database 
    $x[$a] = $row["title"];
    $y[$a] = $row["content"];

    echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
    echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
    echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";

    // Not sure if I'm escaping quotes correctly on this line:
    echo '<input id="title'.$index.'" data-title="'.$x[$a].'" type=button class=test onclick="changeText(this, \"content'.$index.'\"); startDate('.$y[$a].'); " value="Edit">';

    // Generate a unique id that we can reference
    // and add `data-content` attribute
    echo '<p style="display:hidden;" id="content'.$index.'" data-content="'.$y[$a].'"></p>';
    echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}