title: How to call jquery dialog box on button click and not on document.ready
body: <p>I don't know anything about jquery and I've just downloaded all the files for the jqueryUIdialog.</p>
  
  <p>I am trying to work with it for a whole day now.</p>
  
  <p>I have a form where the user captures some stuff and can also click on a button that opens another form. </p>
  
  <p>I want to open the second form in the dialog box, and when the form is submitted, get back to the first form and continue capturing other details.</p>
  
  <p>The problem is I've tried to transfer the data that was captured on the first form with: document.getElementById, but there is nothing there since the dialog box function is being called on document.ready, when nothing was captured yet.</p>
  
  <p>Is there a way to load a page to the dialog on button or link click and not on document.ready?</p>
  
  <p>Here is my javascript code:</p>
  
  <pre><code>$(document).ready(function() {
      var $dialog = $('&lt;div&gt;&lt;/div&gt;')
      var day = document.getElementById('day').value;
  
      var qry = '?day=' + day;
  
      .load('orderSandwich.php'+qry)
              .dialog({
                  autoOpen: false,
                  title: 'Sandwitch Order',
                  width: 700
              });
  
     $('#sandwich').click(function() {
         var day = document.getElementById('day').value;
         $dialog.dialog('open');
         // prevent the default action, e.g., following a link
         return false;
     });
  });
  </code></pre>
  
  <p>The day value is empty, because the user didn't get a chance to put anything before the document.ready is triggered.</p>
  
  <p>The first form code:</p>
  
  <pre><code>&lt;input type="text" name="day" id="day" /&gt;
  &lt;button id="sandwich"&gt;Sandwich&lt;/button&gt;
  </code></pre>
  
  <p>Hope you can understand my question.</p>
  
  <p>Thank you,</p>
  
  <p>Sigal</p>