Calling data-attribute from HTML Select with jQuery that includes SQL query to dynamically populates other HTML input in Classic ASP

Question

Hello all and happy christmas to you all.

Based on the title, i think you can catch my drift a little about my problem. To be honest, i'm not very familiar with classic asp but since at my workplace, they still using classic asp and they ask me to edit some page to create validation for the input. Thus, i want to replace some input with select that dynamically populate other input as well. However, i have a bit problem on getting the variable. So i have heard with data-attributes you can call multiple variables by using jQuery.

I am using: Classic ASP and SQL Server 2008.

My goal is when user has select something, jQuery catch the value of the selected option and ALSO the column (database) that related with the value.

I will provide 3 blocks of code that i think majorly play important part here. Although i may not be able to provide in jsfiddle since i have include the SQL query. (If jsfiddle can handle SQL, then apologize because i didn't know.)

First block of code is my SQL query which is on top of my page:

<%
Dim Recordset5
Dim Recordset5_cmd
Dim Recordset5_numRows

Set Recordset5_cmd = Server.CreateObject ("ADODB.Command")
Recordset5_cmd.ActiveConnection = MM_GajiHari2_STRING
Recordset5_cmd.CommandText = "SELECT * FROM dbo.JBANK"
Recordset5_cmd.Prepared = true

Set Recordset5 = Recordset5_cmd.Execute
'arrRecordset5 = Recordset5.GetRows()
Recordset5_numRows = 0
%>

Second is my HTML code which is for select with the value that called from the database based on the SQL i have given above.

<td bgcolor="#D5D5FF" class="style3">
   <select name="kod_bank" type="text" class="style22  style26" id="kod_bank"/>
      <option value="" disabled selected>Sila Pilih Kod Bank</option>
        <%
        Dim a
        Dim b
        Dim c

        a = Recordset5.Fields.Item("jKod_Bank").Value
        b = Recordset5.Fields.Item("jNama_Bank").Value
        c = Recordset5.Fields.Item("jTotal_Digit").Value

        While (NOT Recordset5.EOF)
        %>

        <option value="<%=(Recordset5.Fields.Item("jKod_Bank").Value)%>" 
           data-bank="[5, 5, 5]">
           <%=(Recordset5.Fields.Item("jKod_Bank").Value)%> (<%=(Recordset5.Fields.Item("jNama_Bank").Value)%>)
        </option>


        <%
           Recordset5.MoveNext()
        Wend

        If (Recordset5.CursorType > 0) Then
           Recordset5.MoveFirst()
        Else
           Recordset5.Requery
        End If
        %>

  </select>
</td>
<td bgcolor="#D5D5FF" class="style3"><input name="nama_bank" type="text" class="style22  style26" id="nama_bank" size="50" maxlength="50" onkeyup="caps(this)" readonly="" /></td>
<td bgcolor="#D5D5FF" class="style3"><input name="no_akaun" type="text" class="style22 style26" id="no_akaun" size="30" /></td>

The third block of code is my jquery .

$(document).ready(function (){

   var getKodBank = document.getElementById("kod_bank");

   if(getKodBank != ""){

      $("#kod_bank").on("change", function(){
      //alert("test");
         $.each($("#kod_bank").attr("data-bank"), function(index, value){
           alert( index + ": " + value );
         });
      });
   }
});

NOTE

I have tried changing the jquery like this then alert it:

$.each([5, 5], function(index, value)

and it works well. So i assume that either my SQL or HTML code is the problem.

Also notice that in HTML code, i have data-attribute like these:

data-bank="[5, 5, 5]"

This is just for testing if it works with normal value but it seems not working at all. Anyway, it should be ['a','b','c'] because i was aiming for calling that recordset5 variable which is from the database.

What is the problem of my code? really. Please help.

Answer 1

I think I can identify a few issues here.

Firstly, you're making a call to $.each() on $(...).attr(...) which won't do what you want, because calling attr(...) or data(...) (which is preferable in your case) will only give you the data value for the first item in the collection. You need to iterate over the elements first and then get the data for each one inside the loop. That's an easy fix. Note that if you switch to using data(...) instead, you'll find that jQuery will automatically parse it as an object or array if it detects that the contents of the attribute are valid as such (so your [5,5,5] will be automatically turned into a JS array).

Second, I notice that when you're using ASP to produce the option elements, you have not used Server.HTMLEncode to safely escape the contents. That means if there was a HTML special character, in particular quote characters in your data, it would break the HTML and potentially cause an XSS vulnerability . HTML-encoding the attribute will solve that issue.