attribute starts with selector ,working for first input field(not for others)

Question

Here i am having an issue with attribute starts with selector ,i have tried to do validation of multiple fields ,having dynamic ids ,but not succeed .

below is what i tried so far .

i have seen other suggestion in So,but unable to made it.

  $("input[id^='product-unit-price-']").keydown(function (event) {
    });

Html

 <input type="text"  class="form-control pro-input valfields" id="product-unit-price-<?php echo $id;?>" name="unit_price[]" onblur="getTotalPrice(<?php echo $id;?>)" required="">

here id is dynamic like

product-unit-price-0

product-unit-price-1

product-unit-price-2

product-unit-price-3

and so on..

here its working for only the first id (product-unit-price-0) ,but not for rests. Its all the things.

Suggest me.

thank you.

Answer 1

I think you are using $("input[id^='product-unit-price-']") to refer the element inside the handler in this case while applying val() method which always return the value of the first element, not the element which is fired the event. In such case use $(this) to refer the element where this refers to the dom object of event fired element.

$("input[id^='product-unit-price-']").keydown(function (event) {
    // refer element by `$(this)`    
})

---

FYI : It's always better to provide a common class for the group of the element and select based on that which is the better way to do it.

Answer 2

Why you not go with class selector?

$(".form-control.pro-input.valfields").keydown(function (event) {
// your logics here
}

Because from class selector you can select set of same class group elements and apply event on each element of set.