How to Select Id and Get a Value of It in Input Data in This Row

How can I select ID and get a value of it in input data in this row?

This should find you the div:

this.closest("li").querySelector("div[role='ucomment']")

closest() works only upwards in the DOM. It traverses the parent elements. So what you can find using it is li, from there you can use find() using the selector div[role='ucomment'] you tried to pass to closest().

// get a NodeList containing alls modify buttons and convert it to an arrayconst modifyBtns = Array.from(document.querySelectorAll('.btn.btn-modify'));
// iterate over each button...for (const modifyBtn of modifyBtns) {  // and attach an event listener for click, binding the handler to each modifyBtn  modifyBtn.addEventListener('click', modifyComment.bind(modifyBtn));}
function modifyComment(e) {  this.closest("li").querySelector("div[role='ucomment']").style.color= 'red';}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul>  <li class="list-group-item d-flex justify-content-between align-items-center">    <div class="row w-100">      <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div>    </div>    <button type="button" class="btn btn-modify">Modify</button>  </li>  <li class="list-group-item d-flex justify-content-between align-items-center">    <div class="row w-100">      <div class="col-8" role="ucomment" name="ucomment2">{{ucomment}}</div>    </div>    <button type="button" class="btn btn-modify">Modify</button>  </li>  <li class="list-group-item d-flex justify-content-between align-items-center">    <div class="row w-100">      <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div>    </div>    <button type="button" class="btn btn-modify">Modify</button>  </li>  <li class="list-group-item d-flex justify-content-between align-items-center">    <div class="row w-100">      <div class="col-8" role="ucomment" name="ucomment2">{{ucomment}}</div>    </div>    <button type="button" class="btn btn-modify">Modify</button>  </li>  <li class="list-group-item d-flex justify-content-between align-items-center">    <div class="row w-100">      <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div>    </div>    <button type="button" class="btn btn-modify">Modify</button>  </li>  <li class="list-group-item d-flex justify-content-between align-items-center">    <div class="row w-100">      <div class="col-8" role="ucomment" name="ucomment2">{{ucomment}}</div>    </div>    <button type="button" class="btn btn-modify">Modify</button>  </li>  <li class="list-group-item d-flex justify-content-between align-items-center">    <div class="row w-100">      <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div>    </div>    <button type="button" class="btn btn-modify">Modify</button>  </li>  <li class="list-group-item d-flex justify-content-between align-items-center">    <div class="row w-100">      <div class="col-8" role="ucomment" name="ucomment2">{{ucomment}}</div>    </div>    <button type="button" class="btn btn-modify">Modify</button>  </li></ul>

Get data from mysql to input tag when value of select is ID

There are 2 things you have to do:

First you put the value you want to use as value in the value from the option.

To simplify the example see HTML the value of the option is the value you need! So no reason to set there an ID and get the age.. even if that is possible there is not reason here to do that..

var mySelect = document.getElementById("name");mySelect.addEventListener("change", myFunction);
function myFunction()  { document.getElementById("age").value = mySelect.options[mySelect.selectedIndex].value;};

<select  id="name" name="name"  required  >    <option  value="1" >        name1 - country1 - age 1    </option>    <option  value="2" >        name2 - country2 - age 2    </option>    <option  value="3" >        name3 - country3 - age 3    </option>    <option  value="4" >        name4 - country4 - age 4    </option></select><input type="number"  id="age" name="age" value="" placeholder=" age" required>

how to get values of selection row in html table and show them in a input text using javasricpt?

Apply the click event for <tr> and pass the current reference this to the calling function like <tr onclick="callme(this)">. From the javascript get the current row reference and find all the td inside that. Now get the values using innerHTML and assign it to the respective input fields("id_type" , "event_category" , "description"). Look at the following example.

function callme(e){  var tds=e.getElementsByTagName('td');  document.getElementById("id_type").value = tds[0].innerHTML.trim();  document.getElementById("event_category").value = tds[1].innerHTML.trim();  document.getElementById("description").value = tds[2].innerHTML.trim();
}

<table><tr onclick="callme(this)">  <td>test1</td>  <td>something1</td>  <td>content1</td></tr><tr onclick="callme(this)">  <td>test2</td>  <td>something2</td>  <td>content2</td></tr><tr onclick="callme(this)">  <td>test3</td>  <td>something3</td>  <td>content3</td></tr></table>
<input type="text" id="id_type" /><input type="text" id="event_category" /><input type="text" id="description" />

Get data of all rows and extract input values, tr.data() of td.data() attritubes

You mentioned that you are familiar with approaches such as jQuery's $('tr').first().find('input').val().

To use something like that, you can use the following:

table.rows().every( function ( rowIdx ) {
  var firstVal = $( this.node() ).first().find('input').val();
  console.log( 'Row ' + (rowIdx+1)  + ' first value: ' + firstVal );
} );

Here, we iterate over every row in the DataTable regardless of whether the row is on the currently displayed page, or not. This means we access data which is in the DataTable, but which may not be displayed in the DOM.

We get a node object using row().node() and then use that in a jQuery selector.

My test table:

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" value="X"></td>
                <td><input type="text" value="Y"></td>
                <td><input type="text" value="Z"></td>
            </tr>
            <tr>
                <td><input type="text" value="D"></td>
                <td><input type="text" value="E"></td>
                <td><input type="text" value="F"></td>
            </tr>
            <tr>
                <td><input type="text" value="P"></td>
                <td><input type="text" value="Q"></td>
                <td><input type="text" value="R"></td>
            </tr>
        </tbody>
    </table>

My DataTable:

var table = $('#example').DataTable( {
  "lengthMenu": [ 2 ] // just to force 2 pages of data
} );

The console output:

Row 1 first value: X
Row 2 first value: D
Row 3 first value: P

You can obviously improve this to use jQuery to process every field in each node - not just the first field.

The order in which the rows are iterated is based on the current display order (i.e. taking sorting into account).

You can also iterate the data based on the original load order of the data:

table.rows( {order: 'index'} ).every( ... );

This causes the internally assigned DataTables row index to be used. This index value does not change when data is sorted.

See selector modifiers for details.

How can I match a user id value from a form input to records in my database?

==SOLUTION FOR AJAX FORM==

orders.php

<?php

// Create the connection to the database
$con=mysqli_connect("xxx","xxx","xxx","xxx");


// Check if the connection failed
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  die();
}



  if (isset($_GET['userid']))
{
    $userid= $_GET['userid'];

   $query = "SELECT itemname
        FROM seguin_orders
  WHERE username = '".($userid)."'";

    $result = mysqli_query($con,$query);

    while ($row = mysqli_fetch_assoc($result)) 
        {
         echo '<option value =" ' . $row['itemname'] . ' ">' . $row['itemname'] . '</option>';
        }
}
?>

original page with form

This is just basic and simple, for you to understand. You can change it and make more secure. Please, read comments to understand

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<form action="#">
    <div class="pre-dropdown">  <!-- This class is here to hide this mini form after submit with jquery -->
        <input type="text" name="userid" id="userid">
        <button id="submitId">Submit Id</button>
    </div>

    <div class="dropdown">  <!-- This is hidden because there is no data, but when userid is submited, this will be visible -->
        <select name="xxx" id="dropdown-select">
            <option value="">-- Select One --</option>
        </select>
    </div>
</form>

<script src="http://code.jquery.com/jquery.min.js"></script>

<script>
     $(function(){

        $('.dropdown').hide();  // Hide dropdown div when page is loaded, mbetter way will be with css, but it's enough for now


        $('#submitId').on('click', function(e){  // Things to do when 'Submit Id' button is clicked
            var userid = $('#userid').val(); // Grab user id from text field
            e.preventDefault(); // Prevent form from submit, we are submiting form down with ajax.

             $.ajax({
              url: "orders.php",
              data: {
                userid: userid
              }
            }).done(function(data) {
                $('.pre-dropdown').hide();  // Hide mini form for user id
               $('.dropdown').show(); // show dropdown
              $('#dropdown-select').append(data); // append results from orders.php to select
            });
        });
     });
</script>
</body>
</html>

Change form the way you need. I am hidding pre-dropdown because if user submits userid again, we will append results twice.

How to display selected option get by id when update a data in codeigniter

Change this code

<select name="category_id">
<?php foreach ($cats as $category) { ?>
<option <?php if($category->category_id == "your desired id"){ echo 'selected="selected"'; } ?> value="<?php echo $category->category_id ?>"><?php echo $category->category?> </option>
<?php } ?>
</select>

I actually added a hint for you as your question was not so clear.

You have to put your desired id to match both for selected category

save row value when I select the checkbox

Only form fields are submitted to the server. The table cells without a field will not be sent on submission

You can have a set of hidden fields populated by JavaScript when you check the box, (see later)

Alternatively you could use AJAX

You have checkboxes, do you want to save more than one row? If not, use radios instead

Change

   echo "<td>". $data ['id']. "</td>";
   echo "<td>". $data ['name']. "</td>";
   echo "<td>". $data ['description']. "</td>";
   echo "<td>". $data ['description_short']. "</td>";

   echo "<td data-key=\"id\">". $data ['id']. "</td>";
   echo "<td data-key=\"name\">". $data ['name']. "</td>";
   echo "<td data-key=\"description\">". $data ['description']. "</td>";
   echo "<td data-key=\"description_short\">". $data ['description_short']. "</td>";
   echo "<td data-key=\"image\">". '<img src = "http://www.website.com/'.$data [" id_default_image "] .'- home_default /'.$ data [" link_rewrite "].'. jpg" class = "img-thumbnail "width =" 120 "height =" auto "/> ';

Then use

$(function() {
  $("form").on("submit", function(e) {
    e.preventDefault(); // stop submission
    let details = $('input[name="checkbox"]:checked')
      .closest("tr") // parent row
      .find("td[data-key]") // only the ones with a key attribute
      .map(function() {
        return {
          [this.dataset.key]: this.textContent.trim() || $(this).find("img").attr("src")
        }
      })
      .get();
    console.log(details);
    if (details) {
      $.post("https://plungjan.name/SO/phponerow/save.php", JSON.stringify(details), function(data) {
        console.log("Details saved", data)
      })
    }
  })
})

$(function() {
  $("form").on("submit", function(e) {
    e.preventDefault(); // stop submission
    let details = $('input[name="checkbox"]:checked')
      .closest("tr") // parent row
      .find("td[data-key]") // only the ones with a key attribute
      .map(function() {
        return {
          [this.dataset.key]: this.textContent.trim() || $(this).find("img").attr("src")
        }
      })
      .get();
    console.log(details);
    if (details) {
      $.post("https://plungjan.name/SO/phponerow/save.php", JSON.stringify(details), function(data) {
        console.log("Details saved", data)
      })
    }
  })
})


My PHP is 

<?php 

header("Access-Control-Allow-Origin: *");
// $data = json_decode(file_get_contents('php://input'), true);

$data = file_get_contents('php://input');
echo $data;
?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form>
  <table>
    <tbody>
      <tr>
        <td data-key="id">ID 1</td>
        <td data-key="name">Name 1</td>
        <td data-key="description">Description 1 </td>
        <td data-key="description_short">Short 1</td>
        <td data-key="image"><img src="http://www.website.com/id_default_image/home_default/link_rewrite1.jpg" class="img-thumbnail" width="120" height="auto" />
          <td><input type="checkbox" name="checkbox" /></td>
      </tr>
      <tr>
        <td data-key="id">ID 2</td>
        <td data-key="name">Name 2</td>
        <td data-key="description">Description 2 </td>
        <td data-key="description_short">Short 2</td>
        <td data-key="image"><img src="http://www.website.com/id_default_image/home_default/link_rewrite2.jpg" class="img-thumbnail" width="120" height="auto" />
          <td><input type="checkbox" name="checkbox" /></td>
      </tr>
      <tr>
        <td data-key="id">ID 3</td>
        <td data-key="name">Name 3</td>
        <td data-key="description">Description 3 </td>
        <td data-key="description_short">Short 3</td>
        <td data-key="image"><img src="http://www.website.com/id_default_image/home_default/link_rewrite3.jpg" class="img-thumbnail" width="120" height="auto" />
          <td><input type="checkbox" name="checkbox" /></td>
      </tr>
    </tbody>
  </table>
  <input type="submit" />
</form>