Untitled
unknown
plain_text
3 years ago
7.4 kB
2
Indexable
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Test Link(test)!</title>
<style>
h4 {
text-align: center;}
</style>
</head>
<body>
<br>
<h4>Child's Details</h4>
<div class="container">
<form id="my_form" class="row g-3">
<div class="col-md-4 mb-3">
<label for="mrn" class="form-label">MRN</label>
<input type="text" class="form-control" id="mrn" placeholder="####-####" onkeypress="return onlyNumberKey(event,this,9)" required>
</div>
<div class="col-md-4 mb-3">
<label for="fname" class="form-label">First name</label>
<input type="text" class="form-control" id="fname" placeholder="First name" required>
</div>
<div class="col-md-4 mb-3">
<label for="lname" class="form-label">Last name</label>
<input type="text" class="form-control" id="lname" placeholder="Last name" required>
</div>
<div class="col-md-4 mb-3">
<label for="dob" class="form-label">Date of birth </label>
<input type="date" required pattern="\d{1,2}\/\d{1,2}\/\d{4}" pattern="\d{1,2}\/\d{1,2}\/\d{4}" class="form-control" id="dob" placeholder="dob"
required>
</div>
<div class="col-md-4 mb-3">
<label for="questionnaire" class="form-label">Questionnaire Type</label>
<select id="questionnaire" class="form-control" data-live-serach="true">
<option value="1" selected>Neuropsychology Full</option>
<option value="2">Neuropsychology Update</option>
<option value="3">Parent Rating Scales</option>
<option value="4">CDL Full</option>
<option value="5">CDL Update</option>
<option value="6">PMHP Full</option>
<option value="7">PMHP Update</option>
<option value="8">Speech Full</option>
<option value="10">CMO Full</option>
<option value="11">CMO Update</option>
<option value="12">Teacher Questionnaire</option>
</select>
</div>
<div class="col-12">
<!-- <input type="submit" class="btn btn-primary" id="generatelink"></button> -->
<input button class="btn btn-primary" type="submit" id="generatelink" value="Generate Link">
</div>
</form>
</div>
<br>
<br>
<h4> Personalized Questionnaire Link: </h4>
<a id="link" href='' target="_blank"></a>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
let link = 'https://kennedykrieger.az1.qualtrics.com/jfe/form/SV_5jUQLwBrydpcgpE?'
let linkFor12 = 'https://kennedykrieger.az1.qualtrics.com/jfe/form/SV_4G7ZkSMdgFDvLgx?'
let questionnaire = '';
let mrn = '';
let fname = '';
let lname = '';
let dob = '';
$("#questionnaire").change(function () {
questionnaire = $("#questionnaire").val();
updateLink();
});
$("#mrn").change(function () {
var mrn = $("#mrn").val()
var pattern = new RegExp('[0-9]{4}-[0-9]{4}')
if (pattern.test(mrn) == false) {
displayDialog(`Please enter a valid MRN in the format of ####-####.`)
};
updateLink();
});
$("#fname").change(function () {
fname = $("#fname").val();
updateLink();
});
$("#lname").change(function () {
lname = $("#lname").val();
updateLink();
});
$("#dob").change(function () {
dob = $("#dob").val()
pattern = "\d{1,2}\/\d{1,2}\/\d{4}";
updateLink();
});
function updateLink() {
let append = ''
if (questionnaire && mrn && fname && lname && dob) {
if (questionnaire == 12) {
$('#link').attr('href', `${linkFor12}MRN=${mrn}&FN=${fname}&LN=${lname}&DOB=${dob}`);
$('#link').text(`${linkFor12}MRN=${mrn}&FN=${fname}&LN=${lname}&DOB=${dob}`);
}
else {
$('#link').attr('href', `${link}Version=${questionnaire}&MRN=${mrn}&FN=${fname}&LN=${lname}&DOB=${dob}`);
$('#link').text(`${link}Version=${questionnaire}&MRN=${mrn}&FN=${fname}&LN=${lname}&DOB=${dob}`);
}
}
}
//MRN specific active function to make it look nice as it's being typed
document.getElementById('mrn').addEventListener('keydown', function (event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace" || key === "Delete") {
var value = document.getElementById('mrn').value;
if (value.length == 6) {
document.getElementById('mrn').value = value.substr(0, value.length - 1);
}
}
});
});
$("#generatelink").on('click',(function() {
updateLink()
}));
//Only allow numbers for calling fields
function onlyNumberKey(evt, ELID, size) {
var value = ELID.value;
// Only ASCII character in that range allowed
var ASCIICode = (evt.which) ? evt.which : evt.keyCode
if (ELID.id == "mrn") {
if (value.length == 4) //MRN specific
ELID.value = value + "-"
if ((ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)) || value.length == size)
return false;
}
return true;
}
</script>
</body>
</html>