"Class" attribute doesn't work

Question

I'm making a search field with a drop-down which contains what data I'm looking for, the input type depends on what I'm searching. If I'm searching by "name" or "ID number", the input type is text. If I'm searching by "Employment date", "TOR Date" or "Expired Date", the input type is date.

I use createAttribute and setAttributeNode to set class attribute to each value, I also use bootstrap datepicker that only shows Month and Year (I've included the .js and .css file in my folder). Here's my code:

    <div class="form-group">
        <select class="form-control" name="search_by" id="search_by" onchange="changeForm()">   
            <option value="idnum">ID Number</option>
            <option value="name">Name</option>
            <option value="emp_date">Employment Date</option>
            <option value="amel_date">AMEL Expired Date</option>
            <option value="tor_date">TOR Expired Date</option>
        </select>
    </div>

    <div class="form-group input-append date" data-date-format="mm-yyyy">
        <input  type="text" class="form-control" placeholder="Search" id="search_keywd"/>
    </div>

    <script>
        function changeForm()
        {
            var form = document.getElementById("search_keywd");
            var x = document.getElementById("search_by").value;
            var att = document.createAttribute("class");
            if(x == "emp_date")
            {
                att.value = "form-control datepicker";
            }
            else if (x == "amel_date")
            {
                att.value = "form-control datepicker";
            }
            else if (x == "tor_date")
            {
                att.value = "form-control datepicker";
            }
            else if (x == "name")
            {
                att.value = "form-control";
            }
            else if (x == "idnum")
            {
                att.value = "form-control";
            }
            form.setAttributeNode(att);
            document.getElementById("demo").innerHTML = "Current Attribute: " + att.value;
        }
        $(document).ready(function (){
        $('.datepicker').datepicker({
          format: "mm/yyyy",
          viewMode: "months",
          minViewMode: "months"
        });
    });
    </script>
    <p id="demo"></p>

The problem is the datepicker doesn't show up, but the if logic works fine. Anyone knows how to solve this?

Answer 1

You were creating the attribute for document instead of the input.

Use [classList][1] directly instead

 function changeForm()
    {
        var form = document.getElementById("search_keywd");
        var searchBy = document.getElementById("search_by");
        var x = searchBy.value;
        var classList = form.classList;
        form.className = "";
        switch( x ) //use switch instead
        {
            case "emp_date":
            case "amel_date":
            case "tor_date":
               classList.add( "datepicker" );
            case "name":
            case "idnum":
               classList.add( "form-control" );
               break;
            default:
               break;
        }

        //rest of the code
    }

Demo

$(document).ready(function() {
  $('.datepicker').datepicker({
    format: "mm/yyyy",
    viewMode: "months",
    minViewMode: "months"
  });
});

function changeForm() {
  var form = document.getElementById("search_keywd");
  var searchBy = document.getElementById("search_by");
  var x = searchBy.value;
  form.className = "";
  var classList = form.classList;
  switch (x) //use switch instead
  {
    case "emp_date":
    case "amel_date":
    case "tor_date":
      classList.add("datepicker");
    case "name":
    case "idnum":
      classList.add("form-control");
      break;
    default:
      break;
  }
  document.getElementById("demo").innerHTML = "Current Attribute: " + classList;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <select class="form-control" name="search_by" id="search_by" onchange="changeForm()">   
            <option value="idnum">ID Number</option>
            <option value="name">Name</option>
            <option value="emp_date">Employment Date</option>
            <option value="amel_date">AMEL Expired Date</option>
            <option value="tor_date">TOR Expired Date</option>
        </select>
</div>

<div class="form-group input-append date" data-date-format="mm-yyyy">
  <input type="text" class="form-control" placeholder="Search" id="search_keywd" />
</div>

<p id="demo"></p>