jQuery event on NiceForms drop down change

Hi Guys,

I have a wired question here.

Im using niceForms to make my drop downs and below is what I have in my html

 
    <select style="width:1px;" class="NFhidden" size="1" id="aics_Enquiry" name="aics_Enquiry">
        <option value="0">General enquiry</option>
        <option value="1"> Request a statement</option>
        <option value="2"> Feedback</option>
        <option value="3"> Other</option>
    </select>

Open in new window


But when I use firbug on my drop down item, it shows the following html too which I just cant see on my Source code if I view it on the browser.

 
     <dd style="width:" class="relative fl">
     <div class="NFSelect" style="width: 5px; left: 767px; top: 593px; z-index: 999;"><img src="/templates/liberty/images/0.png" class="NFSelectLeft">
     <div class="NFSelectRight">Feedback</div>
     <div class="NFSelectTarget" style="display: none;">
     <ul class="NFSelectOptions">
     <li><a href="javascript:;">General enquiry</a></li>
     <li><a href="javascript:;">Request a statement</a></li>
     <li><a href="javascript:;" class="NFOptionActive">Feedback</a></li>
     <li><a href="javascript:;">Other</a></li>
     </ul>
     </div>
     </div>
     <select style="width:1px;" class="NFhidden" size="1" id="aics_Enquiry" name="aics_Enquiry">
     <option value="0">General enquiry</option>
     <option value="1"> Request a statement</option>
     <option value="2"> Feedback</option>
     <option value="3"> Other</option>
     </select>
     </dd>

Open in new window


My question is, I want to trigger a jquery event when someone changes the menu to 'Feedback' drop down item. How can I do this?

I Tried

$("#aics_Enquiry").change( function(){
	 if($(this)[0].value == 2){
	 $("#adminForm_1").html("hihi");
	 }
});
 

Open in new window


but no luck
udara22Asked:
Who is Participating?
 
ChrisConnect With a Mentor Commented:
This can be done using non-deprecated methods. Using the on() method will accomplish what you're after.

$(document).ready(function(){
	$(document).on('click', 'ul.NFSelectOptions li', 'a', function(){
		if($(this).text() == "Feedback"){
			$("#adminForm_1").html("hihi");
		}
	});
});

Open in new window

Be aware that you haven't actually added a div with an id of "adminForm_1" to your jsFiddle page so this will need adding before the code above will work.

I've added it all in for you here http://jsfiddle.net/N5t6A/
0
 
ChrisCommented:
Try this: (written on my phone so untested, please also be very aware of potential typos)
$("#aics_Enquiry").change( function(){
	 if($(this option:selected).val() == 2){
	 $("#adminForm_1").html("hihi");
	 }
});
 

Open in new window

0
 
udara22Author Commented:
@Demented_Goose : thanks. But no luck
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
ChrisCommented:
Managed to get to a PC. This works:

$("#aics_Enquiry").change( function(){
	if($(this).val() == 2){
	$("#adminForm_1").html("hihi");
}

Open in new window

0
 
udara22Author Commented:
Thanks. This works fine on standard drop downs, but not on niceForms as it creates dives and lis instead of select and hides the select drop down. You can see a working one here . http://www.emblematiq.com/lab/niceforms/
0
 
mcnuteCommented:
Please post us a link with your niceForm on it.
0
 
ChrisCommented:
As mcnute has said we ideally need to see a link to your working niceForm. Not being able to see it the best I can do is make a guess at what may work:

$(".NFSelectOptions > li > a").click(function(){
	if($(this).html()=="Feedback"){
		$("#adminForm_1").html("hihi");
	};
});

Open in new window

0
 
udara22Author Commented:
I understand. it on my localhost at the moment. give me a minute, i'll transfer it on to a server.
0
 
udara22Author Commented:
Also, is there any way I can share a localhosted website through the internet?
0
 
udara22Author Commented:
Hi guys, you can see it in here : http://jsfiddle.net/SDVYD/2/
0
 
mcnuteCommented:
although the live() method is deprecated it seems the only way to get through the select options in your niceform.

change the jquery in your jsfiddle to this:

$(document).ready(function(){
    $("ul.NFSelectOptions li").live('click', 'a', function(){
        console.log($(this).text());
     if($(this).text() == "Feedback"){
    console.log("hihi");
     }
});
});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.