jQuery dynamic input type change not working

Question

I'm working on dynamic input type but got stuck. The idea is whenever I changed input value,it'll create new row of input type. here's the image

Input Type 1

for the first row I succeeded to create a new row like this

Input Type 2

but when I try to change value on second input value,it not creating a input type. I don't know what is wrong here.

here's my code

var X = 1;

function tes() {
  var wrapper = $('.receive-item');
  X++;
  $(wrapper).append(
    '<tr>' +
    '<td><input type="text" class="form-control form-control-sm item_code_' + X + '" id="item_code_' + X + '" name="item_code[]" placeholder="Item Code"></td>' +
    '<td><a href="javascript:void(0)" class="btn btn-sm btn-danger remove" title="Delete"><i class="fas fa-minus"></i></a></td>' +
    '</tr>'
  );
  $(wrapper).on('click', '.remove', function(e) {
    e.preventDefault();
    // if(!confirm("Delete this row?")) return;  
    $(this).closest("tr").remove();
  });
}
$(document).ready(function() {
  $('#item_code_' + X).on('change', function(e) {
    tes();
  });
});
$(document).ready(function() {
  // $('.name_'+X).on('change',tes);
  $('.addButton').click(tes);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />


<div class="row">
  <div class="col-md-6 field-wrapper">
    <h5>List Receive Item</h5>
    <div class="form-group">
      <div class="table-responsive">
        <table class="table table-hover table-bordered mb-0 text-dark">
          <thead>
            <tr>
              <th>Item Code</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody class='receive-item'>
            <tr>
              <td><input type="text" class="form-control form-control-sm item_code_1" id="item_code_1" name="item_code[]" placeholder="Item Code"></td>
              <td><a href="javascript:void(0)" class="btn btn-sm btn-primary addButton" title="Add Receive Items"><i class="fas fa-plus"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Please add HTML to the snippet I made to give us a [mcve]. PS your X should not be a string. You are lucky that "1"++ is 2 — mplungjan, Oct 06 '22 at 06:22
Also `$(wrapper).on('click', '.remove', function(e) { e.preventDefault(); if(!confirm("Delete this row?")) return; $(this).closest("tr").remove(); });` If you make it a button type="button" you do not need to have preventDefault — mplungjan, Oct 06 '22 at 06:26
@mplungjan first of all,thanks for the correction, I new to stackoverflow so I don't know how to use it. i've changed the X type but also not working. can you help me with other method sir? — Tommy Saputra, Oct 06 '22 at 06:31
@sta sorry,but i'm working this project using laravel,that's why I use laravel tag. I removed it though. Thank you. — Tommy Saputra, Oct 06 '22 at 06:32
Please click [edit], scroll down, click edit snippet above and add RELEVANT HTML and css — mplungjan, Oct 06 '22 at 06:39
sorry sir,I really don't understand what you mean by edit. I've already edited the post I've made. And I add `` but my page not loading because other javascript got stopped — Tommy Saputra, Oct 06 '22 at 06:46
@mplungjan how stupid i'am. i'm so sorry bothering you sir. I've added the html and the javascript,but i can't add the css because to many css file. — Tommy Saputra, Oct 06 '22 at 07:07
Your issue is that you never add a `change` event for the *new* elements. You only have `$('#item_code_'+X).on("change"` which only applies to that one X. Easiest fix is to *move* that change handler to directly after adding item_code+X. Better fix is to not use incremental IDs and use a class with delegated events. — freedomn-m, Oct 06 '22 at 07:07
The idea of [mcve] is to add *just enough* code to **reproduce the issue** - not your entire code base. — freedomn-m, Oct 06 '22 at 07:07

mplungjan · Accepted Answer · 2022-10-06T07:30:16.333

Here is a much simpler version No need for ID since you have name[]

You can actually use CSS to hide the plus and show the minus in the first and subsequent rows

$(function() {
  const $wrapper = $('.receive-item');

  const tes = () => {
    const $row = $wrapper.find("tr").eq(0).clone(true)
    $wrapper.append($row);
    $row.find(":input").val("").focus();
  };
  $wrapper.on('click', '.remove', function(e) {
    e.preventDefault();
    if (!confirm("Delete this row?")) return;
    $(this).closest("tr").remove();
  });

  $('.item_code').on('change', tes);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<table>
  <tbody class="receive-item">
    <tr>
      <td>
        <input type="text" class="form-control form-control-sm item_code"  name="item_code[]" placeholder="Item Code"></td>
      <td><a href="javascript:void(0)" class="btn btn-sm btn-danger remove" title="Delete"><i class="fas fa-minus"></i></a></td>
    </tr>
  </tbody>
</table>

Here we hide or show the plus or minus

BUT we would get TWO fields if you change and click add

$(function() {
  const $wrapper = $('.receive-item');
  $(".remove").eq(0).hide(); // hide the first

  const tes = (e) => {
    const $row = $wrapper.find("tr").eq(0).clone(true)
    $wrapper.append($row);
    $row.find(":input").val("").focus();
    $(".remove:gt(0)").show()
    $(".addButton:gt(0)").hide()
  };
  $wrapper.on('click', '.remove', function(e) {
    e.preventDefault();
    if (!confirm("Delete this row?")) return;
    $(this).closest("tr").remove();
  });
  $wrapper.on('click', '.addButton', tes);
//  $('.item_code').on('change', tes); // either on change OR on click
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<table>
  <tbody class="receive-item">
    <tr>
      <td>
        <input type="text" class="form-control form-control-sm item_code" name="item_code[]" placeholder="Item Code"></td>
      <td><a href="javascript:void(0)" class="btn btn-sm btn-danger remove" title="Delete"><i class="fas fa-minus"></i></a>
        <a href="javascript:void(0)" class="btn btn-sm btn-primary addButton" title="Add Receive Items"><i class="fas fa-plus"></i></a>
      </td>
    </tr>
  </tbody>
</table>

@freedomn-m ouch, I swapped to input at the last moment, but you are correct so now we have an alert AND a new field if we enter something and click the minus — mplungjan, Oct 06 '22 at 07:14
thanks again,i've added the code,still working on delete the row,because the first row must not be deleted. — Tommy Saputra, Oct 06 '22 at 08:08
In my example you cannot delete first row since the minus is not shown — mplungjan, Oct 06 '22 at 09:07
yes sir,i copied your last example and modified it a bit. thank you so much. — Tommy Saputra, Oct 07 '22 at 03:12

jQuery dynamic input type change not working

1 Answers1