Jump to content

Targeted input information in a form message box keeps resetting when anything else in the form is clicked.

Recommended Posts

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>

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

19 hours ago, creedon said:

Please pour through the following to begin to get an understanding of what is going on.

 

Thank you, I looked it over, though some of the information was a bit beyond me. I tried inputting the rough jem of code; however, I noticed no difference: the resetting of the field continues to happen. Is that code supposed to be part of the script section or its own section entirely? I also tried inserting it as code injection as the footer with the same outcome.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.