I want to get the value of a field and put it in another field, knowing that there are fields that a-CodePudding

This picture explains what I want every time new fields are created when choosing select. The value is taken and placed in the corresponding input.I am new in the world of JQuery, and all I want is to get the value of the name, the attr, which I evaluated by naming it inside the Data2 field, and put it inside the code field, knowing that there is a button that adds cells that are created through JQuery, and every time I want to get a value Data 2 and put it inside the code field

///html

  <table  id="table_field3" style ="overflow-x: auto;white-space: nowrap;">
    <thead>
    <tr >
        <th> #</th>
        <th style="width: 250px; !important"> put code</th>

        <th style="width: 200px; !important"> data1</th>
        <th style="width: 200px; !important">data 2</th>
        <th style="width: 200px; !important">  data 3</th>


        <th style="width: 200px; !important"></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        

        <td>1</td>
        <td style="display:none;"><input type="text"  name="prod_idd[]" style="display:none;" value="{{$lastid->id}}"></td>

        <td>
            <input type="text" style="width: 250px; !important"  name="sub_code[]">

        </td>

        <td>
            <input style="width: 200px; !important;"  type="text" value=""  name="conversionfactor[]">

        </td>
        <td>
            <select style="width: 150px; !important"   
                    name="unit_id[]">
                                                                        <option value="my name one" name="my name">one</option>
<option value="my name" name="my name two">two</option>
                </select>
        </td>




    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td style="width: 200px; !important"><input type="button"  name="add" id="add3" value="add" style="color: white"></td>


    </tr>
    </tfoot>
</table>

Knowing that every time I add new elements, I want to get the value from data2 and put it in the code field ///here my jquery code


      $('#add3').click(function(){
          var  size = $('#table_field3 tbody').children().length  1;
          var html = '<tr>' '<td>' size '</td>' '<td style="display:none;"><input type="text"  name="prod_idd[]" style="display:none;" value="{{$lastid->id}}"></td><td><input type="text"  name="sub_code[]"></td><td><input type="text"  name="conversionfactor[]"></td><td><select style="width: 150px; !important"    name="unit_id[]">@foreach ($units as $unit)<option value="{{$unit->id}}" name="{{$unit->unit_code}}">{{$unit->unit_name . ' ( ' . $unit->unit_code . ' ) '}}</option>@endforeach</select></td><td><input type="button"  name="remove" id="remove" value="delete" style="color:white;"></td></tr>';
            $('#table_field3').append(html);
        });

        $('#table_field3').on('click','#remove',function(){
            $(this).closest('tr').remove();
        });

        $("select.getUnit").change(function(){

    var getCodeUnit = $(this).children("option:selected").attr('name');
    var selectedunitVal = $(this).children("option:selected").text();
    $(".putCode").val(getCodeUnit);


});


$("option:selected.getUnitByjs").change(function(){

    var getCodeUnit = $(this).children("option:selected").attr('name');
    $(".putCodejs").val(getSegel   getSerial   "-"    getRamz   "-"   getCodeUnit);

});

CodePudding user response：

See if this helps you

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  </head>
  <body>
    <table  id="table_field3" style="overflow-x: auto; white-space: nowrap">
      <thead>
        <tr >
          <th>#</th>
          <th style="width: 250px">put code</th>

          <th style="width: 200px">data1</th>
          <th style="width: 200px">data 2</th>
          <th style="width: 200px">data 3</th>

          <th style="width: 200px"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td style="display: none">
            <input type="text" name="prod_idd[]" style="display: none" value="{{$lastid->id}}" />
          </td>

          <td>
            <input
              type="text"
              style="width: 250px"
              
              name="sub_code[]"
            />
          </td>

          <td>
            <input
              style="width: 200px"
              type="text"
              value=""
              
              name="conversionfactor[]"
            />
          </td>
          <td>
            <select style="width: 150px"  name="unit_id[]">
              <option value="">Choose</option>
              <option value="my name one" name="my name one">one</option>
              <option value="my name two" name="my name two">two</option>
              <option value="my name three" name="my name three">three</option>
            </select>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td style="width: 200px">
            <input type="button"  name="add" id="add3" value="add" style="color: white" />
          </td>
        </tr>
      </tfoot>
    </table>

    <script>
      $("#add3").click(function () {
        var size = $("#table_field3 tbody").children().length   1;
        var html =
          "<tr>"  
          "<td>"  
          size  
          "</td>"  
          `<td style="display:none;"><input type="text"  name="prod_idd[]" style="display:none;" value="{{$lastid->id}}"></td><td><input type="text" style="width: 250px"  name="sub_code[]"></td><td><input type="text" style="width: 200px"  name="conversionfactor[]"></td><td><select style="width: 150px;"    name="unit_id[]">

            <option value="">Choose</option>
            <option value="my name one" name="my name one">one</option>
              <option value="my name two" name="my name two">two</option>
              <option value="my name three" name="my name three">three</option>

          </select></td><td><input type="button"  name="remove" id="remove" value="delete" style="color:white;"></td></tr>`;
        $("#table_field3").append(html);
      });

      $("#table_field3").on("click", "#remove", function () {
        $(this).closest("tr").remove();
      });

      $("#table_field3").on("change", "select.getUnit", function () {
        var getCodeUnit = $(this).children("option:selected").attr("name");
        var selectedunitVal = $(this).children("option:selected").text();
        $(this).parents("tr").find(".putCode").val(getCodeUnit);
      });
    </script>
  </body>
</html>