I have a form that submits data with the javascript fetch() API to MySQL database with PHP.
In the code below, when the form is submitted a success message is outputted on the page and a hard refresh is prevented thanks to the fetch() API.
The board module itself is initially shown via a click event on an 'Add To Board' element.
Because the boards list is outputted onto the page in a while loop, I'd like it so the new board name is also outputted in the loop without the page refresh. I thought I could do this by adding a simple GET request in a separate fetch() function. This isn't working though (I'm not getting any error messages either).
When a hard refresh of the page happens the new board that is added onto the outputted list and appears on the page as expected, so I know the PHP is working all OK on the backend.
** EDIT **
I've put in the original code I tried, which is basically the same as @willgardner's answer.
Because I'm relatively new to fetch() and AJAX in general - am I meant to construct (with JavaScript) a new button element in the form that will show the updated result from the get request? I've assumed the PHP loop would output this onto the page when the get request happens? Like it does when the page is initially loaded?
I had also missed off the input element in the HTML that is used to post a board name to the database which is then fetched back with the get request. This has now been added and is the create-board-name input element.
JavaScript
// Use fetch() to prevent page doing hard refresh when a new board name is created
let boardModuleForm = document.querySelector('.board-module-form'),
// URL details
myURL = new URL(window.location.href),
pagePath = myURL.pathname
if (boardModuleForm) {
boardModuleForm.addEventListener('submit', function (e) {
if (e.submitter && e.submitter.classList.contains('js-fetch-button')) {
e.preventDefault();
const formData = new FormData(this);
formData.set(e.submitter.name, e.submitter.value);
fetch(pagePath, {
method: 'post',
body: formData
})
.then(function(response) {
if (response.status === 200) {
fetch(pagePath, {
method: 'get',
})
.then(function(response) {
return response.text();
}).catch(function(error) {
console.error(error);
})
}
return response.text();
})
.catch(function(error) {
console.error(error);
})
}
})
}
HTML and some PHP This all works OK because the page returns the correct data when a hard page refresh occurs
<form class="board-module-form" method="post">
<?php
if (isset($_SESSION['logged_in'])) {
$board_stmt = $connection->prepare("SELECT * FROM `boards` WHERE `user_id` = :id ORDER BY id DESC");
$board_stmt -> execute([
':id' => $db_id // variable created when user logs in
]);
while ($board_row = $board_stmt->fetch()) {
$db_board_id = htmlspecialchars($board_row['id']);
$db_board_name = htmlspecialchars($board_row['board_name']);
$db_board_user_id = htmlspecialchars($board_row['user_id']);
?>
<button class="board-list-item" name="board-name" type="submit">
<?php echo $db_board_name; ?>
</button>
<?php
}
}
?>
<div class="submit-wrapper">
<input id="board-name" name="create-board-name" type="text">
<button type="submit" name="submit-board-name" class="js-fetch-button">Submit Board</button>
</div>
</form>