Question

我尝试从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>  <div class="col m8 s8">  <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">  <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"/> </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>";
      }

        ?>

以下代码可以使用

修改

it

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>"; }

Answer 2

我不确定您的标题和内容值是什么，但我怀疑它们不是有效的HTML元素ID。我认为最好避免将DOM用作数据存储，而是在脚本中创建公告表的JSON表示。我的PHP有点生疏，但它应该类似于：

<script>
    var rows = <?php echo json_encode($announcement); ?>;
</script>

希望这会产生如下内容：

var rows = [
    {
        "title": "Title One",
        "content": "Content One"
    },
    {
        "title": "Title Two",
        "content": "Content Two"
    }
];

这样，我们的changeText函数只需要接受一个行索引作为参数：

function changeText (index) {
    document.getElementById('title').value = rows[index].title;
    document.getElementById('content').value = rows[index].content;
}

剩下的就是传递我们称之为changeText的行索引：

<?php foreach ($announcement as $index => $row) { ?>
    <!-- echo your HTML markup here. -->
    <button onclick="changeText(<?php echo $index; ?>);">Edit</button>
<?php } ?>

从foreach语句填充多个表单域

2 个答案: