onSubmit relocation only works once Options

[Jimbus]

I'm using the following code to relocate the page from the Main Category page to the Sub-Category page:

CODE

    
    <select name="category"  class="text-left form-control"  onchange="location = this.value;">
    <option value="" selected>--- Select Category Item ---</option>

And is works well... until the back button is pushed and the same category is chosen, again. It won't go, it does nothing, in fact, no category can be revisited until the page is reloaded. Why would an onSubmit work only once?

Each pulldown is constructed via a coldFusion loop, but I don't think there's any issue there, it's been in production for about 7 years. I'll incloude rest of the html/code below

CODE

   <cfloop query="getCategories">
    
      <!---I want all the catoegories except clearance and specials since im using
      these categories as links in the top div above and i dont want cband category either.--->
      <cfif #CategoryName# neq "Clearance" AND  #CategoryName# neq "Specials" and  #CategoryName# neq "c-band">
        <cfset ArrayAppend(variables.categoryList,  "#CategoryName#")>
        <cfset ArrayAppend(variables.categoryImages,  "#CatImage#")>
      </cfif>
    </cfloop>
    <div class="content-fluid" id="innermain-container">          
      <div class="row">
        <div class="col-12 text-center">
          <h4>Collins Distribution Home</h4>
        </div>
      </div>
    <cfset counter = 1>
        <div class="row" id="innermain-container-row">          
            <cfloop index="category" array="#variables.categoryList#">
            <div class="col-sm-6 my-3 text-center">
                <cfoutput>
                        <h6 class="bold-text text-center">#category#</h6>
                        <img class="img-responsive center-block" src="/shopcart/images/categories/#variables.categoryImages[counter]#" alt="#category#">
              </cfoutput>
                        <cfset counter = counter + 1 >
                  <select name="category"  class="text-left form-control"  onchange="location = this.value;">
                    <option value="" selected>--- Select Category Item ---</option>
                    <cfoutput query="getItems">                        
                    <cfif #CategoryName# eq #category#>                        
                    <option value="/cddata/index.cfm?AppReq=vwcat&CategoryID=#URLEncodedFormat (Code)#">
                    #Description#
                    </option>                  
                    </cfif>                
                    </cfoutput>
                  </select>
            </div>
          </cfloop>
        </div>
        </div>

[Christian J]

And is works well... until the back button is pushed and the same category is chosen, again. It won't go, it does nothing, in fact, no category can be revisited until the page is reloaded. Why would an onSubmit work only once?

I think the problem is that using the Back button won't reset the SELECT menu to its default value ("--- Select Category Item ---"), instead the OPTION value selected by the user is still retained. So if the user selected the OPTION "Foo" it may redirect to foo.html, but then "Foo" is still shown in the SELECT menu when going back using the Back button, and then the javascript onchange event can't fire. To make the SELECT menu navigation work again, the user must first select something else and then select "Foo" again.

Unfortunately I don't know any way for javascript to detect the use of the Back button (for example, load events won't fire). Perhaps the best solution is to not use a javascript-driven SELECT menu for navigation, since they have other usability issues as well. Or at least use a "Go" button with the SELECT, instead of relying on the onchange event. See also https://jkorpela.fi/forms/navmenu.html

[Christian J]

Found a workaround after all. You simply let the script reset the SELECT menu before the redirection takes place.

CODE

onchange="var url=this.value;this.selectedIndex=0;document.location.href=url;"

(selectedIndex=0 means the first OPTION element).

[Jimbus]

You are a gentle person and a true scholar! Thank you, Thank you, Thank you!

I totally want to get rid of the options, but my boss is married too them. Thanks again for saving the day!

[Christian J]

You're welcome!