I have been able to get everything to work in terms of getting the desired information to appear in one particular field within a form; however, once any selected information appears, it disappears as soon as any other part of the form is clicked. Any ideas how to prevent this from happening?
Any insight and help is greatly appreciated!
Below is the current code:
<style>
.list-down-btn
{
margin-top: 2px;
border: 1px solid #000;
padding: 2px 15px;
text-decoration: none !important;
color: #000;
box-sizing: border-box;
position:relative;
}
a.list-down-btn:after {
content: "+";
display: block;
position: absolute;
right: 5px;
top: 0px;
}
.close:after{
content: "-" !important;
}
.list-group-collapse
{
overflow: hidden;
list-style-type: none;
padding: 5px 10px
}
.list-group-item{
padding: 5px;
}
.list-group-collapse li ul {
/* margin-left: -15px;
margin-right: -15px;
margin-bottom: -11px; */
border-radius: 0px;
list-style-type: none;
}
.list-group-collapse li ul
{
border-radius: 0px !important;
margin-top: 8px;
}
.list-group-collapse li ul li {
border-radius: 0px !important;
border-left: none;
border-right: none;
/* padding-left: 32px; */
}
#musictype,
#era,
#artist,
#song
{
display: none;
}
li.list-group-item.selected {
background: #000;
display: table;
color: #fff;
margin-top: 5px;
}
#textarea-yui_3_17_2_1_1673995852814_19510-field{
/*pointer-events:none;*/
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#textarea-yui_3_17_2_1_1673995852814_19510-field").attr("readonly",true);
$(document).on('click', '.list-down-btn', function(event) {
event.preventDefault();
var target = $(this).attr('data-toggle');
//$(target).slideToggle();
$(this).parentsUntil("ul").find(target).slideToggle();
var clicked = event.target;
$(clicked).toggleClass("close");
});
//when a song clicked
$("#artist li").click(function(){
$(this).toggleClass("selected");
var selected_songs = $("#artist li.selected");
//console.log(selected_songs);
var songs = "";
for(var i=0; i<selected_songs.length; i++){
var artist = $(selected_songs[i]).closest("ul#artist").siblings("a[data-toggle='#artist']").text();
//console.log(artist);
var song = $(selected_songs[i]).text();
//console.log(song);
songs += artist+" - "+song+"\n";
}
console.log(songs);
$("#textarea-yui_3_17_2_1_1673995852814_19510-field").val(songs);
console.log("selected: "+selected_songs);
var song = $(this).text();
//console.log(song);
});
});
</script>
