The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Storing Info In My Guestbook, Can anybody help me take the info I have in my guestbook and save it s
S19
post Sep 5 2024, 08:09 AM
Post #1





Group: Members
Posts: 2
Joined: 5-September 24
Member No.: 29,241
Hi everyone biggrin.gif 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! wacko.gif 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 happy.gif

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 smile.gif

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();
});
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
S19
post Sep 5 2024, 11:58 AM
Post #3





Group: Members
Posts: 2
Joined: 5-September 24
Member No.: 29,241
QUOTE(Christian J @ Sep 5 2024, 11: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.

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 smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 5 2024, 12:44 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,725
Joined: 10-August 06
Member No.: 7
QUOTE(S19 @ Sep 5 2024, 06:58 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 smile.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 12th October 2024 - 09:05 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC