YSR Keyed Entry select
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" placeholder="MM/DD/YYYY" size="12" type="text"><!--onfocus="DatePicker.pickDate(true, 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', false);" -->
<span class="dateFormat">[ <!--<a href="javascript:DatePicker.insertDate('2/1/2018', 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', true);">-->/2/1/2018</a> ]</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
<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...
CSS
.focusedRow {
outline: 1px solid red;
}
.blue {
background: blue;
}
.foci {
background: yellow;
}
JavaScript
//select
$(document).ready(function() {
var questions = $('.form-group');
console.log(questions);
// var dateQ = $(':input:first');
var dateQ = $('.form-group :first');
console.log(dateQ);
console.log(currentQ);
var currentQ = (currentQ === undefined) ? $(dateQ) : currentQ;
console.log(currentQ);
var nextQ;
var keyName = document.addEventListener("keydown", function(event) {
var keyName = event.which;
console.log(keyName);
return keyName;
});
var val = setValue(keyName, currentQ);
//$('.form-group >div')
function setFirst(currentQ) {
dateQ.focus().addClass('blue');
$(dateQ).focusin(function() {
$(this).parent(".form-group").addClass('focusedRow');
});
$(dateQ).blur(function() {
$(this).removeClass('blue');
$(this).parent(".form-group").removeClass('focusedRow');
});
return dateQ;
//$('.form-group >div').addClass('focusedRow');
}
$(currentQ).change(function(){
console.log(this);
var nextQ = $(this).next('.form-group').addClass('foci');
console.log(nextQ);
});
//behavior for question form group that has focus
$(questions).focusin(function() {
console.log(this);
currentQ = $(this);
$(currentQ).addClass('focusedRow').removeClass('foci');
console.log(currentQ);
return currentQ;
});
$(questions).focusout(function() {
console.log(this);
$(this).removeClass('focusedRow');
});
function switchNext(currentQ) {
//look for the focused row
var fRow = $('.focusedRow');
console.log(fRow);
$(fRow).addClass('foci');
nextQ = $(fRow).next('.form-group');
console.log(nextQ);
//if last
if ($(fRow).is(".form-group :last")) {
nextQ = setFirst();
}
return nextQ;
}
function setValue(keyName, currentQ)...