Question

i did asked this before, but my client wanted to create a little functionality over the questionnaires. he wants all “Notes text-field” will be hidden if it is empty. it will be visible only if the “Notes text-field” have value. also the Yes / No radio button need to be updated / checked as well if there’s a value or no value. here’s the previous code that “insomniac” did.

$('.notes').hide();
$('input[type="radio"]').change(function () {
  if ($(this).val() == "Yes") {
    $(this).closest('tr').next('tr.notes').slideDown();
  } else {
    $(this).closest('tr').next('tr.notes').slideUp();
  }
});

however, i need to validate first the text-field if there’s a value (actually 1 to 33 text-field will be use here and most of it will have value).

var vals = $('.notes input[type="text"]').val(); 
if(vals == "") {
  console.log('negative');
  $('tr.notes').slideUp();
} else {
  console.log('positive');
  $('.query input[value="Yes"]').attr({
    checked: "checked"
  });
  $('tr.notes').slideDown();
}

here’s the original format of what i am discussing… jQuery Bind or Index Form and Insomniac Demo

Answer 1

after some research and non-stop working the script. i finally decide to update the code into basic settings. “im not a programmer” actually…

$(".report-notes fieldset").each(function (i) {
i = i+1;
$(this).addClass("item"+i);
$('.item'+i+' input[type="radio"]').on('change',function(){
    if($(this).val() == 'Yes') {
        $('.item'+i+' .notes').slideDown();
    } else {
        $('.item'+i+' .notes').slideUp();
    }
});

$(document).ready(function(){
    var notes = $('.item'+i+' .notes input[type="text"]').val();
    if(notes === '') {
        console.log('walang laman');
        $('.item'+i+' .notes').hide();
    } else {
        console.log('meron laman');
        $('.item'+i).find('input[value="Yes"]').attr({
            checked: "checked"
        });
        $('.item'+i+' .notes').slideDown();
    }
});
});

Updated Fiddle Source