title: Jquery modal form clear values
body: <p>I am using a JQuery model form with Ajax to allow users to enter new values for a select box without reloading the page - they click Add and it loads the modal form where they enter data into a text box which submits to MySQL via Ajax and then they click Update on the page and it refreshes the select contents so the newly added item is now available without the actual page reloading and any content being lost.</p>
  
  <p>The problem I have is that if they click Add and then Add again or even Add, then Update and then Add when they come back to the form it has the previous value stored in it - how can I clear this value?</p>
  
  <p>I have set the value on the form field to value="" to no avail and have also tried adding</p>
  
  <pre><code>close: clearForm
  </code></pre>
  
  <p>to the dialog definition and also resetting the var to null in the success function</p>
  
  <pre><code>name = null;
  </code></pre>
  
  <p>Found a suggestion on <a href="https://stackoverflow.com/questions/6284838/jquery-ui-dialog-modal-form-caching-old-values-in-ajax-application">JQuery UI dialog modal form caching old values in AJAX application</a> to clear the value</p>
  
  <pre><code>$('#divForm').remove();
  </code></pre>
  
  <p>However the value is still there - how can I stop it showing between uses?</p>
  
  <pre><code>$(function() {
      $( "#form-dialog" ).dialog({
          autoOpen: false,
          width: 500,
          title: "Add department",
          modal: true,
          buttons: {
              "Submit": function() {
                  var name = $( "#dept_name" );
                  $.ajax({
                  type: "POST",
                  url: "dept-add.php",
                  data: "dept_name=" + name.val(),
                  success: function(){
                      }
                  });
                  $( this ).dialog( "close" );
  
              },
              Cancel: function() {
                  $( this ).dialog( "close" );
              }
          },
      });
  
      $( "#form-dialog-btn" ).click(function() {
              $( "#form-dialog" ).dialog( "open" );
      });
  
      $('.refresh-dept').on('click', function(e){
          e.preventDefault();
          $('.dept').load('dept.php');
      });         
  
  
  });
  </code></pre>