{"id":373,"date":"2022-10-12T13:31:21","date_gmt":"2022-10-12T12:31:21","guid":{"rendered":"https:\/\/apps.nhslothian.scot\/onlinepayments\/?page_id=373"},"modified":"2026-08-26T09:23:07","modified_gmt":"2026-08-26T08:23:07","slug":"membership","status":"publish","type":"page","link":"https:\/\/apps.nhslothian.scot\/onlinepayments\/membership\/","title":{"rendered":"Memberships"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\r\n#container {\r\n        display: grid;\r\n        width: 600px;\r\n        border: 1px solid black;\r\n        padding: 10px;\r\n        padding-left: 20px;\r\n        grid-template-columns: auto auto auto;\r\n        border-radius: 5px;\r\n        justify-items: stretch;\r\n        justify-content: space-around;\r\n    }\r\n\r\n    .header {\r\n        grid-column: 1 \/ span 3;\r\n        text-align: center;\r\n        font-weight: bold;\r\n        font-size: larger;\r\n    }\r\n\r\n    .address-container {\r\n        grid-column: 1 \/ span 1;\r\n    }\r\n\r\n    .payment-container {\r\n        grid-column: 2 \/ span 1;\r\n    }\r\n\r\n    .label {\r\n        font-size: 13px !important;\r\n        margin-top: 10px;\r\n        text-align: left;\r\n        font-weight: bold;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .footer {\r\n        grid-column: 1 \/ span 3;\r\n        text-align: center;\r\n        border-top: 1px solid black;\r\n        padding: 5px;\r\n        margin-top: 20px;\r\n        padding-top: 15px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        background-color: transparent;\r\n    }\r\n\r\n    input[type=\"text\"] {\r\n        width: 200px;\r\n        font-size: small !important;\r\n        height: 30px;\r\n    }\r\n\r\n    textarea {\r\n        width: 200px;\r\n        font-size: small !important;\r\n    }\r\n\r\n    .input-field:hover,\r\n    select:hover,\r\n    textarea:hover {\r\n        border: 2px solid;\r\n    }\r\n\r\n    select {\r\n    width: 200px;\r\n    padding: 3px;\r\n    cursor: pointer;\r\n    font-size: small !important;\r\n    height: 30px;\r\n    border-radius: 3px;\r\n    border: 1px solid;\r\n    background-color: transparent;\r\n    }\r\n\r\n    input[type=\"submit\"],\r\n    input[type=\"button\"],\r\n    .btn {\r\n        font-size: small !important;\r\n        width: 60px;\r\n        height: 25px;\r\n        line-height: 0px;\r\n    }\r\n\r\n    @media screen and (max-width: 620px) {\r\n        #container {\r\n            width: 250px;\r\n        }\r\n\r\n        \/* .user-info-container {\r\n        grid-column: 1 \/ span 3;\r\n    } *\/\r\n\r\n        .address-container {\r\n            grid-column: 1 \/ span 3;\r\n        }\r\n\r\n        .payment-container {\r\n            grid-column: 1 \/ span 3;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<script data-wp-block-html=\"js\">\r\njQuery(document).ready(function ($) {\r\n\r\n    var options = [\r\n        \"Other (Please Specify)\"\r\n    ];\r\n\r\n    \/\/ Populate dropdown\r\n    $.each(options, function (index, value) {\r\n        $('#ref2').append(\r\n            $('<option><\/option>')\r\n                .val(value)\r\n                .text(value)\r\n        );\r\n    });\r\n\r\n    \/\/ Hide optional field initially\r\n    $('#optional_div').hide();\r\n    $('#ref2b').prop('required', false);\r\n\r\n\r\n    \/\/ Dropdown change event\r\n    $('#ref2').on('change', function () {\r\n\r\n        console.log('Dropdown changed:', $(this).val());\r\n\r\n        if ($(this).val() !== '') {\r\n\r\n            $('#optional_div').show();\r\n            $('#ref2b').prop('required', true);\r\n\r\n        } else {\r\n\r\n            $('#optional_div').hide();\r\n            $('#ref2b')\r\n                .prop('required', false)\r\n                .val('');\r\n        }\r\n\r\n    });\r\n\r\n\r\n    \/\/ Form validation\r\n    $('#form').on('submit', function (e) {\r\n\r\n        console.log('Form submitted');\r\n\r\n        var dropdownValue = $('#ref2').val();\r\n        var optionalValue = $('#ref2b').val().trim();\r\n\r\n\r\n        if (dropdownValue === '') {\r\n\r\n            e.preventDefault();\r\n\r\n            alert('Please select a membership option.');\r\n            $('#ref2').focus();\r\n\r\n            return false;\r\n        }\r\n\r\n\r\n        if (dropdownValue !== '' && optionalValue === '') {\r\n\r\n            e.preventDefault();\r\n\r\n            alert('Please enter the membership details.');\r\n            $('#ref2b').focus();\r\n\r\n            return false;\r\n        }\r\n\r\n    });\r\n\r\n});\r\n<\/script>\r\n\r\n<form id=\"form\" name=\"form\">\r\n        <div id=\"container\">\r\n            <div class=\"header\">\r\n                <div class=\"label\" style=\"text-align: center;\">\r\n                    <h3>Payment For &#8211; <span id=\"formType\">Membership<\/span><\/h3>\r\n                <\/div>\r\n                <div class=\"label\" colspan=\"3\">* Mandatory field<\/div>\r\n            <\/div>\r\n            <div class=\"address-container\">\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\">Year *<\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" size=\"30\" name=\"ref1\" id=\"ref1\" maxlength=\"40\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\">Membership*<\/div>\r\n                    <div class=\"input\">\r\n                        <select id=\"ref2\" name=\"ref2\" required=\"\">\r\n                            <option value=\"\">&#8211; Please Select &#8211;<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\" id=\"optional_div\">\r\n                    <div class=\"label\">Membership *<\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" size=\"30\" name=\"ref2b\" id=\"ref2b\" maxlength=\"40\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\">Cardholder Name *<\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" size=\"30\" name=\"name\" id=\"name\" maxlength=\"40\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\">Email Address *<\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" size=\"30\" name=\"email\" id=\"email\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\">Telephone *<\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" size=\"30\" name=\"tel\" id=\"tel\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\">Billing Address *<\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" name=\"address1\" id=\"address1\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\"><\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" name=\"address2\" id=\"address2\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\"><\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" name=\"address3\" id=\"address3\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\">Town *<\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" name=\"town\" id=\"town\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\">City *<\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" name=\"city\" id=\"city\" value=\"\">\r\n                    <\/div>\r\n                    <div class=\"form-item\">\r\n                        <div class=\"label\">Postcode *<\/div>\r\n                        <div class=\"input\">\r\n                            <input class=\"input-field\" type=\"text\" name=\"postcode\" style=\"text-transform:uppercase\" id=\"postcode\" value=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"payment-container\">\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\">Amount *<\/div>\r\n                    <div class=\"input\">\r\n                        <input class=\"input-field\" type=\"text\" name=\"amount\" id=\"amount\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-item\">\r\n                    <div class=\"label\" style=\"width: 200px; overflow-wrap: break-word;\">Any additional information<\/div>\r\n                    <div class=\"input\">\r\n                        <textarea rows=\"5\" name=\"message\" style=\"resize: none;\"><\/textarea>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"footer\">\r\n                <div class=\"left\">\r\n                    <input class=\"btn-sm\" type=\"button\" onclick=\"history.back();\" style=\"cursor: pointer; border: 1px solid black;\" value=\"Back\">\r\n                    <button class=\"btn-sm\" type=\"reset\" value=\"Reset\" style=\"cursor: pointer; border: 1px solid black;\">Reset<\/button>\r\n                <\/div>\r\n                <div class=\"right\">\r\n                    <input class=\"btn-sm\" id=\"submit\" type=\"submit\" onclick=\"\" style=\"cursor: pointer; border: 1px solid black;\" value=\"Next\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/form>\r\n    <a href=\"#\" id=\"custom-trigger\" style=\"display: none;\"><\/a>\r\n    <div id=\"custom-html\"><\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>var options = [ &#8220;Other (Please Specify)&#8221; ]; \/\/ Populate dropdown $.each(options, function (index, value) { $(&#8216;#ref2&#8217;).append( $(&#8221;) .val(value) .text(value) ); }); \/\/ Hide optional field initially $(&#8216;#optional_div&#8217;).hide(); $(&#8216;#ref2b&#8217;).prop(&#8216;required&#8217;, false); \/\/ Dropdown change event $(&#8216;#ref2&#8217;).on(&#8216;change&#8217;, function () { console.log(&#8216;Dropdown changed:&#8217;, $(this).val()); if ($(this).val() !== &#8221;) { $(&#8216;#optional_div&#8217;).show(); $(&#8216;#ref2b&#8217;).prop(&#8216;required&#8217;, true); } else { $(&#8216;#optional_div&#8217;).hide(); $(&#8216;#ref2b&#8217;) .prop(&#8216;required&#8217;,<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"class_list":["post-373","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"NHS Lothian","author_link":"https:\/\/apps.nhslothian.scot\/onlinepayments\/author\/nhs-lothian\/"},"rttpg_comment":0,"rttpg_category":false,"rttpg_excerpt":"var options = [ \"Other (Please Specify)\" ]; \/\/ Populate dropdown $.each(options, function (index, value) { $('#ref2').append( $('') .val(value) .text(value) ); }); \/\/ Hide optional field initially $('#optional_div').hide(); $('#ref2b').prop('required', false); \/\/ Dropdown change event $('#ref2').on('change', function () { console.log('Dropdown changed:', $(this).val()); if ($(this).val() !== '') { $('#optional_div').show(); $('#ref2b').prop('required', true); } else { $('#optional_div').hide(); $('#ref2b') .prop('required',","_links":{"self":[{"href":"https:\/\/apps.nhslothian.scot\/onlinepayments\/wp-json\/wp\/v2\/pages\/373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apps.nhslothian.scot\/onlinepayments\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apps.nhslothian.scot\/onlinepayments\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apps.nhslothian.scot\/onlinepayments\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/apps.nhslothian.scot\/onlinepayments\/wp-json\/wp\/v2\/comments?post=373"}],"version-history":[{"count":13,"href":"https:\/\/apps.nhslothian.scot\/onlinepayments\/wp-json\/wp\/v2\/pages\/373\/revisions"}],"predecessor-version":[{"id":592,"href":"https:\/\/apps.nhslothian.scot\/onlinepayments\/wp-json\/wp\/v2\/pages\/373\/revisions\/592"}],"wp:attachment":[{"href":"https:\/\/apps.nhslothian.scot\/onlinepayments\/wp-json\/wp\/v2\/media?parent=373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/apps.nhslothian.scot\/onlinepayments\/wp-json\/wp\/v2\/categories?post=373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}