CODEWITHSUNDEEP
javascripthtmljquery
Letoncse
Letoncse

Reputation: 722

jQuery find DIV inner value when click on radio button

What I'm trying to get is the immediate upper div value (Accounts Admin) when I'm clicking on a radio button.

Below is my HTML structure. Whenever I click on the admin or alan radio button give me the div inner text Accounts Admin.

How can get that value?

<div class="display-flex flex-row">
  <div class="p-1 ez-sub-heading mt-1">
    Accounts Admin
  </div>
</div>
<div class="row m-0">
  <div class="col-auto">
    <div>
      <input
        id="admin"
        type="radio"
        value="admin"
        name="eng-name"
        class="eng-name userlist active"
      />
    </div>
  </div>
</div>
<div class="row m-0">
  <div class="col-auto">
    <div>
      <input
        id="alan"
        type="radio"
        value="alan"
        name="eng-name"
        class="eng-name userlist active"
      />
    </div>
  </div>
</div>

I'm trying this way but I can't get the value.

$(this).parent().find(".ez-sub-heading").text()

Upvotes: 1

Views: 47

Answers (2)

Mark Baijens
Mark Baijens

Reputation: 13222

Assuming you have multiple blocks of this, I would change the html structure a bit so you have a wrapper around the complete block. With the closest() function you can find the first wrapper parent and then use find() to look for the header element.

You can use trim() to remove the whitespace caused by code indention.

$('.userlist').on('click', (e) => {
  var text = $(e.currentTarget).closest('.wrapper').find('.ez-sub-heading').text();
  console.log(text.trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row wrapper">
  <div class="p-1 ez-sub-heading mt-1">
    Accounts Admin
  </div>
  <div class="row m-0">
    <div class="col-auto">
      <div>
        <input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
      </div>
    </div>
  </div>
  <div class="row m-0">
    <div class="col-auto">
      <div>
        <input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
      </div>
    </div>
  </div>
</div>

<div class="display-flex flex-row wrapper">
  <div class="p-1 ez-sub-heading mt-1">
    Accounts Admin 2
  </div>
  <div class="row m-0">
    <div class="col-auto">
      <div>
        <input id="admin" type="radio" value="admin" name="eng-name2" class="eng-name userlist active">
      </div>
    </div>
  </div>
  <div class="row m-0">
    <div class="col-auto">
      <div>
        <input id="alan" type="radio" value="alan" name="eng-name2" class="eng-name userlist active">
      </div>
    </div>
  </div>
</div>

Upvotes: 3

fdomn-m
fdomn-m

Reputation: 28611

With your HTML structure as it is, you need to find the closest (nearest parent) .row and then use prevAll to get the header row.

$(this).closest(".row").prevAll(".flex-row").first().text().trim()


$("input.userlist").click(function() {
  console.log($(this).closest(".row").prevAll(".flex-row").first().text().trim())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row">
  <div class="p-1 ez-sub-heading mt-1">
    Accounts Admin
  </div>
</div>
<div class="row m-0">
  <div class="col-auto">
    <div>
      <input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
    </div>
  </div>
</div>
<div class="row m-0">
  <div class="col-auto">
    <div>
      <input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
    </div>
  </div>
</div>

<div class="display-flex flex-row">
  <div class="p-1 ez-sub-heading mt-1">
    Second Header
  </div>
</div>
<div class="row m-0">
  <div class="col-auto">
    <div>
      <input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
    </div>
  </div>
</div>
<div class="row m-0">
  <div class="col-auto">
    <div>
      <input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
    </div>
  </div>
</div>

A small change to the HTML structure and adding some classes would make this much simpler (not included here as already suggested in the other answer).

Upvotes: 1

Related Questions