Untitled
unknown
plain_text
2 years ago
7.4 kB
0
Indexable
Never
<!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>