Targeting Sharepoint form drop down

Question

I have a newform.aspx created through SPD. Its already contains a drop down list.

<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="Enquiry_x0020_Type" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Enquiry_x0020_Type')}"/>

I have some javascript that i want to invoke when the drop down list changes.

$(document).ready(function() {

$("#ff4{$Pos}").change(function() {
    alert("drop down change");     
    });});

But nothing happens, I tried adding my own drop down and using its ID and this works fine, but I cannot correctly target the existing SP form drop down.

Answer 1

More often than not, your rendered control will prepend or append your ID with something else to ensure it's unique (as Steve suggested). Out of the box SharePoint fields have a title attribute on the form element, which you can use to target with jQuery if needed. As a better practice, you should also be more specific with your CSS selector and type it to a select field, not just the ID.

If you were to add a title attribute, then you could use a selector like the following: $('select[title="My Field Title"]').change(function() { //do something });

You could also give the element a class, and pick it up that way: $('select.ClassName').change(function() { //do something });

The other question is how you're populating this. If $Pos is a variable in your XSL, then the field doesn't have an ID of ff4{$Pos}, it has an ID of whatever that variable is, ie: ff41 or ff42. Your JavaScript isn't going to render that XSL variable the same way, so it's not going to find the field. Use a DOM inspector like the IE or Chrome dev tools to see what that control is actually rendering as.

Answer 2

WHen the page is rendered and you view source, what ID is outputted? Is it the same as you gave it? My guess is ASP.NET will prepend some information to the ID to make sure it's unique. I would look to see what it is and change your JS to be that value.