title: Floating Label and Javascript Toggle Issues with HTML and CSS
body: <p>I have found a Floating Label script at CSSScript that is a fit for an upcoming project, but I' having issues decoupling the JS from the HTML that toggle the CSS style.</p>
  
  <p>Here's the <a href="https://jsfiddle.net/UXEngineer/qp121pgp/" rel="nofollow noreferrer"><strong>JSFiddle DEMO</strong></a> so you can understand the scenario.</p>
  
  <p>Here's just a small portion of the JS script that performs the toggle between the "Styles".  There's also a major JS component in the referred demo link above that handles the Styles.</p>
  
  <pre><code>new FloatLabels('.form-1', {
    style: 1
  });
  document.querySelectorAll('input[name="style"]').forEach(function(el) {
    el.addEventListener('change', function(ev) {
      var form = ev.target.closest('form');
      form.className = form.className.replace(/\b fl-style-\d\b/g, '') + ' ' + 
  ev.target.value;
    }, false);
  });
  </code></pre>
  
  <p>Here's the HTML form where the CSS Styles are picked from: </p>
  
  <pre><code>&lt;form class="form-1"&gt;
    &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
          &lt;label for="firstnamelabel"&gt;First Name&lt;/label&gt;
          &lt;input type="text" id="firstnamelabel" placeholder="First Name" value="" required /&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
          &lt;label for="lastnamelabel"&gt;Last Name&lt;/label&gt;
          &lt;input type="text" id="lastnamelabel" placeholder="Last Name" value="" required /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-12 col-md-12"&gt;
          &lt;label for="commentslabel"&gt;Enter some content&lt;/label&gt;
          &lt;textarea id="commentslabel" placeholder="Comments" rows="4" autocomplete="off" required&gt;&lt;/textarea&gt;
          &lt;label for="select-1"&gt;Select an option&lt;/label&gt;
          &lt;select id="select-1" class="required" required&gt;
            &lt;option value="1"&gt;Option 1&lt;/option&gt;
            &lt;option value="2"&gt;Option 2&lt;/option&gt;
            &lt;option value="3"&gt;Option 3&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="radio" name="style" id="style-0" value="fl-style-0" /&gt;
    &lt;label for="style-0"&gt;Default Style&lt;/label&gt;
    &lt;input type="radio" name="style" id="style-1" value="fl-style-1" checked /&gt;
    &lt;label for="style-1"&gt;Style 1&lt;/label&gt;
    &lt;input type="radio" name="style" id="style-2" value="fl-style-2" /&gt;
    &lt;label for="style-2"&gt;Style 2&lt;/label&gt;
    &lt;button type="reset" class="button large"&gt;Reset&lt;/button&gt;
    &lt;button type="submit" class="button large"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>At the bottom of the form you can toggle between the CSS styles (Default, Style 1 &amp; Style 2), which works great.</p>
  
  <p>The issue is that on my mockup I can't have the options available to the User.  I need to demonstrate the Floating Label capabilities so stakeholders can decide which style suits their liking, but I can't seem to find a way to decouple the js toggling and set a style once the stakeholders have chosen between Style 1 or Style 2.</p>
  
  <p><strong>Ideal solution:</strong> I need to be able to set the css style after stakeholders choose Style 1 or Style 2. Obviously I need to maintain all the features associated with the chosen style.</p>
  
  <p>Can anyone help with this issue? I would really appreciate any help!</p>