YSR Keyed Entry fn

by KelseyW

HTML

<div class="pbBody">

  <h4>Basic Information</h4>

  <div class="form-group">
    <label class="col-md-6 col-lg-6 control-label">
      Date of administration
    </label>
    <div class="col-md-4 col-lg-2">
      <div class="requiredInput">
        <div class="requiredBlock"></div>
        <span class="dateInput dateOnlyInput">
						<input class="form-control  input-sm" id="YSR_Page:DS_YSR:mainBlock:DOAYSR__c" name="YSR_Page:DS_YSR:mainBlock:DOAYSR__c" onfocus="DatePicker.pickDate(true, 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', false);" placeholder="MM/DD/YYYY" size="12"  type="text">
						<span class="dateFormat">[&nbsp;<a href="javascript:DatePicker.insertDate('2/1/2018', 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', true);">2/1/2018</a>&nbsp;]</span>
        </span>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-6 col-lg-6 control-label">
      How was this form administered?
    </label>
    <div class="col-md-4 col-lg-2">
      <select id="YSR_Page:DS_YSR:mainBlock:YSRMETH__c" name="YSR_Page:DS_YSR:mainBlock:YSRMETH__c" class="form-control input-sm" size="1">
        <option value=""></option>
        <option value="0">Pen and paper only</option>
        <option value="1">Electronic only</option>
      </select>
    </div>
  </div>

  <h4>Question</h4>

  <div class="striped-question" id="questionRows">

    <div class="form-group ">
      <label class="col-md-12 col-lg-5 control-label">
        <span class="nmbr">1.</span> I act too young for my age&nbsp;&nbsp;
        <span id="YSR_Page:DS_YSR:mainBlock:qContent:0:j_id64" style="display: none;"></span>
      </label>
      <div class="col-md-12 col-lg-7" id="fieldset1">
        <span class="nmbr"></span>
        <fieldset style="border: none;">
          <table role="presentation" id="YSR_Page:DS_YSR:mainBlock:qContent:0:radioSelections" class="radio-list radio-list-inline">
            <tbody>
              <tr>
                <td>
                  <input...

CSS

.focusedRow {
  outline: 1px solid red;
}

.blue {
  background: blue;
}

.foci {
  background: yellow;
}

JavaScript

$(document).ready(function() {
  var questions = $('.form-group');
  console.log(questions);

  var keyName = document.addEventListener("keydown", function(event) {
    var keyName = event.which;
    console.log(keyName);
    return keyName;
  });
  console.log(keyName + ' global');

  setFirst();
  switchNext();
  setValue(keyName);


  function setFirst() {
    $(':input:first').focus().addClass('blue');
  }

  //behavior for parent of focus
  $(questions).focusin(function() {
    console.log(this);
    $(this).addClass('focusedRow');
  });
  $(questions).focusout(function() {
    console.log(this);
    $(this).removeClass('focusedRow');
  });

  function switchNext() {
    //look for the focused row
    var fRow = $('.focusedRow');
    $(fRow).addClass('foci');

    //if last 
    if ($(this).is(".form-group :last")) {
      setFirst();
    }

  }

  function setValue(keyName) {
    if ($("input[type!='text']")) {
      if (keyName == 48 || keyName == 96) {
        val = 0;
        console.log(val);
        switchNext();
      } else if (keyName == 49 || keyName == 97) {
        val = 1;
        console.log(val);
        switchNext();
      } else if (keyName == 50 || keyName == 98) {
        val = 2;
        console.log(val);
        switchNext();
      }
    }
  }
});