How do I hide render elements if a checkbox that controls a form #state is checked?

Question

I have a form where a user can either choose a gallery field to populate or a video field to populate but they have to choose one of the other -- there can't be a video and gallery on a page.

The logical way to do this is make three seperate content types, an article, a video and a gallery. However, since they all function about the same and an article could be about a video or a slideshow. Nevertheless, there isn't a case where a slideshow and video should be together. If they user wants video and images they can embed images through wysiwyg.

Using the #state mechanism, I have a select radios field that has the option of none, video, or image / gallery. This is set to hidden in the content display interface. If they choose image then the file field widget shows and if they choose video then the youtube field shows (once again I could use Media but that is huge and overkill for this application.)

---

The interface is quite sweet.

---

.

---

However, there is a problem because here a slideshow gallery has been created before the user decided to use a youtube video embedded.

---

What is the best practice for hiding the image gallery if the Youtube setting has been choosen? Do I make the media setting visible and then hide it and the image gallery? This doesn't make good sense because it is processed and therefore ineffient doing extra work. I don't want to force the form field to be deleted because then the work is lost. It just shouldn't be processed rather than have work deleted in the case the user would like to revert from one to the other. Any ideas?

EDIT:

I tried this code which works but I don't know if it's the best practice.

function helper_preprocess_node (&$variables) {
  switch ($variables['type']){
    case 'article':
      if (isset($variables['field_article_media'][0]['value'])){
        if ($variables['field_article_media'][0]['value'] == 'gallery'){
          unset($variables['content']['field_youtube']);
        }
        if ($variables['field_article_media'][0]['value'] == 'video'){
          unset($variables['content']['field_image']);
        }
        unset($variables['content']['field_article_media']);
      }
      break;

    default:
      break;

  }
}

Answer 1

You are right, a 3rd party module is overkill for this! I often find myself using a small js file to spice up the #states behavior. You can pretty much even bybass #states totally with this mecanism, but hey. #states is the drupal way of doing things. That does not mean it can't be assisted with JQuery.

Here is a quick snippet of my current quick project that is a form in a webform using the techniques (#states + jQuery) to tweak many things in the ui depending on what options are selected. This code should be in a .js file, loaded in module by the module's .info file, or you can have it in a drupal_add_js call.

I left all in there so you can see how with jQuery you can control fieldsets, option boxes and most anything you can think of. Notice also if you fancy as a bonus you can integrate all the jquery native animation functions like fadeIn() fadeOut(). There are also examples of that in the code below.

(function ($) {  // Notice code is in a behavior, use your module name
  Drupal.behaviors.yourModuleNameHere = {
    attach: function (context, settings) {

  // On load hide stuff. This will be shown when options are selected.
  $('#webform-component-inscription--enfant-1').removeClass('collapsed');
  $('#webform-component-inscription--enfant-2').removeClass('collapsed');
  $('#webform-component-inscription--enfant-1').hide();
  $('#webform-component-inscription--enfant-2').hide();
  // $('.form-submit').hide();

  $('#webform-component-inscription--information-supplementaire').hide();
  $('#edit-submitted-inscription-nombre-denfants', context).change(function () {

    var selected_option = $(this).val();

    if(selected_option === "1"){
        $('#webform-component-inscription--enfant-1').removeClass('collapsed');
        $('#webform-component-inscription--enfant-1').fadeIn(800);
        $('#webform-component-inscription--enfant-2').fadeOut(800);
        $('.form-submit').fadeIn(800);
        $('#webform-component-inscription--information-supplementaire').fadeIn(1000);
    } 
    else if(selected_option === "2"){
        $('#webform-component-inscription--enfant-1').fadeIn(800);
        $('#webform-component-inscription--enfant-2').fadeIn(1500);
        $('#webform-component-inscription--information-supplementaire').fadeIn(2200);        

    } else {     
          $('#webform-component-inscription--enfant-1').fadeOut(800);
          $('#webform-component-inscription--enfant-2').fadeOut(800);
          $('.form-submit').fadeOut(800);
          $('#webform-component-inscription--information-supplementaire').hide();
          console.log("in extra information."); 
         // $('#webform-component-inscription--enfant-1').addClass('collapsed');
        //  $('#webform-component-inscription--enfant-2').addClass('collapsed');
        } 
      });        
    }
  };
}(jQuery));

Of course, this method I am using only acts on the presentation layer, if the fields you want to act on needs to be validated, a server-side call is probably needed anyways and your method is probably better in that case.