So I am currently doing a project for our class, in which I have to display something that I previously stored in a database on a separate page. I chose to display every dataset, as it is the easiest to do. With PHP I implemented a foreach loop which is supposed to show each dataset with a button “EDIT” underneath it. When I don’t use javascript and just have the class of the edit form set to show, it works, and I can edit all my entries but the form is always visible. If I try to hide the form with javascript, all the entries are still shown, but if I press the button “EDIT” which has a seprete function to set the class to “show” it only gives me the option to edit the first entry in the database.
Here is my code for the php/html:
foreach ($resultArray as $row) { echo '<h1 class="title">' . $row['title'] . '</h1>'; echo '<img classe="headerImage" src="images/' . $row['picture'] . '" alt="' . $row['alternativetext'] . '" width="500px">'; echo '<p class="countryDisplay"> We were in ' . $row['countryName'] . '</p>'; echo '<p class="startDateDisplay">Started on: ' . $row['startDate'] . '</p>'; echo '<p class="endDateDisplay">Ended on: ' . $row['endDate'] . '</p>'; echo '<p class="storyContent">' . $row['blogContent'] . '</p>'; echo '<button class="edit-button" onclick="showContent()">EDIT</button>'; echo '<section class="hide" id="edit-form"> <form action="' . $_SERVER['PHP_SELF'] . '" method="POST" accept-charset="utf-8" enctype="multipart/form-data"> <p class="hide"> <input type="hidden" name="id" id="id" value="' . $row['blogID'] . '"> </p> <p class="title-par"> <label for="title" class="title">Title:</label><p class="required">*</p><br> <input type="text" name="title" id="title" value="' . $row['title'] . '"><br> </p> <div class="picture-div"> <label for="picture" class="picture">Upload a picture:</label><br> <input type="file" name="picture" id="picture" value="' . $row['picture'] . '"><br> </div> <p class="alttext-par"> <label for="alttext">Give your Picture a fitting Name:</label><br> <input type="text" name="alternativetext" id="alternativetext" value="' . $row['alternativetext'] . '"><br> </p> <div class="country-div"> <label for="country" class="country" require>Select Country:</label><p class="required">*</p><br> <select name="country" id="country">'; // Connect to Database: // Database Query $queryCountries = 'SELECT countryID, countryName FROM countries ORDER BY countryName ASC'; //Usee $queryCountries $resultArrayCountries = $db->query($queryCountries); // Jede Zeile ist ein eigenes Land foreach ($resultArrayCountries as $rowCountries) { echo "<option value="$rowCountries[countryID]">$rowCountries[countryName]</option>"; } echo '</select><br> </div> <p id="date-par"> <label for="startDate" class="startDate">Start Date:</label><p class="required">*</p> <input type="date" name="startDate" id="startDate" value="' . $row['startDate'] . '"> <label for="endDate" class="endDate">End Date:</label><p class="required">*</p> <input type="date" name="endDate" id="endDate" value="' . $row['endDate'] . '"><br> </p> <p class="story-par"> <label for="story" class="story">Say Something:</label><p class="required">*</p><br> <textarea name="story" id="story" cols="60" rows="30">'.$row['blogContent'].'</textarea><br> </p> <p id="action-buttons"> <input class="save-button" type="submit" name="save" id="save" value="SAVE"> <input class="cancel-button" type="submit" name="cancel" id="cancel" value="CANCEL" onclick="hideContent()"> </p> </form> </section> </section>'; };
and here is the javascript (it is kept very simple, as we haven’t had a javascript instruction yet)
function resetForm(){ document.getElementById("newForm").resetForm(); } function showContent(){ document.getElementById("edit-form").classList.add("show"); document.getElementById("edit-form").classList.remove("hide"); } function hideContent(){ document.getElementById('edit-form').classList.remove("show"); document.getElementById('edit-form').classList.add("hide"); }
(I am sorry for all grammatical mistakes, I am not native)
I found a solution that worked for me… I don’t know why it didn’t work before but I had to work with variables.
function showContent(x){ const editFormElement = document.getElementById('edit-form'+x); const editFormElementClassList = editFormElement.classList; editFormElementClassList.add('show'); editFormElementClassList.remove('hide'); } function hideContent(x){ const editFormElement = document.getElementById('edit-form'+x); const editFormElementClassList = editFormElement.classList; editFormElementClassList.add('hide'); editFormElementClassList.remove('show'); }
Advertisement
Answer
IDs need to be unique on your HTML document. document.getElementById('edit-form')
will return the first element on the page with the id edit-form
. You could for an example append the row number to your id, and then pass it as a parameter to your javascript functions.