title: jquery how to clear out modal input fields for reuse
body: <p>I have a modal form using jquery and twitter bootstraps. I have set up the modal so when the person cancels the form, / closes the modal i clear out the input fields. however if the person activates the modal again and enters values in to the fields, the dom still sees the field value as null. </p>
  
  <p>here is my form html</p>
  
  <pre><code>&lt;div class="modal fade in" id="forgotPassModal" data-b-view="ForgotPass" data-brite-cid="bview_1" tabindex="-1" aria-hidden="false" style="margin-top: -152.66666662693024px;"&gt;
  &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3&gt;Security questions:&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
      &lt;p&gt;
          Please answer the following security questions, click 'Submit', and you
          will receive an email containing instructions on how to change your password.
      &lt;/p&gt;
      &lt;div class="form-horizontal"&gt;
          &lt;fieldset id="forgotPassForm"&gt;
  
              &lt;div class="control-group"&gt;
                  &lt;label class="span3" "label_4"=""&gt;What was the last name of your third grade teacher?&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" class="input-large" id="forgotPass_4"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="clearfix"&gt;&amp;nbsp;&lt;/div&gt;
  
              &lt;div class="control-group"&gt;
                  &lt;label class="span3" "label_165"=""&gt;What is your maternal grandmother's maiden name, please provide full name?&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" class="input-large" id="forgotPass_165"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="clearfix"&gt;&amp;nbsp;&lt;/div&gt;
  
          &lt;/fieldset&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Cancel&lt;/button&gt;
      &lt;button class="btn btn-primary forgotPassSubmit"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and here is my jquery</p>
  
  <pre><code>    for (var i = 0; i &lt; $forgotPassQuest.questionId.length; i++){
      var questionId = $forgotPassQuest.questionId[i]['id'];
      $('#forgotPass_' + questionId).val(null);
  }
  
  $('#forgotPassModal').modal({show:true})
  $('.forgotPassSubmit').click(function() {
      var questAnswered = true;
      for (var i = 0; i &lt; $forgotPassQuest.questionId.length; i++){
          var questionId = $forgotPassQuest.questionId[i]['id'];
          questionField = $('#forgotPass_' + questionId);
          questionFieldVal = questionField.val();
          if (questionFieldVal == '' || questionFieldVal == null){
              questAnswered = false;
          } else {}
      }
      if (questAnswered == true) {
          submitAnswers();
      } else {
          alert('please complete your security questions.');
      }
  })
  $('#forgotPassModal').on('hidden', function () {
      $('#forgotPassModal').remove();
  });
  </code></pre>
  
  <p>now the form is dynamic and can change from user to user. Any ideas on a way t clear the form out on cancel/close but still let the value be recognized when the user does change the value?</p>