Populate multiple form fields from foreach statement

Question

I'm trying to populate multiple form fields from a generated button in a foreach statement. I don't have a vast knowledge of JS so I don't know if I'm just not thinking of a certain function or not.

I have the following code and I'm able to get title to populate in the form but I have no clue where to start for populating content as well based of the same button. ex: one button will load a specific title and content value while another edit button will load another specific title and content value.

                //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> 

The following code works

Edit:

        <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

You could add a second parameter to your onclick handler:

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

EDIT:

$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

I am not sure what your title and content values are, but I suspect they are not valid HTML element IDs. I think it would be better to avoid using the DOM as a data store and instead create a JSON representation of your announcement table in your script. My PHP is a little rusty, but it should be something similar to:

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

Hopefully this will produce something like the following:

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

This way, our changeText function need only accept a row index as parameter:

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

All that is left is to pass the row index where we call changeText:

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