How do I delete an input value depending on another input field using jquery?

Question

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 24-May-22 4:43am

FRS4002

Updated 25-May-22 4:12am

v3

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Accepted Answer · 2022-05-25T04:12:00

Solution 1

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(""); }
});

Posted 25-May-22 4:12am

Richard Deeming

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!