Ask your WordPress questions! Pay money and get answers fast! (more info)

Simple JS Help WordPress

  • SOLVED

Trying to add a custom 'other' field to a gravity forms list field. The problem is the inputs don't use id's only classes, so I can't target them directly. I tried using the jquery next() function but couldn't get a result.

Here is what I am working with:

jQuery(document).ready(function($){
$('li#field_8_7 .gfield_list_7_cell1 select').change(function(){
var selected_item = $(this).val()

if(selected_item == " Other"){
$(this).next('.gfield_list_7_cell2 input').removeClass('hidden');
}else{
$(this).next('.gfield_list_7_cell2 input').addClass('hidden');
}
});
});


Example is here : [[LINK href="http://ktrusak.com/service-2/#gf_8"]]http://ktrusak.com/service-2/#gf_8[[/LINK]]

Answers (1)

2013-06-29

Dbranes answers:

You can try this:

jQuery(document).ready(function($){
$('li#field_8_7 .gfield_list_7_cell1 select').change(function(){
var selected_item = $(this).val()
if(selected_item == " Other"){
$(this).parent().parent().find('.gfield_list_7_cell2 input').first().removeClass('hidden');
}else{
$(this).parent().parent().find('.gfield_list_7_cell2 input').first().addClass('hidden');
}
});
});


or this one:

jQuery(document).ready(function($){
$('li#field_8_7 .gfield_list_7_cell1 select').change(function(){
var selected_item = $(this).val()
if(selected_item == " Other"){
$(this).closest('tr').find('.gfield_list_7_cell2 input').removeClass('hidden');
}else{
$(this).closest('tr').find('.gfield_list_7_cell2 input').addClass('hidden');
}
});
});


or:

jQuery(document).ready(function($){
$('li#field_8_7 .gfield_list_7_cell1 select').change(function(){
var selected_item = $(this).val()
if(selected_item == " Other"){
$(this).closest('tr').next('.gfield_list_7_cell2 input').removeClass('hidden');
}else{
$(this).closest('tr').next('.gfield_list_7_cell2 input').addClass('hidden');
}
});


Kyle comments:

Thanks for the reply

The first one is working perfectly, just not on new rows


Dbranes comments:

When I add a new row, I get this error:

Uncaught TypeError: Property '$' of object [object Object] is not a function

function KR2(){
$('li#field_8_7 .gfield_list_7_cell1 select').change(function(){


Kyle comments:

Sorry about that, should be fine now


Dbranes comments:

Try this:

jQuery(document).ready(function($){
$('li#field_8_7 .gfield_list_7_cell1 select').live('change',function(){
var selected_item = $(this).val()
console.log(selected_item);
if(selected_item == " Other"){
console.log("hide");
$(this).closest('tr').find('.gfield_list_7_cell2 input').removeClass('hidden');
}else{
console.log("show");
$(this).closest('tr').find('.gfield_list_7_cell2 input').addClass('hidden');
}
});
});


where I added 'live' to listen to the dynamically generated rows.


Kyle comments:

Beautiful, thank you so much this worked perfectly :)


Dbranes comments:

ok great

ps: I reversed the debug text messages hide/show, so you should just remove them ;-)