jQuery - how to show dropdown selected values through textbox in dynamic table

I created dynamic table and i want to show the selected dropdown values in textbox, i tried many ways using javascripts and jQuery but its not working in my dynamic table..

I just want to pass the values in my text box

Can you help me please?

Note: Pass the values only table dropdown..

here is my detailed Fiddle

Fiddle

Jquery code for creating dynamic table

$(document).ready(function() {
  $("#cashacc_sel").html($('#cashacc').html());
  var i = 1;
  $("#add_row").click(function() {
    var oSelectedValue = $('#cashacc').val();
    $('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='form-control input-md'/></td><td><select class='form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Choose an items</option></select></td>");
    // {/* <td>" + (i + 1) + "</td> */}
    $("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel"));
    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
    // $('#cashacc_sel').append($('#dynamic_sel').html());
    $("select[name='cashpayment[" + i + "].name']").html($('#cashacc option:not(:selected)'));
    $("#cashacc").html($('#cashacc_sel').html());
    $("#cashacc").val(oSelectedValue);
    i++;

  });
  $("#delete_row").click(function() {
    if (i > 1) {
      $("#addr" + (i - 1)).html('');
      i--;
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 20px;">
  <label class="col-sm-12 control-label p-sm-0 input-group">Cash Account :</label>
  <select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
    <option value="">Choose an items</option>
    <option value="acc1">Account 1</option>
    <option value="acc2">Account 2</option>
    <option value="acc3">Account 3</option>
  </select>
</div>

<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <table class="table table-bordered table-hover" id="tab_logic">
        <thead>
          <tr style="background-color: #680779; color: #fff;">
            <th class="text-center">
              Account Code
            </th>
            <th class="text-center">
              A/c Name*
            </th>
          </tr>
        </thead>
        <tbody>
          <a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a>
          <tr id='addr0'>
            <td>
              <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
            </td>
            <td>
              <select class="form-control" name="cashacc_sel" id="cashacc_sel">
                <option value="">Select A/c name</option>
                <option value="1">Plumz</option>
                <option value="2">Plumz 2</option>
                <option value="3">Plumz 3</option>
              </select>
            </td>
          </tr>
          <tr id='addr1'></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

2 answers

  • answered 2019-10-15 13:44 Prateik Darji

    I think you need something like this.

    $(document).ready(function() {
      $("#cashacc_sel").html($('#cashacc').html());
      var i = 1;
      $("#add_row").click(function() {
        var oSelectedValue = $('#cashacc').val();
        $('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='sel_text form-control input-md'/></td><td><select class='sel_sel cashacc_sel form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Choose an items</option></select></td>");
        // {/* <td>" + (i + 1) + "</td> */}
        $("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel"));
        $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
        // $('#cashacc_sel').append($('#dynamic_sel').html());
        $("select[name='cashpayment[" + i + "].name']").html($('#cashacc option:not(:selected)'));
        $("#cashacc").html($('#cashacc_sel').html());
        $("#cashacc").val(oSelectedValue);
          bindScript();
        i++;
    
      });
      $("#delete_row").click(function() {
        if (i > 1) {
          $("#addr" + (i - 1)).html('');
          i--;
        }
      });
        bindScript();
    });
    
    
    function bindScript() {
      $(document).find('.sel_sel').on("change", function () {
          $(this).parent().parent().find('.sel_text').val($(this).val());
      })
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <div class="form-group col-4" style="margin-bottom: 20px;">
      <label class="col-sm-12 control-label p-sm-0 input-group">Cash Account :</label>
      <select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
        <option value="">Choose an items</option>
        <option value="acc1">Account 1</option>
        <option value="acc2">Account 2</option>
        <option value="acc3">Account 3</option>
      </select>
    </div>
    
    <div class="container">
      <div class="row clearfix">
        <div class="col-md-12 column">
          <table class="table table-bordered table-hover" id="tab_logic">
            <thead>
              <tr style="background-color: #680779; color: #fff;">
                <th class="text-center">
                  Account Code
                </th>
                <th class="text-center">
                  A/c Name*
                </th>
              </tr>
            </thead>
            <tbody>
              <a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a>
              <tr id='addr0'>
                <td>
                  <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control sel_text" />
                </td>
                <td>
                  <select class="form-control sel_sel" name="cashacc_sel" id="cashacc_sel">
                    <option value="">Select A/c name</option>
                    <option value="1">Plumz</option>
                    <option value="2">Plumz 2</option>
                    <option value="3">Plumz 3</option>
                  </select>
                </td>
              </tr>
              <tr id='addr1'></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  • answered 2019-10-15 13:58 mplungjan

    You need to use clone and not IDs

    $(function() { // on page load
      $("#add_row").on("click",function() { // on click of add
        $("tbody").append($("tbody tr").first().clone()); // clone and append
        $("tbody tr").last().find("select").val($("#cashacc").val()); // set the value
      });
      $("#delete_row").on("click",function() {
        if ($("tbody tr").length > 1) { // remove last entry if more than one
          $("tbody tr").last().remove()
        }  
      });
      // copy the value from select to input field
      $("tbody").on("change","[name=cashacc_sel]",function() {
        $(this).closest("tr").find("[name=cashacc_code]").val(this.value);
      })
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <div class="form-group col-4" style="margin-bottom: 20px;">
      <label class="col-sm-12 control-label p-sm-0 input-group">Cash Account :</label>
      <select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
        <option value="">Choose an item</option>
        <option value="acc1">Account 1</option>
        <option value="acc2">Account 2</option>
        <option value="acc3">Account 3</option>
      </select>
    </div>
    
    <div class="container">
      <div class="row clearfix">
        <div class="col-md-12 column">
          <table class="table table-bordered table-hover" id="tab_logic">
            <thead>
              <tr>
                <td><a id="add_row" class="btn btn-default pull-left adRow">Add Row</a></td>
                <td><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a></td>
              </tr>
              <tr style="background-color: #680779; color: #fff;">
                <th class="text-center">
                  Account Code
                </th>
                <th class="text-center">
                  A/c Name*
                </th>
              </tr>
    
            </thead>
            <tbody>
              <tr>
                <td>
                  <input type="text" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
                </td>
                <td>
                  <select class="form-control" name="cashacc_sel">
                    <option value="">Select A/c name</option>
                    <option value="acc1">Plumz</option>
                    <option value="acc2">Plumz 2</option>
                    <option value="acc3">Plumz 3</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>