title: How to clear modal values after submitting
body: <p>I am new to Meteor and Javascript.  I have slowly figured out how to set up a modal form that will show up when I click a button, and can capture my form data and have the form close when I click submit.  Where I am stuck is that whenever I click the button to add more data, the previous values are still in the modal form.  I have tried most of the other answer and examples I have found, but I can't seem to figure out what I need to do to make it clear the values.  Any suggestions would be appreciated.  Here is what I have currently:</p>
  
  <p>Modal Template</p>
  
  <pre><code>&lt;template name="addButton"&gt;
    &lt;div class="modal fade" id="addButton"&gt;
    &lt;form&gt;
      &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Add Button&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form role="form"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="buttonOrder"&gt;Button Order&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="buttonOrder"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="buttonName"&gt;Button Name&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="buttonName"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="buttonDescription"&gt;Button Description&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="buttonDescription"&gt;
              &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
          &lt;input type="submit" value="Submit" class="btn btn-primary"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
    &lt;/form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Modal JS Helper</p>
  
  <pre><code>Template.addButton.events({
      'submit form': function(e) {
          e.preventDefault();
  
          var button = {
              buttonOrder: $(e.target).find('[name=buttonOrder]').val(),
              buttonName: $(e.target).find('[name=buttonName]').val(),
              buttonDescription: $(e.target).find('[name=buttonDescription]').val()
          }
          button._id = Buttons.insert(button);
  
          $('#addButton').modal('hide');
          $(this).removeData('#addButton.modal');
      }
  })
  </code></pre>
  
  <p>@Jeremy-s</p>
  
  <p>I couldn't get your suggestion to work, although the Session key suggestion got me a solution that did for work with Bootstrap 2 but not with Bootstrap 3.  I did finally get things working with Bootstrap 3, although I doubt it is the most elegant solution.  I added ids to the elements and just set the value for each element to null like so:  </p>
  
  <pre><code>$('#addButton').modal('hide')  
  $('#buttonOrder').val(null);  
  $('#buttonName').val(null);  
  $('#buttonDescription').val(null);
  </code></pre>
  
  <p>Now I just need to figure out why I can't get it to work with the Session key and Bootstrap 3.</p>