title: jQuery dialog remembers previously typed text in <input> field
body: <p>I know that there are several questions which are similar, but none have worked for me.</p>
  
  <p>I'll start by explaining how the jQuery Dialog is invoked. I have a page, where there is a button which is used to invoke the dialog:</p>
  
  <pre><code>&lt;input type="button" class="..." value="..." onclick="forwardToEmail();"/&gt;
  </code></pre>
  
  <p>On the same page I also have the following hidden div:</p>
  
  <pre><code>&lt;div title="..." id="SendToemailDialog" style="display:none&gt;
     &lt;p&gt;...&lt;/p&gt;
     &lt;input type="text" name="Email" id="SendToemail" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The function <code>forwardToEmail</code>:</p>
  
  <pre><code>function forwardToEmail() {
   //$('#SendToemail').val(''); --&gt; Does not solve the problem
   $('#SendToemailDialog').dialog({
       resizable: false,
       draggable: false,
       height: 200,
       modal: true,
       buttons: {
           "OK": function () {
               $(this).dialog("close");
               var email = $('#SendToemail').val();
  
               //POST request removed to make example simpler 
  
               $('&lt;div title="Information"&gt;Sent to: ' + email + ' &lt;/div&gt;').dialog({
                   resizable: false,
                   draggable: false,
                   height: 140,
                   modal: true,
                   buttons: {
                       "OK": function () {
                           $(this).dialog("close");
                       }
                   }
               });
           },
               "Cancel": function () {
               $(this).dialog("close");
           }
       },
       close: function (event, ui) {
           //Another thing tried to solve the problem wihtout luck
           $('#SendToemailDialog').dialog("destroy");
       }
   });
   return false;
  }
  </code></pre>
  
  <p><strong>The problem:</strong></p>
  
  <p>Whenever the button is clicked, the dialog pops up and allows the user to enter an e-mail. That's all good. Now, when the button is clicked subsequently the dialog pops up again as expected with an <strong>empty</strong> textbox allowing the user to send to a different e-mail address. This looks fine.</p>
  
  <p>However, when OK is pressed it has actually sent an e-mail to the <strong>previously</strong> entered e-mail. The previous value of the textbox is not being overwriten by the new value.</p>
  
  <p>Even if I do the following: <code>$('#SendToemail').val('')</code> after sending the e-mail, or before sending the e-mail a second time, it does not work because when you enter a value in the textbox the second time it will now remember the previous value as just "" (empty string). </p>
  
  <p>I don't understand why it is insisting on using the previous value. If I refresh the page then it's OK the first time, but the second time the same problem will occur.</p>
  
  <p><strong>What I have tried:</strong></p>
  
  <p>As also hinted in the code as comments, I have tried to clear the textbox before the dialog is opened, and I have also tried various ways to destroy the dialog upon closing the dialog. Without luck.</p>
  
  <p>I'm suspecting it has something to do with the way the hidden div is used to show the textbox. The code is not mine I'm just trying to debug it to fix the error.</p>