CODEWITHSUNDEEP
javascriptjquery
Hritika Agarwal
Hritika Agarwal

Reputation: 119

How to set variable on onclick() function in jquery

I have a dropdown like this ->

Screenshot

<div class="dropdown-item d-flex align-items-center" id="Emp1" onclick="">
  <div class="mr-3">
    <div class="icon-circle bg-success">
      <img class="rounded-circle" src="{% static 'administrator/images/undraw_profile_1.svg' %}" alt="">
    </div>
  </div>
  <div>
    <div class="small text-gray-500">Johanthanc</div>
    <span class="font-weight-bold" id="employee1">Mr. Johanthan Cristofer</span>
  </div>
</div>
<div class="dropdown-item d-flex align-items-center" id="Emp2">
  <div class="mr-3">
    <div class="icon-circle bg-success">
      <img class="rounded-circle" src="{% static 'administrator/images/undraw_profile_1.svg' %}" alt="">
    </div>
  </div>
  <div>
    <div class="small text-gray-500">Johanthanc</div>
    <span class="font-weight-bold" id="employee2">Mr. Johanthan Cristofer</span>
  </div>
</div>

Whenever I click on first div(for say div of id="Emp1"), name of employee should be set in a variable (i.e. div of id="employee1").

<script>

var employee;
jQuery(document).on("click", "#Emp1", function (event) {
  employee = jQuery(this).attr('id') || '';
  console.log(employee);
});

I want to pass the id of its nested division in the 3rd statement of script. So, what should I write to assign a value in employee variable (3rd statement) --> employee = jquery(this).... ???

Upvotes: 2

Views: 905

Answers (3)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

I added two classes:

    1. employee for the element on which to attach the event handler
    1. fullname for the element holding the wanted information (I assumed the full name here)

I also used .find() method to retreive an element from the event on another one.

I don't think you need to use some id for that purpose.

jQuery(document).on("click", ".employee", function (event) {
  employee = jQuery(this).find(".fullname").text();
  console.log(employee);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-item d-flex align-items-center employee" id="Emp1">
  <div class="mr-3">
    <div class="icon-circle bg-success">
      <img class="rounded-circle" src="{% static 'administrator/images/undraw_profile_1.svg' %}" alt="">
    </div>
  </div>
  <div>
    <div class="small text-gray-500">Johanthanc</div>
    <span class="font-weight-bold fullname" id="employee1">Mr. Johanthan Cristofer</span>
  </div>
</div>
<div class="dropdown-item d-flex align-items-center employee" id="Emp2">
  <div class="mr-3">
    <div class="icon-circle bg-success">
      <img class="rounded-circle" src="{% static 'administrator/images/undraw_profile_1.svg' %}" alt="">
    </div>
  </div>
  <div>
    <div class="small text-gray-500">John</div>
    <span class="font-weight-bold fullname" id="employee2">Mr. John Doh</span>
  </div>
</div>

Upvotes: 0

D. Seah
D. Seah

Reputation: 4592

you can get the id this way.

let employee = null;
jQuery(document).on("click", "#Emp1", function(event) {
  employee = $(this).find('span:first').attr("id");
  console.log(employee);
});

Upvotes: 1

Ever Dev
Ever Dev

Reputation: 2162

I think you should add a class or an identifier to identify the elements.

You can just try

  <div class="dropdown-item d-flex align-items-center user-menu-item" id="Emp1" onclick="">

// script
jQuery('.user-menu-item').click(function() {
  employee = jQuery(this).attr('id') || ''
})

or

  <div class="dropdown-item d-flex align-items-center" user-menu-item id="Emp1" onclick="">

// script
// in jQuery
jQuery('[user-menu-item]').click(function() {
  employee = jQuery(this).attr('id') || ''
})

Upvotes: 1

Related Questions