CODEWITHSUNDEEP
javascriptjqueryhtml
Faisal
Faisal

Reputation: 441

JQuery get closest td text value

dears i have the following html 

<tbody>
  <tr>
    <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
    <td class="text-center"><button type="button" onclick="validateCardBeforeAssigning();" class="btn btn-success"><span style="color : white" class="glyphicon glyphicon-check"></span></button>
    </td>
  </tr>
  <tr>
    <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
    <td class="text-center"><button type="button" onclick="validateCardBeforeAssigning();" class="btn btn-success"><span style="color : white" class="glyphicon glyphicon-check"></span></button>

    </td>
  </tr>
</tbody>

So after clicking the btn i want to get the text (class cardSerialNumber) value from the same tr with closet td

i tried the following function but getting undefined always

function validateCardBeforeAssigning() {
  alert($(this).closest('tr').find('.cardSerialNumber').val());
}

your support, please

Upvotes: 0

Views: 6115

Answers (3)

Tyler Roper
Tyler Roper

Reputation: 21672

I would certainly suggest using event handlers instead of an inline onclick. Give your buttons a unique class and apply the following jQuery:

<button type="button" class="btn btn-success assign-card">

$(".assign-card").on("click", function() {
  alert($(this).closest('tr').find('.cardSerialNumber').val());
});

Demo:

$(".assign-card").on("click", function() {
  alert($(this).closest('tr').find('.cardSerialNumber').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
      <td class="text-center"><button type="button" class="btn btn-success assign-card"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>
      </td>
    </tr>
    <tr>
      <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
      <td class="text-center"><button type="button" class="btn btn-success assign-card"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>

      </td>
    </tr>
  </tbody>
</table>

If you were intent on simply fixing the code you have, which I don't recommend, you could do the following:

<button type="button" onclick="validateCardBeforeAssigning(this);" class="btn btn-success">

function validateCardBeforeAssigning(btn) {
    alert($(btn).closest('tr').find('.cardSerialNumber').val());
}

By changing your function to pass this, you get a reference to the button, whereas your use of this was not referring to any element.

Demo:

function validateCardBeforeAssigning(btn) {
  alert($(btn).closest('tr').find('.cardSerialNumber').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
      <td class="text-center"><button type="button" onclick="validateCardBeforeAssigning(this);" class="btn btn-success"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>
      </td>
    </tr>
    <tr>
      <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
      <td class="text-center"><button type="button" onclick="validateCardBeforeAssigning(this);" class="btn btn-success"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>

      </td>
    </tr>
  </tbody>
</table>

Upvotes: 4

Anderson Ivan Witzke
Anderson Ivan Witzke

Reputation: 1549

You could also get the event (passed automatically from JS) inside the function, and then get the target of the event (your clicked button)

function validateCardBeforeAssigning(ev) {
  var target = ev.target;
  alert($(target).closest('tr').find('.cardSerialNumber').val());
}

Upvotes: 1

j08691
j08691

Reputation: 207919

Remove your inline JavaScript and instead use:

$('td.text-center button').click(function(){
  alert( $(this).closest('tr').find('.cardSerialNumber').val() );
})

You didn't pass a reference to the element you were clicking on your way so the function had no idea what this referred to

Upvotes: 1

Related Questions