Form Navigation via Dynamic Colour Changes to Dropdown Text

Can anyone assist ?
I have a multistep form comprising various dynamic DD selects that a user is guided thru using purple buttons that light up to prompt user navigation & selections in the correct order. Step1 snippet of the overall form is shown here:
http://www.jcsweb.biz/mef/client/wd_scen_lev/Step1_01j.php

To optimise the layout, I wish to remove the buttons that light up but maintain the
colour-guided navigation using dropdown text that turns Purple to prompt user selection then turns back to black once selection made. The order of the DD selections is evident form the form layout, namely: Region:, Item:, Size:, Start:, End:

Any smart JS or jquery that I can use to replace my existing buttons in order to guide the user thru the form via dynamic Text colour changes of the DD content text ?

You could get all select elements using .querySelectorAll(), then iterate over them and bind a blur event listener to each, which removes a certain highlight class (if the select actually is currently highlighted), and adds that class to the next select. Then the listener removes itself as it is no longer needed:

var selects = document.querySelectorAll('select')

selects.forEach(function (select, index) {
  var next = selects[index + 1]

  select.addEventListener('blur', function highlightNext () {
    if (!select.classList.contains('highlight')) {
      return
    }

    if (next) {
      next.classList.add('highlight')
    }

    select.classList.remove('highlight')
    select.removeEventListener('blur', highlightNext)
  })
})

selects[0].classList.add('highlight')

BTW, I’d suggest to use labels for the labels – that’s what they are for. :-) It makes your site more semantic and accessible.

$(document).ready(function (){    
     var inputElements=$('select:not([id])');
     var names=['Country','VarTitle','ShockSize','ShockStart','ShockEnd'];    
         
       inputElements.on('change',function (){
       inputElements.css({'border-color':'black'}); 
                
        var a=$(this)[0].name;
        var index=names.indexOf(a);        
        console.log(index);        
        if(index===3){
            index=4;
        }
        inputElements[index+1].style.border='solid 3px';
        inputElements[index+1].style.borderColor='red';  
       
         });
    }); 

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.