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)
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 ;-)