Question

I am trying to mimic the HTML form present on this link: http://maati.tv/uploads/
I am making it to put on a company’s Facebook page.

Now, the issue I am running into is that I am unable to display different fields depending upon the select radio button. I know it requires JavaScript. I’ve got the related script from this link: https://stackoverflow.com/a/14127709/1315163

$(".radioSelect").each(function () {
  showSpecificFields(this);
});

$(".radioSelect").click(function () {
  showSpecificFields(this);
});


function showSpecificFields(obj) {
  if ($(obj).is(":checked")) {
    var radioVal = $(obj).val();
    $(".fieldsSpecific").each(function () {
      if ($(this).attr('id') == radioVal) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  }
}

Can anyone please help me with it? Rest of the code is in this jsFiddle: http://jsfiddle.net/DDJNc/2/

Thanks.

Answer 1

Your answer:

$(".radioSelect").each(function(){
    showSpecificFields(this);
});

$(".radioSelect").click(function(){
   showSpecificFields(this);
});

function showSpecificFields(obj){
    if($(obj).is(":checked")){
    var radioVal = $(obj).val();
     $(".fieldsSpecific").not('.'+radioVal).each(function(){
         $(this).hide(); 
     });
     $(".fieldsSpecific."+radioVal).each(function(){
         $(this).show(); 
     }); 
    }
}

Check the HTML also

http://jsfiddle.net/DDJNc/4/

. (dot) css selector selects elements containing a given class. That class SHOULD BE present on your HTML for it to work!

Don’t use the id attribute for that because you are trying to match a set of elements that belong to a class and not a single element.