How to pass client side javascript return value to ASP classic server side

Question

javascript

       function test(abc) {
         var ddlArray = new Array();
            var ddl = document.getElementById('AdjusterList');
          for (i = 0; i < ddl.options.length; i++) {
            ddlArray[i] = ddl.options[i].value;
          }
  var indexsel = ddl.selectedIndex;
      return indexsel ;            
     }

---

ASP

                 strArrayCRN = osRecordSet.RecordCount
                 strArrayCRN2 = osRecordSet2.RecordCount
                 dim StrCount 
                 StrCount =strArrayCRN+strArrayCRN2

---

HTML +ASP

<select name="AdjusterList" id="AdjusterList" onchange='test("<%=StrCount%>")'><%
%>
   <option value="0">Please choose an option from the list.</option>
  <% Do While (osRecordSet.EOF = False)
       %><option value="<%=osRecordSet.RowPosition%>">
          <%=osRecordSet.Fields("NAME")%></option>
      <%
     osRecordSet.MoveNext
      Loop        %><%
    Do While (osRecordSet2.EOF = False)
            %><option value="<%=osRecordSet2.RowPosition%>">
           <%=osRecordSet2.Fields("NAME")%></option>
       <%   osRecordSet2.MoveNext    Loop        %>

Here i want to pass the return value of function test() i.e value of the selected index to asp server side

Solution

If you want to send it to server during normal html page submit, put the return value in hidden field.

If you want to send the value before the form submit, use AJAX.

Hidden Field method

JavaScript

function test(abc) {
         var ddlArray = new Array();
            var ddl = document.getElementById('AdjusterList');
          for (i = 0; i < ddl.options.length; i++) {
            ddlArray[i] = ddl.options[i].value;
          }
  var indexsel = ddl.selectedIndex;
      document.getElementById("returnValueField").value = indexsel;
      return indexsel ;            
     }

HTML

<input type="hidden" id="returnValueField" name="returnValueField" />

In ASP access this hidden field like an other form field.

For AJAX use some library like jQuery to make things easier.

Using AJAX with jQuery

First you need to include the jQuery library in your page.

Then modify your function like this

function test(abc) {
             var ddlArray = new Array();
                var ddl = document.getElementById('AdjusterList');
              for (i = 0; i < ddl.options.length; i++) {
                ddlArray[i] = ddl.options[i].value;
              }
      var indexsel = ddl.selectedIndex;
          // Ajax call starts
          $.ajax({
                 url: "your_asp_page_to_handle_request.asp",
                 data: {"selected_index": indexsel },
                 success: function() { 
                    alert("I am back after sending data sucessfully to server.");}
                 });
          // Ajax call ends  

          return indexsel ;            
         }

Your ASP code in your_asp_page_to_handle_request.asp will be something like this

<%

dim selectedIndex
selectedIndex = Request.QueryString("selected_index")

%>

Please note that you can also use jQuery.get() instead of the Ajax function we used above.