Get a respective cell value from a row when drop down list selected

Question

I have the following table generated dynamically

Codes as below

echo '
<tr>
  <td scope="row">'.$srNumberOa.'</td>
  <td>'.$check.'</td>
  <td>'.$numberOfDays.'</td>
  <td>'.$uph.'</td>
  <td>'.$numberOfUsefulHoursPerOa.'</td>
  <td>'.$numberOfPinsPerOa.'</td>
  <td>

    <div class="col-sm" id="">
      <select class="form-control" id="" name="">
        <option selected="selected"> </option>
        <option>Shift 1</option>
        <option>Shift 2</option>
        <option>Shift 3</option>
        <option>Shift 4</option>
      </select>
    </div>


  </td>

  <td>

    <input type="radio" name="currentOa">

  </td>
</tr>';

Here all those are dynamic php variables inside the <td> tag.

I want to alert or capture the value of 'Name' and respective radio button status when the respective 'OA Shift' dropdown list selected. For example, if I change the 'OA Shift' drop down list of serial No: 11th row, it should alert or capture Name as X and radio button as false. Can someone help me how to do it?

Edit 1

Please take note that, the form that I showed above is an Ajax output. So all these values are coming from another php page.

Answer 1

Using jQuery, this is done by firing the desired event handler on the select-element, from there on, finding the one of parents() that is the current row (<tr>), then finding the child containing the name and the respective radio button in this row:

https://codepen.io/shikifujin/pen/xxbZgqx

The alert in this example is triggered when you select one element in the dropdown list of the select input ('change' event).

The jQuery code looks like this:

$("select.form-control").on("focus", function() {
  var rowName = $(this)
    .parents("tr")
    .children("td:nth-child(2)")
    .text();
  var rowRadio = $(this)
    .parents("tr")
    .find('input[name="currentOa"]')
    .is(":checked");
  alert(
    "Name: " + rowName + " currentOa checked: " + (rowRadio ? "yes" : "no")
  );
});

For getting the row's current values, your HTML code doesn't provide any good selectors. The column containing the name is the 2nd td-child (td:nth-child(2)) - would be better if it was tagged with a class (e.g., <td class="col-name" or something alike). The radio button's current value in this row is not exactly on the children's level, so it is found by using .find('input[name="currentOa"]') traversing the DOM below the row. Its current status is returned applying the .is(':checked').

Then, you can do whatever you like with the rowName and rowRadio values, instead of alerting them.

Edit:

I updated my example at https://codepen.io/shikifujin/pen/xxbZgqx to do AJAX (wrapping the above jQuery code in a function onAfterAJAX). When clicking the button, the <tr>s are requested from another Pen via $.ajax() and appended to the table:

$("button#ajax").on("click", function() {
  $.ajax({
    url: "https://codepen.io/shikifujin/pen/dyPGJBq.html",
    success: function(data, status, xhr) {
      $("table").append(data);
      onAfterAJAX();
    }
  });
});

The reason why it didn't work before was because it took place in this order:

1. The DOM of your page with an either pre-filled or empty table was loaded,
2. then the jQuery for all select.form-control fired.
3. Next, your page probably requested the content via AJAX and added it to the page.

But at 3., the jQuery function adding the change-handler was already through and done. Now, the wrapper function onAfterAJAX is to be executed whenever a successful AJAX request comes back, applying the handler on newly added elements.

To prevent multiple events to be added to previously existing rows, I prepended an .off('change') to the change handlers getting rid of any previously added handlers. That means, this both works for replacing, as well as replacing content.

Answer 2

Following code can be used to achieve the above goal:

$('select.select-dropdown').on('change', function() {
  var name = $(this).closest('tr').find('td:first-child').text();
  var radioStatus = $(this).closest('tr').find('input[type="radio"]').is(':checked');
  alert("Name: " + name + "::" + "select value: " + $(this).val() + "::" + "Radio Status: " + radioStatus);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Name 1</td>
    <td><input type="radio" name="flag" /></td>
    <td>
      <select class="select-dropdown">
        <option value="1">Opt 1</option>
        <option value="2">Opt 2</option>
        <option value="3">Opt 3</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Name 2</td>
    <td><input type="radio" name="flag" /></td>
    <td>
      <select class="select-dropdown">
        <option value="4">Opt 4</option>
        <option value="5">Opt 5</option>
        <option value="6">Opt 6</option>
      </select>
    </td>
  </tr>
</table>

Here is a JSFiddle link for the same.

Answer 3

As you use jquery - you can add an change handler for your select:

$('select.form-control').on('change', function() {
    // find the parent `tr` for the `select`
    var tr = $(this).closest('tr');
    // `name` is the text of second `td`:
    var name = tr.find('td').eq(1).text();
    alert(name);
    // checkbox can be found by "name" attribute, for example:
    var cb = tr.find('input[name="currentOa"]');
    alert(cb.prop('checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
  <td scope="row">11</td>
  <td>X</td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  <td>
  <div class="col-sm" id="">
      <select class="form-control" id="" name="">
        <option selected="selected"> </option>
        <option>Shift 1</option>
        <option>Shift 2</option>
        <option>Shift 3</option>
        <option>Shift 4</option>
      </select>
    </div>


  </td>

  <td>

    <input type="radio" name="currentOa">

  </td>
</tr>
<tr>
  <td scope="row">22</td>
  <td>Y</td>
  <td>2</td>
  <td>2</td>
  <td>2</td>
  <td>2</td>
  <td>
  <div class="col-sm" id="">
      <select class="form-control" id="" name="">
        <option selected="selected"> </option>
        <option>Shift 1</option>
        <option>Shift 2</option>
        <option>Shift 3</option>
        <option>Shift 4</option>
      </select>
    </div>


  </td>

  <td>

    <input type="radio" name="currentOa">

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