Collecting multiple items and saving to one list item, for eventual storage as a record.

[JazzKeyboardist]

I'm using the following idea to gather song information from the user (song title, song key, etc.) for the purpose of storing it in a file full of songs. As part of the adding of songs and creating a record to save to a file or database, I am displaying the information in a UL. However, I am trying to figure out how to assemble each record (title, key, keyboard1info, keyboard2info, <etc.> into something I can display on screen as I am entering the songs, to verify the information is correct and provide feedback to the user. HTML and JS files attached.

 

[thatstooeasyman]

Thank you for providing your HTML and JS files.

To display the song information as you are entering it, you can create a new function that will be called every time the user updates any of the song information. This function will take the information from the form fields and use it to create a string that will be displayed on the screen.

Here is an example function that takes the information from the form fields and creates a string:

function displaySongInfo() {
  const title = document.getElementById('title').value;
  const key = document.getElementById('key').value;
  const keyboard1Info = document.getElementById('keyboard1Info').value;
  const keyboard2Info = document.getElementById('keyboard2Info').value;

  const songInfo = `<li>${title} - ${key} (${keyboard1Info}, ${keyboard2Info})</li>`;

  const songList = document.getElementById('songList');
  songList.innerHTML += songInfo;
}

In this function, we are first getting the values of each form field using document.getElementById() and .value. Then, we are using template literals to create a string that includes the title, key, and keyboard information. Finally, we are getting the <ul> element with document.getElementById('songList') and adding the new song information as an <li> element using innerHTML +=.

You can call this function every time the user updates any of the form fields by adding an onchange event listener to each form field:

<input type="text" id="title" onchange="displaySongInfo()">
<input type="text" id="key" onchange="displaySongInfo()">
<input type="text" id="keyboard1Info" onchange="displaySongInfo()">
<input type="text" id="keyboard2Info" onchange="displaySongInfo()">

This will ensure that the song information is displayed on the screen as the user enters it. Note that you may need to adjust the code to fit your specific needs, but this should give you a starting point.

 

[JazzKeyboardist]

Thank you for that wonderful code! One question I have is this. Is this intended to be used after I run the existing code and collect the information? Or is this a replacement for that code? With the getElementById requests, it seems like it should be a replacement for my code. Right now, I can't get any of it to work, unless I go back to the original code from the book I am working out of. zipped below.

But what I am trying to do is use this code as the basis for collecting all of the information in my add-del-song page, which is part of a bigger system of creating a setlist manager for working musicians. When I use the code below and add to it, it doesn't do anything. I can get it to work, but I can't get it to append the other fields to the record, and display the whole thing (title, key, kbd1, kbd2, notes) as one <li>.

I don't care if its an <li> or not. I would actually prefer it to be displayed like this:

Set 1
Title Key Keyboard1 Keyboard2
============ ==== ========= ========
Song1 E 036 6-334
Song2 Am 021 4-039
etc........... for each of 4 sets

I assumed that this would involve the use of a database. This would be possible because this app will be server bound anyway. The admin has to create the master songlist, and create the sets first, then the users connect to the website at the gig, and pull up each set as it occurs.

My basic problem here is that I don't know enough about js to do this yet.

Dave

 

[JazzKeyboardist]

The following is all I can get to actually work.

 

[thatstooeasyman]

Thank you for that wonderful code! One question I have is this. Is this intended to be used after I run the existing code and collect the information? Or is this a replacement for that code? With the getElementById requests, it seems like it should be a replacement for my code. Right now, I can't get any of it to work, unless I go back to the original code from the book I am working out of. zipped below.

But what I am trying to do is use this code as the basis for collecting all of the information in my add-del-song page, which is part of a bigger system of creating a setlist manager for working musicians. When I use the code below and add to it, it doesn't do anything. I can get it to work, but I can't get it to append the other fields to the record, and display the whole thing (title, key, kbd1, kbd2, notes) as one <li>.

I don't care if its an <li> or not. I would actually prefer it to be displayed like this:

Set 1
Title Key Keyboard1 Keyboard2
============ ==== ========= ========
Song1 E 036 6-334
Song2 Am 021 4-039
etc........... for each of 4 sets

I assumed that this would involve the use of a database. This would be possible because this app will be server bound anyway. The admin has to create the master songlist, and create the sets first, then the users connect to the website at the gig, and pull up each set as it occurs.

My basic problem here is that I don't know enough about js to do this yet.

Dave

Thank you for providing more context about your project. It sounds like you're working on a more complex system than just collecting song information from users and displaying it on screen. It's definitely possible to use a database to store and manage the song information, and to display it in the format you described.

To get started, you'll need to set up a database and a server-side script to handle the data. There are many different ways to do this, depending on your experience and preferences. Here's a general outline of the steps involved:

1. Choose a database system: There are many different database systems to choose from, such as MySQL, PostgreSQL, MongoDB, and more. Choose one that you are familiar with, or that fits your needs.
2. Design your database schema: Decide what tables and fields you will need to store the song information. For example, you might have a "songs" table with fields for title, key, keyboard1, keyboard2, and notes, and a "sets" table with fields for set name, set order, and song IDs.
3. Set up your server-side script: You'll need to write a server-side script that can handle requests from the client-side code (the HTML and JavaScript running in the user's browser) and interact with the database. You can use a variety of server-side scripting languages, such as PHP, Node.js, Ruby, Python, and more.
4. Write your client-side code: Once you have your server-side script set up, you can write the client-side code that will interact with it. This code will run in the user's browser and send requests to the server-side script to add or retrieve data from the database.

Here's an example of how you might modify the code I provided earlier to work with a database:

function addSong() {
const title = document.getElementById('title').value;
const key = document.getElementById('key').value;
const keyboard1Info = document.getElementById('keyboard1Info').value;
const keyboard2Info = document.getElementById('keyboard2Info').value;
const notes = document.getElementById('notes').value;

// Send data to server-side script using AJAX
const xhr = new XMLHttpRequest();
xhr.open('POST', '/addSong');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
// Handle response from server-side script
const response = JSON.parse(xhr.responseText);
if (response.success) {
displaySong(response.song);
} else {
alert('Error adding song: ' + response.error);
}
};
xhr.send(JSON.stringify({
title: title,
key: key,
keyboard1Info: keyboard1Info,
keyboard2Info: keyboard2Info,
notes: notes
}));
}

function displaySong(song) {
// Add song to HTML table or list
const table = document.getElementById('songList');
const tr = document.createElement('tr');
tr.innerHTML = <td>${song.title}</td><td>${song.key}</td><td>${song.keyboard1Info}</td><td>${song.keyboard2Info}</td><td>${song.notes}</td>;
table.appendChild(tr);
}

In this modified code, we're sending the song information to the server-side script using an XMLHttpRequest with a JSON payload. The server-side script can then insert the data into the database and return a response indicating success or failure. If the song was successfully added, we call the displaySong() function to add it to the HTML table or list.

Again, this is just a rough outline of how you might approach building a more complex song management system. There are many details to consider, such as authentication, data validation, error handling, and more.

Let me know if you have any further questions

 

[thatstooeasyman]

The following is all I can get to actually work.

here is an example of a complete HTML file that includes the JavaScript code I provided earlier. This code should display the song information as it is entered into the form fields and update the display each time a new song is added:

<html>
<head>
  <meta charset="UTF-8">
  <title>Song List</title>
</head>
<body>
  <h1>Song List</h1>

  <form id="songForm">
    <label for="title">Title:</label>
    <input type="text" id="title">

    <label for="key">Key:</label>
    <input type="text" id="key">

    <label for="keyboard1Info">Keyboard 1 Info:</label>
    <input type="text" id="keyboard1Info">

    <label for="keyboard2Info">Keyboard 2 Info:</label>
    <input type="text" id="keyboard2Info">

    <button type="button" id="addButton">Add Song</button>
  </form>

  <h2>Song List Display:</h2>
  <table id="songList">
    <tr>
      <th>Title</th>
      <th>Key</th>
      <th>Keyboard 1 Info</th>
      <th>Keyboard 2 Info</th>
    </tr>
  </table>

  <script>
    function displaySongInfo() {
      const title = document.getElementById('title').value;
      const key = document.getElementById('key').value;
      const keyboard1Info = document.getElementById('keyboard1Info').value;
      const keyboard2Info = document.getElementById('keyboard2Info').value;

      const songInfo = `<tr><td>${title}</td><td>${key}</td><td>${keyboard1Info}</td><td>${keyboard2Info}</td></tr>`;

      const songList = document.getElementById('songList');
      songList.innerHTML += songInfo;
    }

    const button = document.getElementById('addButton');
    button.addEventListener('click', displaySongInfo);
  </script>
</body>
</html>

In this code, the HTML form includes fields for title, key, and keyboard information, as well as a button to add the song to the list. The table below the form is where the song information will be displayed, with columns for title, key, keyboard 1 info, and keyboard 2 info.

The JavaScript code defines the displaySongInfo() function, which is called every time a new song is added to the list. The function gets the values of the form fields and uses them to create a table row (<tr>) with table data (<td>) for each column. The new row is then appended to the song list table using innerHTML +=.

The code also adds an event listener to the add song button, so that the displaySongInfo() function is called when the button is clicked.

 

[JazzKeyboardist]

Great stuff! Thank you so much. Yes, there are lots of considerations. Integrating this into the overall design idea, but this is a great start. The system is no small endeavor for someone like myself who is a beginner in many ways. I do have coding and logic background however, and I understand the concepts at least, of the things I am trying to accomplish. I have a degree in programming but it is from the 80s and was centered around languages like COBOL, RPG, Assembler, Pascal and BASIC, none of which are particularly relevant languages anymore. So I have a long way to go in implementation of this idea.

I can follow what you gave me and I will have questions about, but I will take one step at a time. Some of the difficulties I am facing seem to be related to the Android environment I am using to do this work. I don't have a computer of my own yet, but that's in the long term plan. I can use the computers at the library if necessary to try this code out in a proper coding environment. They limit you to 2 hours/day though and that's just not long enough.

That said, I will do as much as I can on my phone and ask questions as I go. I appreciate your help with this. Good to have resources such as yourself that can code on the fly like that. I'll get there. LOL.

Dave

 

[JazzKeyboardist]

I've been working with various different ways of using localStorage to store the records containing the values of each of the 5 basic items I need to store: songTitle, songKey, kdb1info, kbd2info, and notes.

I went over the code you sent me and I have a few questions.
1. What does the curly braces represent in;

const tr = document.createElement('tr');
tr.innerHTML = <td>${song.title}</td><td>${song.key}</td><td>${song.keyboard1Info}</td><td>${song.keyboard2Info}</td><td>${song.notes}</td>;
table.appendChild(tr);

?
I like the idea of using the table instead of the <ul> and <li>. They don't work very well in this scenario. It's ok for a single value like songTitle, but not for more info. Are the curly braces unique to using XML or the innerHTML value or something else entirely? I'm familiar with using parens () in javascript and using {} for the code to execute in a function. But I've never seen this in defining a value.

2. I love the simplicity of your code. It gets the job done without using a whole bunch of variables.

3. The reason for using localStorage is that I don't want to get into using MySQL right now. My reasons are personal, but I just want to use a local method if possible. The browser seems to be able to store the data indefinitely, and if not, I can write the values out to an XML or JSON file to store them permanently. Eventually I will move this system to an online database. This will be the most practical because the administration of the system will be remote to the users of the system. Having a central location to manage all of this will require using a dbms.

I have a Pro account with Codepen and I can send you a link that allows you to interact and assist with modifying code in real time without you being a Codepen member. Would you be able to participate in that?

Dave

 

[Padonak]

What does the curly braces represent in

Template literals (Template strings) and do not forget backticks instead of double or single quotes to make them work.