title: How to loop over and track all form fields
body: <p>I would like to keep track of all form fields so that I can do different tasks e.g. validation, animation, etc. Currently I have the code written out in long form which repeats itself quite a bit. How can I get each <code>text</code> or <code>textarea</code> or <code>email</code> input from an HTML form and track it, while being able to update it's associated label?</p>
  <p>Current code which works but is redundant:</p>
  <pre><code>&lt;script&gt;
      $username = $('#id_name');
      $usernameLabel = $('#name_label');
      $email = $('#id_email');
      $emailLabel = $('#email_label');
      $subject = $('#id_subject');
      $subjectLabel = $('#subject_label');
      $message = $('#id_message');
      $messageLabel = $('#message_label');
  &lt;/script&gt;
  &lt;script src=&quot;{% static 'js/landingFloatingField.js' %}&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p><strong>landingFloatingField.js</strong>:</p>
  <pre><code>// Freezes the floating labels above the form fields
  $(function() {
      // Save current value of element
      $username.data('oldVal', $username.val());
  
      $username.bind('properties change click keyup input paste', function(event) {
          // If value has changed...
          if ($username.data('oldVal') !== $username.val()) {
              // Updated stored value
              $username.data('oldVal', $username.val());
              // Add freeze class
              $usernameLabel.addClass('freeze');
              // If the new value has length
              if (!$username.val().length){
                  $usernameLabel.removeClass('freeze');
              }
          }
      });
      // Save current value of element
      $email.data('oldVal', $email.val());
  
      $email.bind('properties change click keyup input paste', function(event) {
          // If value has changed...
          if ($email.data('oldVal') !== $email.val()) {
              // Updated stored value
              $email.data('oldVal', $email.val());
              // Add freeze class
              $emailLabel.addClass('freeze');
              // If the new value has length
              if (!$email.val().length){
                  $emailLabel.removeClass('freeze');
              }
          }
      });
  ...
  </code></pre>
  <p><strong>HTML</strong>:</p>
  <pre><code>&lt;form id=&quot;contactForm&quot; method=&quot;POST&quot; action=&quot;/contact/&quot;&gt;
                      {% csrf_token %}
  
                      &lt;fieldset class=&quot;mb-4&quot;&gt;
                          &lt;div class=&quot;form-row mt-4&quot;&gt;
  
                              &lt;!-- Name --&gt;
                              &lt;div class=&quot;form-group form-field col-md-6&quot;&gt;
                                  &lt;input type=&quot;text&quot;
                                         name=&quot;name&quot;
                                         class=&quot;textinput textInput form-control&quot;
                                         id=&quot;id_name&quot;
                                         value=&quot;{% if form.name.value %}{{ form.name.value }}{% endif %}&quot;&gt;
                                  &lt;label class=&quot;form-label {% if form.name.value %}freeze{% endif %}&quot;
                                         for=&quot;id_name&quot;
                                         id=&quot;name_label&quot;&gt;Name&lt;/label&gt;
                                  {% if form.name.errors %}
                                  {% for error in form.name.errors %}
                                  &lt;p class=&quot;text-danger font-weight-bold m-1&quot; id=&quot;errors_name&quot;&gt;{{ error|escape }}&lt;/p&gt;
                                  {% endfor %}
                                  {% endif %}
                              &lt;/div&gt;
  </code></pre>