How To Capture Form Data using OnChange

Question

I built up a page on my website as a place to perform testing of functions that I write (30 or 40 of them to date). I use a drop-down box to list the functions out by function name. When one of them is selected, I use an onChange with "window.location" to fire that function via a Select Case structure, passing the index on the query string via this.selectedIndex in the OnChange. All of this worked fine until I decided that I would also like the value of the selected option (name of the function being tested) as well (not just the index value). I found through study that the window.location does not post any form values back, so they are not available. I kept on researching and found that the "location.reload" is supposed to post back the data, but that doesn't work either.

So, I figured that I could pass the option value data via the query string perhaps by using "this.selectedOptions", but that doesn't work either. I have cut and paste a snippet of the code below, which again, works fine, but I can't get the text value of the selected option.

<form action="testcodepage.asp" method="post">
  <select class="rounded " name="cboSearchCategories "
     onChange='window.location="<%=sRootDomain%>/testcode/template/testcodepage.asp?TestCategory=" + this.selectedIndex;'

    <option value="Select One">Select One</option>
    <option value="SearchEquipmentDB()">SearchEquipmentDB()-Case #1</option>
    <option value="DisplaySingleItem()">DisplaySingleItem()-Case #2</option>
    <option value="CreateJSONSchema()">CreateJSONSchema()-Case #3</option>
    <option value="UnlockChilkatAPI()">UnlockChilkatAPI()-Case #4</option>
  </select>
</form>

Please let me know if there is a way to make this work, without using a submit button. Much appreciated! Note that this code is written using ASP Classic, but would be pertinent for any form submission.

Answer 1

If you use addEventListener on the form you and listen for the change event you can get the changed form field by e.target and the value you then be e.target.value.

<form name="ThisForm" action="" method="post">
  <b>Select Test Category:</b>&nbsp;
  <select class="rounded" name="cboSearchCategories" id="cboSearchCategories">
    <option value="Select One">Select One</option>
    <option value="SearchEquipmentDB()">SearchEquipmentDB()-Case #1</option>
    <option value="DisplaySingleItem()">DisplaySingleItem()-Case #2</option>
    <option value="CreateJSONSchema()">CreateJSONSchema()-Case #3</option>
    <option value="UnlockChilkatAPI()">UnlockChilkatAPI()-Case #4</option>
  </select>
</form>
<script>
  document.forms.ThisForm.addEventListener('change', e => {
    window.location = "/testcode/template/testcodepage.asp?TestCategory="
      + e.target.value;
  });
</script>

Answer 2

Using the suggested "onchange="this.form.submit()" (thank you @user692942) solution works good, but I had to figure out how to also get the index value. The following code resolves this. Note that the very 1st solution also works (as suggested by @James), but isn't as practical, as I can't get all of the POST data that way.

Dim aDropDownValue
Dim sTestSearchCategory
Dim iCboIndex: iCboIndex = 0

<form action="testcodepage.asp" method="post">
  <select class="rounded" name="cboSearchCategories" id="cboSearchCategories" onchange="this.form.submit()">
    <option value="Select One|0" <%=IfSelected(sSearchCategory, "Select One")%>>Select One</option>
    <option value="SearchEquipmentDB()|1" <%=IfSelected(sSearchCategory, "SearchEquipmentDB()")%>>SearchEquipmentDB()-Case #1</option>
    <option value="DisplaySingleItem()|2" <%=IfSelected(sSearchCategory, "DisplaySingleItem()")%>>DisplaySingleItem()-Case #2</option>
  </select>
</form>

sTestSearchCategory = Trim(Request.Form("cboSearchCategories"))
If sTestSearchCategory <> "" Then
   aDropDownValue = Split(sTestSearchCategory, "|")
   sTestSearchCategory = aDropDownValue(0)
   iCboIndex = aDropDownValue(1)
End If

Select Case iCboIndex
  Case 1 ' Test the SearchEquipmentDB() function.
     Response.Write("Now testing the ") & sTestSearchCategory & " function." & "<br>"
  Response.End

  Case 2 ' Test the DisplaySingleItem() function.
     Response.Write("Now testing the ") & sTestSearchCategory & " function." & "<br>"
  Response.End

  Case Else
  Response.End

End Select