I'm a fairly new to jQuery and the world of Javascript in general, so bear with me please.

I have a form that will be used only via touch-screen, so checkboxes/radio buttons are all hidden and checked and unchecked via clicks on their respective labels. That works great. The problem that has surfaced is I am putting "sub-options" in a div which is then being initiated as a dialog on page load and taking those checkboxes and radio buttons out of the form element because jQuery puts the dialog elements at the very bottom of the page.

The relevant javascript looks like this right now :

2. //setup modal boxes for list type amenities
3. $('div.options').dialog({
4. autoOpen:false,
5. modal:true,
6. resizable:false,
7. show: 'slide',
8. hide: 'slide',
9. });
10. $('label.list').click(function(){
11. $('div#'+$(this).attr('rel')).dialog('open');
12. });
13. $('.hidden_radio').change(function(){
14. if($(this).attr('checked') == true){
15. $(this).parent().css('background-color','#fff');
16. $(this).parent().siblings('li').css('background-color','transparent').css('color','#000');
17. $(this).siblings(':first').css('color','#000');
18. }
19. else{
20. $(this).parent().css('background-color','#800');
21. $(this).siblings(':first').css('color','#fff');
22. }
23. $(this).parents('div.options').dialog('close');
24. console.log($(this).parents('div.options').attr('id'));
25. $('label[rel='+$(this).parents('div.options').attr('id')+']').css('color','#000')
26. .parent().css('background-color','#fff');
27. }); 

And the DOM looks like this (BEFORE dialog() is called) :

2. <form>
3. <!-- other inputs -->
4. <li class='nav amen'> 
5.     <label class='list' rel='option22'>Complex</label> 
6.     <div id="option22" class="options"> 
7.         <ul> 
8.     <li> 
9. <label for='amen[22][0]'>Blossom Hollow</label> 
10. <input type='radio'
11. name='amen[22]'
12. id='amen[22][0]'
13. value='Blossom Hollow'
14. class='hidden_radio' /> 
15.     </li> 
16.     <li> 
17.                 <label for='amen[22][1]'>Bird's Eye View</label> 
18.                 <input type='radio'
19.                  name='amen[22]'
20.                  id='amen[22][1]'
21.                          value='Bird&#039;s Eye View'
22.                  class='hidden_radio' /> 
23.             </li> 
24. </ul> 
25.     </div> 
26. </li> 
27. </form>

But when I call dialog() on 'div.options', it moves those divs down to the bottom of the DOM outside of the form and those inputs no longer get submitted with the post data.

The 'easy' solution in my mind is to force jQuery to attach those divs to some parent element inside the form, but I can't find any option to pass to do that, and I'm not sure if that might somehow interfere with how jQuery handles the display and hiding of the dialog windows.

The other solution I've thought of is to keep the form elements outside of the 'div.options' so they stay inside the form and only the labels get moved out.. I don't think that'd mess up the activation of the elements with my previously mentioned jQuery, but the php on the backend will be a mess.

Thoughts/other solutions? Thanks much.