How to play this value for an input field?

Asked

Viewed 62 times

0

I need to get the id of an item on my list and fill in the input with this id. So far with some searches I was able to choose which of the options and display the id in an Alert, but I need to fill the tcod input with the id value, I tried with attr and prop but no result. Could you help me ?

$(".tt").click(function() {
  var valor = $(this).parent().parent().find('.tes');
  alert(valor.html());
}
<label>Codigo<span style="color:red">*</span></label>
<input class="form-control" type="number" name="tcod" required>
<?php

$nome = $_POST['nome'];

$sql = "SELECT * FROM `cad` WHERE nome LIKE '%$nome%' ";
$ex = mysqli_query($conn, $sql);

          
        while($rows = $ex->fetch_array()){
        echo "<tr>";
        echo "<td class='tes'>".$rows['idcad']." </td>";
        echo "<td>".$rows['nome']." </td>";
        echo "<td>".$rows['nome_mae']." </td>";
        echo "<td>".$rows['idade']." </td>";    
        echo "<nav id='edita'>";     
        echo "<td><i class='fa fa-search tt' id='cod' value=''></i></td>";
        echo "</nav>";

        echo "</tr>";   
        
       
        
    }
}
?>

  • Vc changes the value of an input with .val(). You cannot repeat id’s in HTML (id='cod') and why there is a </nav> in the middle of the table?

  • Nav was one of the tests I did, because in the first attempts I was launching the value inside the input but only the last option, can be removed from the code, but I tried to put it like this : <script type="text/javascript"> $(".tt"). click(Function() { var value = $(this).Parent().Parent().find('.tes'); $("input[name='tcod']").val(value); }); </script>

2 answers

0


Note that the input you want to fill in is of the type number, so you’ll only accept numbers. If the id you want to pick up and play on the field is not a number, the field will be empty and a warning will be shown in the browser console.

To pick up the cell text .tes from the same line as the button clicked, you use .closest("tr") to find the button line, and then the .find(".tes") to find the cell. Use .text() to pick up the text inside the cell and .trim() to clear possible spaces before and after the text. Then use .val() to change the input value.

You don’t have to use .parent() 2 times. The .closest() already goes straight to the parent element where you want to get. See:

$(".tt").click(function() {
  var valor = $(this).closest("tr").find('.tes');
   $("[name='tcod']").val(valor.text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<label>Codigo<span style="color:red">*</span></label>
<input class="form-control" type="number" name="tcod" required>
<table border="1">
   <tr>
      <td class='tes'>1</td>
      <td>nome1</td>
      <td>nome mãe 1</td>
      <td>18 anos</td>
      <td>
         <i class='fa fa-search tt' id='cod' value=''></i>
      </td>
   </tr>
   <tr>
      <td class='tes'>2</td>
      <td>nome2</td>
      <td>nome mãe 2</td>
      <td>20 anos</td>
      <td>
         <i class='fa fa-search tt' id='cod' value=''></i>
      </td>
   </tr>
</table>

  • Thank you very much friend ! It worked right the way you wanted , helped me a lot, I am grateful .

0

In fact this question should not be tagged with PHP.

But if you want to set the input id use:

$(".tt").click(function() {
  var valor = $(this).parent().parent().find('.tes');
   /* define o valor do input name=tcod */
  $('input[name="tcod"]').attr("id", valor.html() );
}

If you want to set the input value name="tcod", just use:

$(".tt").click(function() {
  var valor = $(this).parent().parent().find('.tes');
   /* define o valor do input name=tcod */
  $('input[name="tcod"]').val(valor.html());
}
  • So, the php tag was really unnecessary, on the next question I will pay more attention. But I tried the way you described and it didn’t work, I click on the icon to call the function and nothing happens.My code looks like this: <script type="text/javascript"> $(". tt"). click(Function() { var value = $(this). Parent(). Parent(). find('. tes'); $("input[name='tcod']"). val(value.html(); });

Browser other questions tagged

You are not signed in. Login or sign up in order to post.