title: losing form fields - using jquery dialog modal
body: <p>I have a form. Within this form I am using a modal dialog, showed by a button click. The dialog contains a div including some input fields of the same form. Its contents are never transmitted to the server (method POST), so I started to debug a little bit...</p>
  
  <ol>
  <li>When I don't open the dialog, the fields are available (server side)</li>
  <li>When I open the dialog and type some values into the fields, the fields are no longer transmitted (not available)</li>
  <li>If I don't hide (display: none) the div  - the field are visible when the form is loaded - and I fill it out without using the modal dialog , there are transmitted. </li>
  </ol>
  
  <p>-> Why does the dialog "remove" the fields from my form??? </p>
  
  <p>Thank you for any input!
  Urs</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button type="button" id="opener"&gt;other, please click here&lt;/button&gt;
  
  &lt;div id="dialog-modal" title="type in the new elements:" style="display: none"&gt;
  &lt;p&gt;country:&lt;input type="text" class="small" id="othercountry" name="othercountry" value=""  &lt;/p&gt;
  &lt;p&gt;ccode:&lt;input type="text" class="small" id="othercountryCode" name="othercountryCode" value=""&gt;&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script&gt;
  $( "#opener" ).click(function() {
      $( "#dialog-modal" ).dialog({
         height: 140,
         modal: true
      });
      $( "#dialog-modal" ).bind('dialogclose', function(event) 
        { do some other things, not relevant for the form }
      );
  });
  &lt;/script&gt;      
  </code></pre>
  
  <p>jQuery 1.8.2</p>