Untitled

mail@pastecode.io avatar
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>