jQuery bring value from Mysql table

Question

I’m setting up a music list register for a karaoke site. It works like this:

Search for pre-registered music Take this song from input and insert it into a li list

I have the following:

<input id="musica" type="text">
<button type="button" id="add">Adicionar</button>
<ul id="listademusicas">
</ul>

<script>
jQuery('#add').click(function() {
jQuery('#listademusicas').append('<li id="">'+jQuery('#musica').val()+'</li>');
});
</script>

Then I wanted to insert the li, it brings the id of the song, the table is like this:

tabela_musicas
id|nome
1 |nome da musica1
2 |nome da musica2

In the input that takes the name of the song I’m using a query that brings the exact name of the song, so I thought I’d do something like

SELECT id FROM tabela_musicas WHERE nome = "nome da musica".

But I don’t know how to do this query dynamically. I wanted the song id to be inserted in the name or id of each line.

Answer 1

To do this dynamically you will need to use Ajax.

Create a file/route to insert and return what was inserted.

jQuery.post('linkparacadastrarMusica', {nome: nomedaNovaMusica}).done(function(data){
   console.log(data)
})

With this, you take the return of the new and manipulate on your page as you want.

Read more about it here.

Answer 2

For Mysql, you can make a select like this:

SELECT LAST_INSERT_ID();

It will return the last inserted ID. This works for applications with low insertion input. If the application is widely used, two Inserts performed at the same time will have the same ID returned.

Searching by name is not a good one, because it would require all songs to have different names.