Setting Dropdown Select Box Values

I am wondering what the trick is get this working correctly. It involves working with Dropdown Select boxes without use of a mouse, and having those changes save to the database.

I have pages with multiple input elements and select elements on them. I am not able to use a mouse and click on a <select> elements since this is being done for WebOS TV (SmartTV’s) that use Arrow keys (up,down,left,right) and an OK (enter) button.

I’m using a <div class="updowncontrol" tab="-1"></div> which when focus() is applied to it functions as proxy to changing the activeSelectBoxElement.selectedIndex and activeSelectBoxElement.value

I am programmatically changing the Dropdown Select box values. However, when I submit the form. These values are not being stored to the data base. However, if I click on the Dropdowns using a mouse cursor and change the values that way… everything get’s properly stored.

In both cases all the values of the Dropdowns are showing as being set to a value. I’m dumping the values out via console.log("Current value:", select.value); using some javascript to doublecheck everything.

It appears that Bubble.io has some kind of Event Listeners for Dropdown Select Boxes which are only activated when the Dropdowns are actually clicked on with a mouse? That this is what is needed to get data to save properly.

Any help, advice or tricks greatly appreciated at this stage of the game.

Here is a snippet of code of how I’m setting selectedIndex and values for Dropdowns.

      if (activeSelectBoxElement){

          var currentIndex = activeSelectBoxElement.selectedIndex;

          if (event.keyCode === 38) {
            console.log("UP");
            // Move to the previous option if not at the first option
            if (currentIndex > 0) {
              activeSelectBoxElement.selectedIndex = currentIndex - 1;
              activeSelectBoxElement.value = activeSelectBoxElement.options[activeSelectBoxElement.selectedIndex].value;
            }
          }  

          if (event.keyCode === 40) {
            console.log("Down");    
            // Move to the next option if not at the last option
            if (currentIndex < activeSelectBoxElement.options.length - 1) {
              activeSelectBoxElement.selectedIndex = currentIndex + 1;
              activeSelectBoxElement.value = activeSelectBoxElement.options[activeSelectBoxElement.selectedIndex].value;
            }
          }  

      }    

I’m posting a follow up, since I figured out how to deal with this issue. I resolved it by dispatching an input and change event to the drop down select boxes. This is what triggered Bubble.io to accept the input value.

This topic was automatically closed after 70 days. New replies are no longer allowed.