Save and Display most recent User Input

Question

The Goal: Make a "Golf Scorecard" for a buddies trip Where any golfer (or anyone with website access) can enter a score for a hole. (Aka: Golfer Alex name is already there, as he plays someone in the group enters his score on in the box under "Hole 1". The scores will stay there for when the whole group gets home to the house and can pull up the website and see how each golfer did.

Basics: I'm self taught, basic understanding. I'm building this in a website using Visual Studio Code to write the code. Tried for a while to figure this out as I have the table so it can be edited, but clears on refresh or bringing up the site again. I understand that I need a php page, a javascript, and I'm thinking from what I've read, an AJAX? I don't need "Edit" buttons or anything, just simple as deleting what's there, and stores/displays new data entered. (Bonus: Having the "out" column be a sum of the entered scores)

I have this for the Table (remember this is just super basic for now as i want to understand the bones before making it pretty): jsFiddle of Code Below

  <div class="card">
  <h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>
  <div class="card-body">
    <div id="table" class="table-editable">
      <span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i
            class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
      <table class="table table-bordered table-responsive-md table-striped text-center">
        <thead>
          <tr>
            <th class="text-center">Player 1</th>
            <th class="text-center">Hole 1</th>
            <th class="text-center">Hole 2</th>
            <th class="text-center">Hole 3</th>
            <th class="text-center">Hole 4</th>
            <th class="text-center">Hole 5</th>
            <th class="text-center">Hole 6</th>
            <th class="text-center">Hole 7</th>
            <th class="text-center">Hole 8</th>
            <th class="text-center">Hole 9</th>
            <th class="text-center">Out</th>
            
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="pt-3-half" contenteditable="Flase">John Smith</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
          </tr>

I Found this on here: How to save and retrieve contenteditable data but when copy and pasting it into my code to edit, I get lost.

Answer 1

First, let me say that sometimes programming is tedious - there's a reason they pay us to do it. So, some of the stuff you need to do is a bit of work.

Now that you have your table with editable fields, you now hit the wall of "How do I store the data persistently?" There are a few different options. The most common method is to store the info in a database table (usually MySQL or MariaDB - they are essentially the same, use MariaDB if poss). Second option is to store the info in a file on the server. Finally, you can store it in localStorage, but this only works if everyone uses the same computer (since the data is stored on the local computer not on the webserver).

How do you do this?

When a user has inputted their data, you need a button for them to click to indicate they are finished. Using javascript/jQuery, you trap the click like this (I will use jQuery for examples since it is simpler and less verbose):

$('#myButton').click(function(){
    console.log('Button was clicked');
});

In that function, where the console log is now, you will put all the code that:

1. Reads each field and saves its user-inputted data into a variable

2. Creates an AJAX call out to a backend (PHP language) file that will receive the data

3. In the success function of the ajax call, if any information is received from the server, you can update the page.

Note that you can also use a <form></form> to send the data to the server. Here is the difference

You also need a PHP file - the one your AJAX call sends the data to. In this PHP file, you receive EACH field's data and then you can either save it into a file (which will be on the server, since the PHP file itself is on the server and your data has now been received server-side), or you can create a call to a MariaDB table and save the info in there. Note that most cheapo "shared server" webhosting accounts (the $50/year kind) include PHP and MariaDB as part of the package.

Next, you have the job of loading the stored data from the server. Probably you will have another button that will launch a different bit of code - the event handler might look like this:

$('#myOtherButton').click(function(){
    console.log('Write an AJAX call to the server, get the data, and in the success function, create some HTML and inject it onto the page');
});

The above is a big-picture explanation. There are countless tutorials online that will take you through each step in the process.