We Keep Coding

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

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.

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.

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.

jQuery selector to find inputs inside a div

I have HTML like this:
<div class="s-item s-question">
<label>label text</label>
<div>
<input name="s1" type="checkbox" class="switch-indeterminate k-input"
data-indeterminate="true"
data-on-text="Yes"
data-off-text="No" />
</div>
</div>
Dynamically with jQuery, how can I select that input? I want to determine when a change occurs.
The highest level div will always have class s-item but instead of a checkbox, sometimes I might have a button or a select box, etc.
So I thought maybe $('.s-item').find('select, input, button').change(function() { ... }); would work? But it didn't.
What should I do?

The "change" event is only valid on input, select, and textarea elements. It doesn't work because you are attempting to assign it to a button element.
$('.s-item').find('select, input, textarea').change(function() { ... });
should work.
It would be cleaner simply to assign a class to the items you care about, so you could just do
$(".s-change-watch").change(function() { ... });
which better separates the semantics of markup (like what element type it is) from functionality.

You can simply do the following to get the checkbox then check the value
$('.s-item div input')
or just give the input an id or class and select that.

Exclude Element from .html()

I have to remove a specific element (button with #add_phone) from .html() of jquery.
So here's the thing. At first there are field(phone number) + select(phone type) + button(#add_phone), and all three are enclosed in div as a container. And when I click the button, it will recreate that through .html().
The JS is as follows:
$('#add_phone').click(function() {
$('div.multiple_number:last').after('<div id="phone_div_id' + phone_div_id + '" class="multiple_number">'+ $('div.multiple_number').html() +'</div>');
...
//append a remove [-] button, etc...
});
and here's the html:
<div class="multiple_number" id="phone_div_id0">
<label>Phone Number(s):</label>
<input name="phone" id="phone[]" placeholder="Phone Number"/>
<select name="phone_type[]" id="phone_type">
<option value="1">Mobile</option>
<option value="2">Home</option>
<option Value="3">Office</option>
<option Value="3">Fax</option>
</select>
<input type="button" name="add_phone" class="add_phone_class" id="add_phone" value="ADD MORE" />
</div>
So in effect, I am creating multiple phone numbers for a form. But, here's the problem. Inside is an input type="button" (#add_phone button). And I would want to exclude it from .html().
I have tried:
$('div.multiple_number:not(#add_phone)').html()
$('div.multiple_number:not(input#add_phone)').html()
$('div.multiple_number:not(#add_phone)').not(#add_phone).html()
$('div.multiple_number:not(#add_phone)').not(input#add_phone).html()
And the class name counterpart instead of using id name. I wouldn't also want to place the #add_phone button outside the div, for aesthetics reason.

I'm a little bit unclear about what you're looking for, but I assume that when the #add_phone button is clicked, you want the form to be duplicated and added below it with the exception of the #add_phone button itself.
Working off that assumption, the following should work
$('#add_phone').click(function() {
var numberForms = $('div.multiple_number');
var newNumberForm = numberForms.eq(0).clone(true);
newNumberForm.find('#add_phone').remove();
newNumberForm.attr('id', 'phone_div_id' + numberForms.length);
numberForms.last().after(newNumberForm);
});
Here's a live jsfiddle demo to show it working.
Your initial attempts didn't work for a few reasons. The main one being that :not() selector and .not() methods only operate on the element being selected. It doesn't filter based on child elements. Those methods would only work if the element you were selecting <div class="multiple_number" /> also had the ID add_phone.
Also, it is not recommended to use .html() as a way of cloning methods. Using string manipulation as an alternative to direct DOM manipulation can cause problems later on. Using .html() will force you to have to re-bind event handlers to the newly created DOM elements. The strategy I've provided above should be more future-proof, since it will also clone event handlers for any elements being copied. There are also cases where certain browsers will not replicate the original elements exactly when calling .html(), which is another reason to avoid it unless you have a specific reason for serializing your DOM elements as a string.

Try this instead :
var innerHTML = $("div.multiple_number").html()
.replace($("div.multiple_number input#add_phone").html(), "");
Good Luck

jquery find function

How I can select a specific a element id whit jquery find?Or it is even possible?
HTML:
<div id="bar">
<a id="1" href="#"></a>
<a id="2" href="#"></a>
<a id="3" href="#"></a>
<a id="4" href="#"></a>
</div>
Javascript:
$('#bar a').find('id',2).css("background-color","blue");
But dosen't work

IDs must be unique, so simply use $('#2') to select the element. There is usually no need to make an ID selector more specific and doing so would just slow it down.
Besides that, unless you are using HTML5, an ID cannot start with a number. Use e.g. whatever-2 instead of just 2

$('#bar a#1')
will select the with id '1'.
Alltho, #1 is not a valid ID-name, they can't begin with a number, I think.

Either finding a descendant
$('#bar').find('#2').css("background-color","blue");
or filtering a descendant
$('#bar a').filter('#2').css("background-color","blue");
or getting via context:
var parent = $('#bar');
$('#2',parent).css("background-color","blue");
or get it directly! since IDs are unique anyway (unless you move this element often in the page, which is why you need the parent):
$('#2').css("background-color","blue");

You can use eq method for get element by index http://api.jquery.com/eq/
$('#bar a').eq(2).css("background-color","blue");

There is no point using find() to search for id, since by definition id has to be unique. Find() function is better when you want to find a class or html tag elements inside any parent element. Good example from documentation: when you want to change css of all spans inside specific element, use find:
$("p").find("span").css('color','red');

you could try $("#bar").find("#2").css("background-color", "blue");
and as ThiefMaster says u can always use $("#id").css("background-color", "blue");

How to remove prev . prev object? Javascript .prev().remove();

It's like
<input name="fails[]" type="file" size=40 /><br />
<textarea name="apraksts[]">About</textarea>
<a href="#" onclick="remove(this);return false".....>remove</a>
And the javascript:
function remove(obj){
$(obj).prev('textarea').remove();
$(obj).prev('input').remove();
$(obj).remove();
}
Why it doesnt remove INPUT(why it doesnt remove two objects)?
Thanks..

The documentation for prev says it:
Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.
After you remove the <textarea>, that element is a <br>. Since it doesn't match input, the resulting jQuery object contains no elements. You then remove those 0 objects.
I suspect a better approach to the problem would be to wrap all the elements in a <div> (or a container with more suitable semantics for the context) and remove that (instead of removing each element in turn).

Or you can also use prevAll. That will select all previous sibling elements which are then filtered by your selector:
$(obj).prevAll('input').remove();