Getting the value of the input field using jquery

I have a table with edit button, every table contains an edit button with the different input field value, I need to get the different value of the input field when different edit buttons are hit. My code is getting the same value again and again not getting the random values, Here is my code of table

<tr>
    <td>64</td>
    <td>2</td>
    <td>2₪</td>
    <input type="hidden" name="idd" value="64" id="main-id">
    <td>
        <span id="editBtn" class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
    <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
</tr>
<tr>
    <td>65</td>
    <td>25</td>
    <input type="hidden" name="idd" value="65" id="main-id">
    <td>
        <span id="editBtn" class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
        <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
</tr>

Within this table when I try to edit each time using jquery it bring up the first value of the hidden field which is 64. Below is the jQuery which I used to pull the value of the hidden field.

var bla = $('#main-id').val();
alert (bla);

$('#editBtn').on('click', function(e){
  console.log($('#main-id').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>64</td>
    <td>2</td>
    <td>2₪</td>
    <input type="hidden" name="idd" value="64" id="main-id">
    <td>
      <span id="editBtn" class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
  <tr>
    <td>65</td>
    <td>25</td>
    <input type="hidden" name="idd" value="65" id="main-id">
    <td>
      <span id="editBtn" class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
</table>

So what is the issue with this logic?

IDs must be unique

The big issue here is the repeated usage of the same ids. Ids, by web standards, should be unique per page. This is detailed in the web standards, and reinforced by existing methods such as getElementById. Notice that the method is "getElement", not "getElements".

So how do we address this issue? Any time you have the need to identify elements, and those element "logically" repeat on the page, that is a potential use case of a class. Classes can repeat.

$('.editBtn').on('click', function(e) {
  console.log($('.main-id').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      64
      <input type="hidden" name="idd" value="64" class="main-id">
    </td>
    <td>2</td>
    <td>2₪</td>
    <td>
      <span class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
  <tr>
    <td>
      65
      <input type="hidden" name="idd" value="65" class="main-id">
    </td>
    <td>25</td>
    <td>
      <span class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
</table>

So this second snippet has changed to use classes, yet the same behaviour remains. Why is that? That is because val() will only return the first value of all the results of the selector. So while we find all the elements with the class of main-id, it only gets the first one logged. How do we address that issue?

Contextual lookups

When ever you perform an operation such as $('.main-id') what jQuery actually does is $(document).find('.main-id'). It implicitly uses the document as the context. The context is the element by which the children will be searched for within.

So with that in mind, in relation to our issue, what is our context? Our context is each row. So in order to grab the specific main-id that we want, we should use a contextual lookup to find it. This would look something like the following.

$('.editBtn').on('click', function(e) {
  console.log($(e.target).closest('tr').find('.main-id').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      64
      <input type="hidden" name="idd" value="64" class="main-id">
    </td>
    <td>2</td>
    <td>2₪</td>
    <td>
      <span class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
  <tr>
    <td>
      65
      <input type="hidden" name="idd" value="65" class="main-id">
    </td>
    <td>25</td>
    <td>
      <span class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
</table>

Clicking the edit buttons now logs the correct value. How does that work? So the first thing we do is wrap the e.target (the element that was clicked) in a jQuery object, so we have access to the jQuery methods. We then use the closest() method to find that elements parent tr. That tr is our context. From there, we perform a find for the .main-id, which will only find the main id within our specific row, and boom. You have the element/value you want.

Getting the value of the input field using jquery

IDs must be unique

Contextual lookups

Related

Recent Posts