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

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

• javascript
• jquery
• html

3 Answers 3

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./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 remend, 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./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>

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

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());
}