Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Web Site Functionality _ Storing Info In My Guestbook
Posted by: S19 Sep 5 2024, 08:09 AM
Hi everyone 
I'm a bit new to HTML and was wondering if someone could help me figure out how to do something I can't figure out!
I followed the https://www.geeksforgeeks.org/create-a-guestbook-using-html-css-and-javascript/ and it works very well, with a tiny exception; when I refresh my page, all of the comments get cleared! 
I'm not sure how to store the info that goes into the guestbook and save it somewhere so it stays. I was wondering if anybody might be able to help me figure that out! Thank you so much 
My code is largely the same as the linked tutorial, but I'll put a snippet of my index.html and script.js for posterity's sake 
index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Guestbook</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>GuestBook</h1>
<form id="guestForm">
<div class="form-input">
<label for="name">Name:</label>
<input type="text"
id="name" name="name"
required>
</div>
<div class="form-input">
<label for="email">Email:</label>
<input type="tel"
id="email" name="email"
required>
</div>
<div class="form-input">
<label for="comment">
Comment
</label>
<input type="text"
id="comment" name="comment"
required>
</div>
<div class="btn"><button type="submit">
Add Guest
</button></div>
</form>
<div id="guestList"></div>
</div>
<script src="script.js"></script>
</body>
</html>
script:
const guestForm = document.getElementById('guestForm');
const guestList = document.getElementById('guestList');
guestForm.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const comment = document.getElementById('comment').value;
const guestCard = document.createElement('div');
guestCard.classList.add('guest-card');
guestCard.innerHTML = `
<h2>${name}</h2>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Comment:</strong> ${comment}</p>`;
guestList.appendChild(guestCard);
guestForm.reset();
});
Posted by: Christian J Sep 5 2024, 10:57 AM
You need to store the guestbook entries on your server, either in a text file or database. That in turn requires a server-side script (like PHP), Javascript alone can't write to files like that.
Strange tutorial that doesn't even mention that.
Posted by: S19 Sep 5 2024, 11:58 AM
You need to store the guestbook entries on your server, either in a text file or database. That in turn requires a server-side script (like PHP), Javascript alone can't write to files like that.
Strange tutorial that doesn't even mention that.
Ooooh yeah I've heard of that! I'll try learning PHP. It is strange the tutorial wouldn't mention anything about that, pretty sure thats a significant part of a guestbook lol. Any idea how I should go about doing this? I'm hosting the guestbook on Netlify so I wanted a way to keep the data on there somehow, if that's not possible though I can definitely try a different service
Posted by: Christian J Sep 5 2024, 12:44 PM
Any idea how I should go about doing this? I'm hosting the guestbook on Netlify so I wanted a way to keep the data on there somehow, if that's not possible though I can definitely try a different service
No idea how Netlify works, sorry.
With PHP I'd probably start from scratch instead trying to incorporate this javascript. Here's a basic PHP tutorial: https://www.php.net/manual/en/tutorial.php once you've learned a bit, you can proceed to make PHP read or write to files with this: https://www.php.net/manual/en/function.file-put-contents.php
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)