onChange function not passing ID on selecting an option

28
March 05, 2019, at 9:10 PM

I want to get ID passed from .jsp file to .js on selection of an option in page using change function or on('change', function(){}). My code is below:

.jsp file

<select class="form-control" id="access_user">
        <option selected disabled>Select User</option>
        <c:forEach var="user" items="${userList}" varStatus="">
               <option onchange="getUserID('this','${user.userId}')">${user.username}</option>
        </c:forEach>
</select>

My function in .js file is as follows:

$("#access_user").on('change', function getUserID(that, Uid) {
    console.log("User id = ", Uid)
});

I am unable to get Uid in console, which I am getting in .jsp file.

Answer 1

Your code seems to be a rather confused mix of native JS and jQuery.

To achieve what you require simply add the change event handler only to the select. You can remove the on* event attributes, as they should be avoided where possible.

To get the selected ${user.userId} you can set it as the value of the option elements. Then you can retrieve it simply using the val() method of your jQuery code. Try this:

<select class="form-control" id="access_user">
  <option selected disabled>Select User</option>
  <c:forEach var="user" items="${userList}" varStatus="">
    <option val="${user.userId}">${user.username}</option>
  </c:forEach>
</select>
$("#access_user").on('change', function() {
  var uid = $(this).val();
  console.log("User id = ", uid)
});
READ ALSO
ngOptions not working, even with base example

ngOptions not working, even with base example

I am very new to Angular and a bit overwhelmed

8
How to add multiple ckeditor using class in a one page

How to add multiple ckeditor using class in a one page

How to add multiple textbox to ckeditor using class

64
string to tabular python

string to tabular python

I have a NLP tagged string in this format:

56