Change position of sub-labels on advanced fields

On this form, we would like the sub-labels to appear above the boxes rather than below. How can I make this change?

http://www.careerprocanada.org/cpc-application-for-approval/

Hi Carl,

The jQuery snippet on that page wasn't quite right (at least it didn't work for me!). I've modified it slightly as follows, this isn't a fully tested method however.

<script type="text/javascript">
      jQuery(document).ready(function() {

          jQuery('.ginput_container label').each(function(i,e){
              fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
              jQuery(e).siblings('.ginput_container input').before(fielddesc); //moves sub label above input fields
              jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
              jQuery(e).remove();
          });

      });
  </script>

I edited this a little for my form, since the code above was making my radio labels wonky. This code is the same as above except it selects text inputs specifically while making an exception for radio buttons. Hope someone finds it useful!

<script type="text/javascript">
      jQuery(document).ready(function() {

          jQuery('.ginput_container label').each(function(i,e){
              fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
              jQuery(e).siblings('.ginput_container input:text').before(fielddesc); //moves sub label above input fields
              jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
              jQuery(e).siblings('.ginput_container .gfield_radio input').after(fielddesc); //keep label above radio buttons
              jQuery(e).remove();
          });

      });
  </script>

You missed a line... Without it, checkbox fields don't work. Here's the correct code.

[js]
<script type="text/javascript">
      jQuery(document).ready(function() {

          jQuery('.ginput_container label').each(function(i,e){
              fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
              jQuery(e).siblings('.ginput_container input:text').before(fielddesc); //moves sub label above input fields
              jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
              jQuery(e).siblings('.ginput_container .gfield_radio input').after(fielddesc); //keep label above radio buttons
              jQuery(e).siblings('.ginput_container .gfield_checkbox input').after(fielddesc); //keep label above checkboxes
              jQuery(e).remove();
          });

      });
  	</script>

Actually, this isn't right either.. It doesn't move the email field descriptions...

Unfortuantely, I'm sick, and my coding ability is about 0 today.

I tried adding this:

jQuery(e).siblings('.ginput_container input:email').before(fielddesc);

But, it doesn't work..

Anyone who's not sick care to fix my mistake? Then, it should actually work correctly :)