Storing Info In My Guestbook, Can anybody help me take the info I have in my guestbook and save it s |
Storing Info In My Guestbook, Can anybody help me take the info I have in my guestbook and save it s |
S19 |
Sep 5 2024, 08:09 AM
Post
#1
|
Group: Members Posts: 2 Joined: 5-September 24 Member No.: 29,241 |
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 GeeksForGeeks tutorial on making an HTML guestbook 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: CODE <!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: CODE 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(); }); |
Christian J |
Sep 5 2024, 10:57 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,725 Joined: 10-August 06 Member No.: 7 |
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. |
S19 |
Sep 5 2024, 11:58 AM
Post
#3
|
Group: Members Posts: 2 Joined: 5-September 24 Member No.: 29,241 |
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 |
Christian J |
Sep 5 2024, 12:44 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,725 Joined: 10-August 06 Member No.: 7 |
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 |
Lo-Fi Version | Time is now: 12th October 2024 - 08:24 PM |