Using JS to save to a variable from a datalist

[lew_ashby]

My HTML datalist (Phalcon is being used)

<input id="icon-{{ item['id'] }}" list="icon-{{ item['id'] }}-dl" name=icon-{{ item['id'] }}" {% if item['icon'] is defined and item['icon'] is not empty %} placeholder="{{ item['icon'] }}" {% endif %}>
<datalist id="icon-{{ item['id'] }}-dl"
    {% for icon in iconList %}
         {% if icon['icon'] != item['icon'] %}
             <option value={{ icon['icon'] }}>
         {% endif %}
     {% endfor %}
 </datalist>

JS Function (function is called via an onclick in a button tag)

 function saveStageFlag(name)
 {
     ...
     ...
     // previous line before datalist
     //let icon = $('#icon-'+name).val();
 
    debugger;
    let flagRow = document.getElementById('icon-'+name);
 
    if(flagRow.value == ''){
        let icon = flagRow.placeholder;
    }
    else{
        let icon = $('#icon-'+name).val();
        //let icon = flagRow.value;
   }
 
   $.ajax({...
    ....

What I want is to set the icon variable to the value of placeholder when no text is entered in the input and no dropdown option is selected in the datalist. I would be able to just use selected=“selected” and that value would already be present but thanks to oversight from the W3 Consortium selected=“selected” doesn’t work with a datalist. If data list entered or selected then I want to set the icon variable to the value of the field. Currently the icon variable is not getting set at all in my if/else even the the debugger does get to the line and steps through/over it without complaint in my Chrome debugger, the values never actually get assigned to icon variable. If my manually type this same think out in the console tab of the chrome debugger it works.

I have considered that maybe each element needs to have it’s own ID (the input and the it’s connected datalist) I did that too and processed it with little more logic in the JS function but it still didn’t assign the value to icon. Any ideas on what I’m doing wrong? Thanks.