Click here to Skip to main content
15,353,432 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
What I need to do is to delete input value (not deleting what's inside the input) depending on another input field. Here is the code that I wrote:
<input class="form-control form-control-sm" id="items1" name="items[]">
itemCount = 1;
inputCounter = 1;
var cloned = $('#myTable tr:last').clone();
$(".add-row").click(function(){
$("td:eq(1)", cloned).html($("#myTable tbody tr").length + 1);
  let items = cloned.children()[2].children[0];
  items.id = 'items' + ++itemCount;
cloned.clone().appendTo('#myTable');
$(`input[name="inputpicker-${++inputCounter}"]`).on("input", function(){
     $('#items' + itemCount).val("");
 });
});
</script>

Now this code means, if what's inside the input has changed who's name inputpicker-2, delete the value of input that has the id of items2. Same thing if what's inside the input has changed who's name inputpicker-3, delete the value of input that has the id of items3, etc. So, it is like,
inputpicker-2 -> items2
inputpicker-3 -> items3
etc.
The problem in the code is that, if there is for example 4 rows, and I changed the input of inputpicker-2, it deletes the value of items4 not items2. So, in short it deletes the last value of items, not depending on inputpicker. It is just choosing the last value of items and delete it...

What I have tried:

I've also tried this code:
$(`input[name="inputpicker-${++inputCounter}"]`).on("input", function(event){
    $('#items' + itemCount).val(event).empty();
});

But still it is deleting the last value of items, not depending on inputpicker. It is just choosing the last value of items and delete it...
Posted
Updated 25-May-22 4:12am
v3
Comments
Richard Deeming 25-May-22 4:09am
   
The .clone() method won't change the name of any inputs in the element you're cloning. If the element in the last row has name="inputpicker-2", then the element in your cloned row will also have name="inputpicker-2".
FRS4002 25-May-22 9:22am
   
Ok, name="inputpicker-2", is automatically created by the inputpicker plugin. It automatically gives to each row a number. For example, row 2, inputpicker-2, row 3, inputpicker-3. I am sure about that from the elements tab in the browser. Now regarding items, I have edited the code above. I made a counter to items, it gives to each row a number exactly same as inputpicker.
Richard Deeming 25-May-22 9:46am
   
But does it give a number to the row when the row is added to the document, or when the plugin is initialized?

If you "inspect element" on a cloned row, does it have a new name, or the same name as the element you cloned?
FRS4002 25-May-22 9:51am
   
It gives a number to the row when the row is added to the document. The plugin is initialized automatically, when a new row is added. When I add a new row, it automatically adds to the row a new name to first input (inputpicker) and id to the second input (items).

1 solution

Your input event handler is using the value of the global itemCount variable, which will always refer to the last item.

You either need to use a local variable with the click event handler, or find some other way to identify the target element. For example:
JavaScript
let inputCounter = 1;
let rowCount = $("#myTable tbody tr").length;
const cloned = $("#myTable tbody tr:last").clone();

$(".add-row").click(function(){
    const rowNumber = ++rowCount;
    const newRow = cloned.clone();
    
    $("td:eq(1)", newRow).html(rowNumber);
    
    const items = newRow.children()[2].children[0];
    items.id = "items" + rowNumber;
    
    newRow.appendTo("#myTable tbody");
    
    // Associate the picker with the control to clear:
    $(`input[name="inputpicker-${++inputCounter}"]`).data("itemsSelector", "#" + items.id);
});

$(document).on("input", "input[name^='inputpicker-']", function(){
    const itemsSelector = $(this).data("itemsSelector");
    if (itemsSelector) { $(itemsSelector).val(""); }
});
   
Comments
FRS4002 25-May-22 11:02am
   
Oh my god! Unbelievable! It worked after a long time finding a solution! Thanks a lot! But what if I added Copy Code
uom.id = 'uom' + rowNumber;
underCopy Code
items.id = "items" + rowNumber;
How can I add it in here?Copy Code
 $(`input[name="inputpicker-${++inputCounter}"]`).data("itemsSelector", "#" + items.id); $(document).on("input", "input[name^='inputpicker-']", function(){     const itemsSelector = $(this).data("itemsSelector");     if(itemsSelector){       $(itemsSelector).val("");     } });
I've tried this
 $(`input[name="inputpicker-${++inputCounter}"]`).data("itemsSelector", "#" + items.id);
 $(`input[name="inputpicker-${++inputCounter}"]`).data("uomSelector", "#" + uom.id);
 $(document).on("input", "input[name^='inputpicker-']", function(){
     const itemsSelector = $(this).data("itemsSelector");
     const uomSelector = $(this).data("uomSelector");
     if(itemsSelector){
       $(itemsSelector).val("");
     }
     if(uomSelector){
       $(uomSelector).html("");
     }
 });
But itemsSelector code didn't work as it should after adding uomSelector...
Richard Deeming 25-May-22 11:24am
   
Something like this?
$(`input[name="inputpicker-${++inputCounter}"]`).data("itemsSelector", "#" + items.id).data("uomSelect", "#" + uom.id);
...
$(document).on("input", "input[name^='inputpicker-']", function(){
    const itemsSelector = $(this).data("itemsSelector");
    if (itemsSelector) { $(itemsSelector).val(""); }
    const uomSelector = $(this).data("uomSelector");
    if (uomSelector) { $(uomSelector).val(""); }
});

NB: You only want to increment the inputCounter variable once per row. :)
FRS4002 25-May-22 11:30am
   
Yes! It worked like a charm!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900