Hubspot Forms
init_cu_form(); init_ns_form(); function init_cu_form(){ const formId = "c59b8b5f-89c5-401e-9196-087fd66747a4"; const portalId = "2473580"; const schoolLookUpKey = "fa799f92041d4599b13c0c419ab06772" // form wrapper var customForm; const schoolListEle = document.createElement('ul'); schoolListEle.classList.add('search-bar'); schoolListEle.classList.add('hidden'); var IamADropdownEle, schoolNameEle, schoolNameTextEle, CountryEle, changeSchoolLookupInputTrigger, schoolNameOtherSubmitEle, schoolIdEle, contactFormEnquirySummaryEle, contactAttachment, productOfInterestEle const uploadedFileInfo = document.createElement('span'); uploadedFileInfo.setAttribute('id', 'file-name') uploadedFileInfo.setAttribute('class', 'file-name') uploadedFileInfo.innerHTML = "No file chosen" var isSearchableSchoolLookUp = true; var isNeedToDisableSchoolSearch = false; var country, schoolName, iAm; var nonOtherCountries = [ "AU", "NZ", "FJ", "PG", ]; hbspt.forms.create({ region: "na1", portalId: "2473580", formId: formId, target: "#custom-cu-form", onFormReady: onFormReady, onFormSubmitted: onFormSubmitted, onBeforeFormSubmit: onBeforeFormSubmit, css: ` @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&display=swap'); #custom-cu-form input[type="file"] { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 1; cursor:pointer; } #custom-cu-form a { color: #7D5EA8; text-decoration: underline; } #custom-cu-form .three-column-lists .input ul { display: flex; flex-wrap: wrap; } #custom-cu-form .three-column-lists .input ul li { flex: 0 0 33.33%; box-sizing: border-box; padding: 5px; } #custom-cu-form a:focus, #custom-cu-form a:active, #custom-cu-form a:hover { color: #7D5EA8; text-decoration: none; } .max-file-size{ font-size: 12px; color: #747474; line-height: 18px; display: block; } #custom-cu-form .file-name { font-size: 12px; font-family: "Open Sans", sans-serif; color: #7D5EA8; } #custom-cu-form .custom-file-upload { font-family: "Open Sans", sans-serif; display: inline-block; padding: 10px 20px; cursor: pointer; background-color: white; color: #7D5EA8; border: 1px solid #7D5EA8; font-size: 16px; font-weight: 600; margin-bottom: 0; position: relative; } #custom-cu-form .custom-file-upload:hover { background-color: #7D5EA8; border: 1px solid #7D5EA8; color: white; } #custom-cu-form .hs-error-msgs { margin: 2px 0px 0px 0px; padding-inline-start: 0px !important; } #custom-cu-form .hs-error-msg{ color: red; font-size: 12px; font-family: "Open Sans", sans-serif; line-height: normal; } #custom-cu-form .form-columns-2 .hs-form-field { width: 50%; } #custom-cu-form div, #custom-cu-form h1, #custom-cu-form h2, #custom-cu-form h3, #custom-cu-form h4, #custom-cu-form h5, #custom-cu-form h6, #custom-cu-form p, #custom-cu-form a, #custom-cu-form p span, #custom-cu-form span{ font-family: "Open Sans", sans-serif; margin-top: 0; } #custom-cu-form p span{ line-height:normal; display: block; } #custom-cu-form .hs-form select, #custom-cu-form .hs-form input { font-family: "Open Sans", sans-serif; } #custom-cu-form textarea{ font-family: "Open Sans", sans-serif; } #custom-cu-form h1 { font-size: 46px; line-height: normal; margin-bottom: 24px; color: #006D68; } #custom-cu-form h2 { font-size: 36px; line-height: normal; margin-bottom: 20px; color: #006D68; } #custom-cu-form h3 { font-size: 24px; line-height: normal; margin-bottom: 22px; color: #006D68; } #custom-cu-form h4{ font-size: 18px; line-height: normal; font-weight: 700; margin-bottom: 14px; color: #000; } #custom-cu-form h5{ font-size: 16px; line-height: normal; font-weight: 700; margin-bottom: 6px; color: #7D5EA8; } #custom-cu-form .hs-from ul { margin-top: 0; } #custom-cu-form .hs-form .hs-form-field { margin-bottom: 18px; } #custom-cu-form .hbspt-form { padding: 0px 20px; } #custom-cu-form .hs-form { max-width: 482px; margin: 0 auto; padding: 36px 40px 40px 40px; background: #F3EEF5; } #custom-cu-form .hs-button, #custom-cu-form input[type=submit] { background: #7D5EA8; border: 2px solid #7D5EA8; font-size: 19px; font-weight: normal; font-weight: 700; font-family: "Open Sans", sans-serif; color: white; height: auto; padding: 15px 30px; margin-top: 20px; cursor: pointer; } #custom-cu-form .hs-button:hover, #custom-cu-form input[type=submit]:hover, #custom-cu-form .hs-button:focus, #custom-cu-form input[type=submit]:focus, #custom-cu-form .hs-button:active, #custom-cu-form input[type=submit]:active { background: white; color:#7D5EA8; } #custom-cu-form .hs-form .hs-form-field{ margin-bottom: 22px; } #custom-cu-form .hs-form .hs-form-field label span { font-size:12px; color: #000; line-height: normal; font-weight: 600; } #custom-cu-form .hs-form .hs-fieldtype-booleancheckbox .inputs-list { padding: 0; list-style: none; margin-top: 0; } #custom-cu-form .hs-form .hs-form-field .hs-field-desc { font-size: 12px; color:#7F7F7F; font-weight: 400; line-height: 150%; margin-top: -5px; } #custom-cu-form .hs-form .hs-form-field select { margin-top: 0; } #custom-cu-form .hs-form .hs-form-field label { margin-bottom:6px; display: inline-block; } #custom-cu-form .hs-form .hs-form-field input[type=date], #custom-cu-form .hs-form .hs-form-field input[type=email], #custom-cu-form .hs-form .hs-form-field input[type=number], #custom-cu-form .hs-form .hs-form-field input[type=phone], #custom-cu-form .hs-form .hs-form-field input[type=tel], #custom-cu-form .hs-form .hs-form-field input[type=text], #custom-cu-form .hs-form .hs-form-field textarea, #custom-cu-form .hs-form .hs-form-field select{ border: 1px solid #C4C4C4; margin-top: 0px; height: auto; padding: 10px 12px; font-size: 16px; width: 100%; box-sizing: border-box; } #custom-cu-form .hs-form .form-columns-2 .hs-form-field:first-child .input { margin-right: 16px; } /***** .legal-consent-container****/ #custom-cu-form .hs-form .hs-form-booleancheckbox-display input[type=checkbox] { -webkit-appearance: revert; } #custom-cu-form .hs-form .hs-form-booleancheckbox-display{ position: relative; } #custom-cu-form ul.inputs-list li.hs-form-booleancheckbox label input { height: 24px; left: 0; opacity: 0; position: absolute; top: 0; width: 24px; } #custom-cu-form .hs-form ul.inputs-list li.hs-form-booleancheckbox label span { margin-left: 26px; } #custom-cu-form .hs-form ul.inputs-list li.hs-form-booleancheckbox label span:before { border: 1px solid #c4c4c4; content: ""; height: 14px; left: 0; position: absolute; top: 1px; width: 14px; } #custom-cu-form .hs-form ul.inputs-list li.hs-form-booleancheckbox label span:after { color: #fff; content: ""; height: 11px; left: 5px; position: absolute; top: 1px; transform: rotate(45deg); transition: opacity .2s ease-in-out; width: 5px; } #custom-cu-form .hs-form ul.inputs-list li.hs-form-booleancheckbox input[type=checkbox]:checked+span:before { background: #7d5ea8; border: 1px solid #7d5ea8; } #custom-cu-form .hs-form ul.inputs-list li.hs-form-booleancheckbox input[type="checkbox"]:checked + span:after { border: 2px solid; border-left: 0; border-top: 0; } #custom-cu-form .hs-form .hs-form-booleancheckbox-display>span{ display: block; } #custom-cu-form .hs-form .hs-form-booleancheckbox-display p { font-size: 12px; font-style: normal; line-height: normal; color: #000; font-weight: 600; } #custom-cu-form .hs-form .legal-consent-container div:not(:last-child) { margin-bottom: 10px; } #custom-cu-form .hs-form .legal-consent-container .hs-richtext { font-size: 12px; font-style: normal; line-height: normal; color: #000; } #custom-cu-form .hs-form .legal-consent-container .hs-richtext p{ font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; } #custom-cu-form .hs-form .legal-consent-container .hs-richtext p a{ font-size: 12px; line-height: normal; } #custom-cu-form .hs-form .legal-consent-container .hs-richtext p u{ text-decoration-color: #7D5EA8; } #custom-cu-form .hs-form .legal-consent-container .hs-richtext p u:hover { text-decoration: none; } #custom-cu-form .hs-form .legal-consent-container .hs-richtext p a { color: #7D5EA8; } #custom-cu-form .hs-form .legal-consent-container .hs-richtext p a:hover{ text-decoration: none; } #custom-cu-form .hs-form select { -webkit-padding-end: 48px !important; -webkit-padding-start: 10px !important; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url('data:image/svg+xml,'); background-position: right 12px center; background-repeat: no-repeat; background-size: 14px; border: 1px solid #c4c4c4; width: 100%; } #custom-cu-form .hs-form .hs-form-field select{ height: 42px; } #custom-cu-form .hs-form ul.multi-container { list-style: none; margin-left: 0; padding-left: 0; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio, #custom-cu-form ul.inputs-list.multi-container li.hs-form-checkbox { margin: 0px 0px 4px 0px; line-height: normal; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio label, #custom-cu-form ul.inputs-list.multi-container li.hs-form-checkbox label { position: relative; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio label input, #custom-cu-form ul.inputs-list.multi-container li.hs-form-checkbox label input{ height: 24px; left: 0; opacity: 0; position: absolute; top: 0; width: 24px; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio label span, #custom-cu-form ul.inputs-list.multi-container li.hs-form-checkbox label span{ cursor: pointer; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio label span:before { border-radius: 50%; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio label span:before, #custom-cu-form ul.inputs-list.multi-container li.hs-form-checkbox label span:before{ border: 1px solid #c4c4c4; content: ""; height: 14px; position: absolute; width: 14px; left: 0; top: 5px; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio label span:after { border-radius: 50%; content: ""; left: 3px; position: absolute; top: 8px; transition: opacity .2s ease-in-out; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-checkbox label span:after { border: 2px solid; border-left: 0; border-top: 0; content: ""; height: 11px; left: 5px; position: absolute; top: 5px; transform: rotate(45deg); transition: opacity .2s ease-in-out; width: 5px; color:white; opacity: 0; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-checkbox label input:checked+span:after { opacity: 1; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-checkbox input[type="checkbox"]:checked + span:before { background:#7D5EA8; border: 1px solid #7D5EA8; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio input[type="radio"]:checked + span:before{ border: 1px solid #7D5EA8; background:#7D5EA8; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio input[type="radio"]:checked + span:after{ border: 4px solid white; } #custom-cu-form ul.inputs-list.multi-container li.hs-form-radio label span, #custom-cu-form ul.inputs-list.multi-container li.hs-form-checkbox label span{ margin-left: 26px; font-size: 12px; } #custom-cu-form .input.show-close{ position: relative; } #custom-cu-form .input .svg-close-icon{ display: none; } #custom-cu-form .input.show-close .svg-arrow-icon, #custom-cu-form .input.show-close .svg-close-icon{ position: absolute; top: 0; bottom: 0; right: 6px; height: auot; height: auto; height: 22px; width: 22px; display: flex; align-items: center; justify-content: center; margin: auto; cursor:pointer; display: block; } #custom-cu-form .search-bar { list-style-type: none; margin: 0; padding: 0; background-color: #ffffff; border: 1px solid #ccc; border-top: none; border-radius: 4px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); max-height: 200px; overflow-y: auto; width: 100%; } #custom-cu-form .search-bar li { padding: 10px; cursor: pointer; transition: background-color 0.3s; } #custom-cu-form .search-bar li:hover { background-color: #f1f1f1; } #custom-cu-form .search-bar li{ font-size: 12px; color: #333; } #custom-cu-form .hs_icasa_school_sector__other_{ margin-top: -12px !important; } @media(max-width:480px) { #custom-cu-form .hs-form { padding: 28px 25px 30px; } #custom-cu-form .hs-button, #custom-cu-form input[type=submit] { font-size: 16px; padding: 12px 22px; } #custom-cu-form .form-columns-2 .hs-form-field { width: 100%; } #custom-cu-form .hs-form .form-columns-2 .input, #custom-cu-form .hs-form .form-columns-1 .input, #custom-cu-form .hs-form .form-columns-2 .hs-form-field:first-child .input{ margin-right: 0; } #custom-cu-form .three-column-lists .input ul li { flex: 0 0 49.33%; } } #custom-cu-form input { box-sizing: border-box; border: 1px solid #ccc; height: 30px; padding: 10px; } #custom-cu-form input.loading { background: url(https://knock.turdesigner.com/content/images/loading.gif) no-repeat right center; background-size:100px; background-position-x: 108%; } #custom-cu-form .no-list{ list-style: none; } #custom-cu-form #change_school_lookup_input_trigger{ cursor: pointer; margin-top: -14px; font-size: 12px; color: #7e5fa8; text-decoration: underline; } #custom-cu-form .hidden{ display: none; } ` }); function onFormReady($form) { setElements($form) appendElement() setEvents() setActions(); customForm.querySelector("[type='submit']").addEventListener("click", function (event) { if (!isAllValidationsOk()) { event.preventDefault() } }, false); } function setElements($form) { customForm = document.getElementById('custom-cu-form') IamADropdownEle = customForm.querySelector("#contact_type-" + formId) schoolNameEle = document.getElementById("company-" + formId) schoolNameTextEle = customForm.querySelector("#icasa_school_name__other_-" + formId) changeSchoolLookupInputTrigger = customForm.querySelector("#change_school_lookup_input_trigger") CountryEle = customForm.querySelector("#country_code-" + formId) contactAttachment = customForm.querySelector("#icasa_contact_form_attachment-" + formId) productOfInterestEle = customForm.querySelector("#product_of_interest-" + formId) schoolIdEle = customForm.querySelector("#icasa_form_contact_school_id-" + formId) contactFormEnquirySummaryEle = customForm.querySelector("#icasa_contact_form_enquiry_summary-" + formId) } function setEvents() { schoolNameEle.onkeypress = debounce(onSchoolNameChange, 1500); CountryEle.addEventListener('change', onCountyChange); contactAttachment.addEventListener('change', onContactAttachmentChange); IamADropdownEle.addEventListener('change', onIamPropertyChange); changeSchoolLookupInputTrigger.addEventListener('click', onchangeSchoolLookupInputTriggerClicked) contactFormEnquirySummaryEle.addEventListener('keyup', onContactFormEnquirySummaryChange) } function setActions() { actionForGrandParent(schoolNameTextEle, 'hide') actionForGrandParent(schoolIdEle, 'hide') moveHelperTextToBottom(contactFormEnquirySummaryEle) //change drop down case convertFirstOptionToLower(IamADropdownEle) convertFirstOptionToLower(productOfInterestEle) convertFirstOptionToLower(CountryEle) } function addError(ele, error) { var errorUl = ele.parentElement.parentElement.querySelector('.no-list.hs-error-msgs.inputs-list') if (errorUl == null) { errorUl = document.createElement("ul") errorUl.setAttribute('class', "no-list hs-error-msgs inputs-list") errorUl.setAttribute('role', "alert") } errorUl.innerHTML = ""; const errorLi = document.createElement("li") const errorLabel = document.createElement("label") errorLabel.setAttribute('class', "hs-error-msg hs-main-font-element") errorLabel.innerHTML = error; errorLi.append(errorLabel); errorUl.append(errorLi); ele.parentElement.parentElement.appendChild(errorUl) ele.addEventListener('change', function (e) { errorUl.innerHTML = ""; }) } function isAllValidationsOk() { var hasError = false; if (iAm == "Other" && isEmpty(schoolNameEle)) { addError(schoolNameEle, "Please complete this required field.") hasError = true; } if (isSearchableSchoolLookUp && isEmpty(schoolNameEle)) { addError(schoolNameEle, "Please complete this required field.") hasError = true; } if (!isSearchableSchoolLookUp && isEmpty(schoolNameTextEle)) { addError(schoolNameTextEle, "Please complete this required field.") hasError = true; } if (isEmpty(contactFormEnquirySummaryEle)) { addError(contactFormEnquirySummaryEle, "Please complete this required field.") hasError = true; } if (contactFormEnquirySummaryEle.value.length >= 60) { addError(contactFormEnquirySummaryEle, "Summary of your enquiry should less than 60 characters") hasError = true; } if (hasError) { return false; } return true; } function isEmpty(ele) { if (ele.value == "" || ele.value == undefined || ele.value == null) { return true; } return false; } function appendElement() { // add search dropdown schoolNameEle.parentElement.append(schoolListEle); // wrap attachment var fileUploadLabel = document.createElement('label') fileUploadLabel.setAttribute('for', "file-upload") fileUploadLabel.setAttribute('class', "custom-file-upload") fileUploadLabel.innerHTML = "Upload" wrap(contactAttachment, fileUploadLabel) var fileSizeLabel = document.createElement('span') fileSizeLabel.innerHTML = "Max. file size: 15MB" fileSizeLabel.setAttribute('class', "max-file-size") var fileUploadContainer = customForm.getElementsByClassName("hs_icasa_contact_form_attachment")[0] fileUploadContainer.appendChild(fileSizeLabel) fileUploadContainer.appendChild(uploadedFileInfo) // add svgIco to school ele other var schoolNameContainer = customForm.querySelector('.hs_icasa_school_name__other_'); var schoolElement = schoolNameContainer.querySelector('.input'); schoolElement.classList.add("show-close"); var svgArrowIcon = ''; if (schoolElement) { schoolNameOtherSubmitEle = document.createElement("div"); schoolNameOtherSubmitEle.classList.add("svg-close-icon"); schoolElement.append(schoolNameOtherSubmitEle); var closeIconContainer = customForm.querySelector('.svg-close-icon'); closeIconContainer.innerHTML = svgArrowIcon; } } function onFormSubmitted($form) { } function onBeforeFormSubmit($form) { } function onSetCustomSchoolName(e) { e.preventDefault() schoolName = e.target.value; } async function onSchoolNameChange(e) { if (country == undefined || country == null) { addError(CountryEle, "Please select a country before entering your school name.") return; } const wordCount = e.target.value.length if (wordCount { let schoolLi = document.createElement('li'); schoolLi.innerHTML = school['searchLookupValue'] schoolLi.dataset.school = school['searchLookupValue'] schoolLi.dataset.school_id = school['schoolId'] schoolLi.addEventListener('click', onSchoolSelect); schoolListEle.appendChild(schoolLi) }); schoolNameEle.classList.remove("loading"); } function onCountyChange(e) { country = e.target.value; if (nonOtherCountries.includes(country)) { isSearchableSchoolLookUp = true } showSchoolNameField(); } function onIamPropertyChange(e) { iAm = e.target.value; showSchoolNameField() } function onContactAttachmentChange(e) { const files = this.files; uploadedFileInfo.innerHTML = files[0].name; } function onContactFormEnquirySummaryChange(e) { var contactFormEnqSummery = e.target.value; if (contactFormEnqSummery.length >= 60) { addError(contactFormEnquirySummaryEle, "Summary of your enquiry should less than 60 characters") } } async function onSchoolSelect(e) { schoolListEle.innerHTML = "" const schoolId = e.target.dataset.school_id; schoolNameEle.classList.add("loading"); var schoolInfo = await getSingleSchool(schoolId); schoolListEle.innerHTML = "" setValueWithChange(schoolNameEle, schoolInfo.name); schoolNameEle.dataset.school = schoolInfo.name schoolNameEle.dataset.school_id = schoolInfo.id setValueWithChange(schoolIdEle, schoolInfo.hubSpotCompanyId); schoolNameEle.classList.remove("loading"); } function actionForGrandParent(ele, action = "hide") { if (action == "hide") { ele.parentElement.parentElement.classList.add('hidden') } if (action == "show") { ele.parentElement.parentElement.classList.remove('hidden') } } function groupActionForEleList(elements, action = "hide") { if (action == "hide") { elements.forEach(ele => { ele.classList.add('hidden') }) } if (action == "show") { elements.forEach(ele => { ele.classList.remove('hidden') }) } } function changeLabelAndPlaceHolder(elements, labelText, placeholderText) { if (labelText != null) { elements.parentElement.parentElement.querySelector('label').querySelector('span').innerHTML = labelText; } if (placeholderText != null) { elements.placeholder = placeholderText; } } function moveHelperTextToBottom(element) { const helperTextEle = element.parentElement.parentElement.querySelector('legend'); helperTextEle.style.marginTop = "8px"; element.parentElement.parentElement.appendChild(helperTextEle) } function showSchoolNameField() { schoolName = null var isMandatoryTaxableSchool = false; var manualEntryIAms = [ "School", "Parent", "Student" ] if (iAm == "Other") { actionForGrandParent(schoolNameEle, 'show'); changeLabelAndPlaceHolder(schoolNameEle, "Organisation name*", "") actionForGrandParent(schoolNameTextEle, 'hide') changeSchoolLookupInputTrigger.classList.add('hidden') isNeedToDisableSchoolSearch = true } else { if (!nonOtherCountries.includes(country) && country != null) { isMandatoryTaxableSchool = true; changeSchoolLookupInputTrigger.classList.add('hidden') } if (nonOtherCountries.includes(country)) { isMandatoryTaxableSchool = false; changeSchoolLookupInputTrigger.classList.add('hidden') } if (isMandatoryTaxableSchool) { isSearchableSchoolLookUp = false; changeSchoolLookupInputTrigger.classList.add('hidden') } else { changeSchoolLookupInputTrigger.classList.remove('hidden') } if (isSearchableSchoolLookUp) { isNeedToDisableSchoolSearch = false changeLabelAndPlaceHolder(schoolNameEle, "School name*", "Start typing your school name to search") actionForGrandParent(schoolNameEle, 'show'); actionForGrandParent(schoolNameTextEle, 'hide'); changeSchoolLookupInputTrigger.innerHTML = "Can't find your school? Click here." changeSchoolLookupInputTrigger.classList.remove('hidden') } else { actionForGrandParent(schoolNameEle, 'hide'); actionForGrandParent(schoolNameTextEle, 'show'); changeSchoolLookupInputTrigger.innerHTML = "Go back to school search. Click here." } } setValueWithChange(schoolNameEle, "") setValueWithChange(schoolNameTextEle, "") } async function schoolLookup(countyCode, query) { try { const headers = new Headers(); headers.append("Accept", "*/*"); headers.append("Access-Control-Allow-Origin", "*"); headers.append("x-api-key", schoolLookUpKey); const requestOptions = { method: "GET", headers: headers, }; const response = await fetch("https://app-primdapublicapi-prd.azurewebsites.net/api/School/GetSchoolBySearchTextAndIsoCode/" + countyCode + "/" + encodeURI(query), requestOptions) return await response.json(); } catch (error) { console.error(error); return []; } } async function getSingleSchool(schoolID) { try { const headers = new Headers(); headers.append("Accept", "*/*"); headers.append("Access-Control-Allow-Origin", "*"); headers.append("x-api-key", schoolLookUpKey); const requestOptions = { method: "GET", headers: headers, }; const response = await fetch("https://app-primdapublicapi-prd.azurewebsites.net/api/School/GetSchoolById/" + schoolID, requestOptions) return await response.json(); } catch (error) { console.error(error); return []; } } function onchangeSchoolLookupInputTriggerClicked() { isSearchableSchoolLookUp = !isSearchableSchoolLookUp; showSchoolNameField(); } window.addEventListener('click', function (e) { if (!schoolListEle.contains(e.target) && !schoolListEle.classList.contains('hidden')) { schoolListEle.classList.add('hidden'); if (schoolNameEle.dataset.school == null || schoolNameEle.dataset.school == undefined) { setValueWithChange(schoolNameEle, "") return; } setValueWithChange(schoolNameEle, schoolNameEle.dataset.school) } }); function wrap(el, wrapper) { el.parentElement.insertBefore(wrapper, el); wrapper.appendChild(el); } function debounce(cb, interval, immediate) { var timeout; return function () { var context = this, args = arguments; var later = function () { timeout = null; if (!immediate) cb.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, interval); if (callNow) cb.apply(context, args); }; }; function convertFirstOptionToLower(element) { if (element && element.options && element.options.length > 0) { const firstOption = element.options[0]; if (firstOption.text === "Please Select") { firstOption.text = "Please select"; } } } function setValueWithChange(inputElement, value) { inputElement.value = value; var event = new InputEvent('input', { bubbles: true }); inputElement.dispatchEvent(event); event = new Event('change', { bubbles: true }); inputElement.dispatchEvent(event); } } function init_ns_form(){ const formId = "0f2617c0-8f9e-4143-8363-e8b5d50c4be8"; const portalId = "2473580"; const schoolLookUpKey = "fa799f92041d4599b13c0c419ab06772" //form Wrapper var customForm; const schoolListEle = document.createElement('ul'); schoolListEle.classList.add('search-bar'); schoolListEle.classList.add('hidden'); var allFormFieldEle, hsSchoolProductOfInterestContainer, hsSchoolYearLevelsContainer; var schoolNameEle, schoolNameTextEle, CompanyId, ContactFirstNameEle, ContactLastNameEle, ContactEmailEle, ContactPhoneEle, CountryEle, MailingAddress1Ele, MailingAddress2Ele, MailingCityEle, MailingStateEle, MailingPostCodeEle, CourierAddress1Ele, CourierAddress2Ele, CourierCityEle, CourierStateEle, CourierPostCodeEle, AdminEmailEle, SchoolPhoneEle, SchoolWebEle, AbnEle, SectorEle, SectorOtherEle, YearLevelEle, SCFirstNameEle, SCLastNameEle, SCEmailEle, PrincipleFirstNameEle, PrincipleLastNameEle, PrincipleEmailEle, PrinciplePhoneEle, isSameAddressCheckBoxEle, marketingOptEle; var isSameAddressContainerEle, schoolLevelContainerEle; var changeSchoolLookupInputTrigger, schoolAlreadyRegisteredAlert, legalConsentContainer, hsSubmit, hidableHeadings, otherCountryWarning; var schoolNameOtherSubmitEle; var isSearchableSchoolLookUp = true; // formValue let country = null; var schoolName = null; var nonOtherCountries = [ "AU", "NZ", "FJ", "PG", ]; hbspt.forms.create({ region: "na1", portalId: "2473580", formId: formId, target: "#custom-ns-form", onFormReady: onFormReady, onFormSubmitted: onFormSubmitted, onBeforeFormSubmit: onBeforeFormSubmit, css: ` @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&display=swap'); #custom-ns-form input[type="file"] { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 1; cursor:pointer; } #custom-ns-form a { color: #7D5EA8; text-decoration: underline; } #custom-ns-form .three-column-lists .input ul { display: flex; flex-wrap: wrap; } #custom-ns-form .three-column-lists .input ul li { flex: 0 0 33.33%; box-sizing: border-box; padding: 5px; } #custom-ns-form a:focus, #custom-ns-form a:active, #custom-ns-form a:hover { color: #7D5EA8; text-decoration: none; } .max-file-size{ font-size: 12px; color: #747474; line-height: 18px; display: block; } #custom-ns-form .file-name { font-size: 12px; font-family: "Open Sans", sans-serif; color: #7D5EA8; display: none; } #custom-ns-form .custom-file-upload { font-family: "Open Sans", sans-serif; display: inline-block; padding: 10px 20px; cursor: pointer; background-color: white; color: #7D5EA8; border: 1px solid #7D5EA8; font-size: 16px; font-weight: 600; margin-bottom: 0; position: relative; } #custom-ns-form .custom-file-upload:hover { background-color: #7D5EA8; border: 1px solid #7D5EA8; color: white; } #custom-ns-form .hs-error-msgs { margin: 2px 0px 0px 0px; padding-inline-start: 0px !important; } #custom-ns-form .hs-error-msg{ color: red; font-size: 12px; font-family: "Open Sans", sans-serif; line-height: normal; } #custom-ns-form .form-columns-2 .hs-form-field { width: 50%; } #custom-ns-form div, #custom-ns-form h1, #custom-ns-form h2, #custom-ns-form h3, #custom-ns-form h4, #custom-ns-form h5, #custom-ns-form h6, #custom-ns-form p, #custom-ns-form a, #custom-ns-form p span, #custom-ns-form span{ font-family: "Open Sans", sans-serif; margin-top: 0; } #custom-ns-form p span{ line-height:normal; display: block; } #custom-ns-form .hs-form select, #custom-ns-form .hs-form input { font-family: "Open Sans", sans-serif; } #custom-ns-form textarea{ font-family: "Open Sans", sans-serif; } #custom-ns-form h1 { font-size: 46px; line-height: normal; margin-bottom: 24px; color: #006D68; } #custom-ns-form h2 { font-size: 36px; line-height: normal; margin-bottom: 20px; color: #006D68; } #custom-ns-form h3 { font-size: 24px; line-height: normal; margin-bottom: 22px; color: #006D68; } #custom-ns-form h4{ font-size: 18px; line-height: normal; font-weight: 700; margin-bottom: 14px; color: #000; } #custom-ns-form h5{ font-size: 16px; line-height: normal; font-weight: 700; margin-bottom: 6px; color: #7D5EA8; } #custom-ns-form .hs-from ul { margin-top: 0; } #custom-ns-form .hs-form .hs-form-field { margin-bottom: 18px; } #custom-ns-form .hbspt-form { padding: 0px 20px; } #custom-ns-form .hs-form { max-width: 482px; margin: 0 auto; padding: 36px 40px 40px 40px; background: #F3EEF5; } #custom-ns-form .hs-button, #custom-ns-form input[type=submit] { background: #7D5EA8; border: 2px solid #7D5EA8; font-size: 19px; font-weight: normal; font-weight: 700; font-family: "Open Sans", sans-serif; color: white; height: auto; padding: 15px 30px; margin-top: 20px; cursor: pointer; } #custom-ns-form .hs-button:hover, #custom-ns-form input[type=submit]:hover, #custom-ns-form .hs-button:focus, #custom-ns-form input[type=submit]:focus, #custom-ns-form .hs-button:active, #custom-ns-form input[type=submit]:active { background: white; color:#7D5EA8; } #custom-ns-form .hs-form .hs-form-field{ margin-bottom: 22px; } #custom-ns-form .hs-form .hs-form-field label span { font-size:12px; color: #000; line-height: normal; font-weight: 600; } #custom-ns-form .hs-form .hs-fieldtype-booleancheckbox .inputs-list { padding: 0; list-style: none; margin-top: 0; } #custom-ns-form .hs-form .hs-form-field .hs-field-desc { font-size: 12px; color:#7F7F7F; font-weight: 400; line-height: 150%; margin-top: -5px; } #custom-ns-form .hs-form .hs-form-field select { margin-top: 0; } #custom-ns-form .hs-form .hs-form-field label { margin-bottom:6px; display: inline-block; } #custom-ns-form .hs-form .hs-form-field input[type=date], #custom-ns-form .hs-form .hs-form-field input[type=email], #custom-ns-form .hs-form .hs-form-field input[type=number], #custom-ns-form .hs-form .hs-form-field input[type=phone], #custom-ns-form .hs-form .hs-form-field input[type=tel], #custom-ns-form .hs-form .hs-form-field input[type=text], #custom-ns-form .hs-form .hs-form-field textarea, #custom-ns-form .hs-form .hs-form-field select{ border: 1px solid #C4C4C4; margin-top: 0px; height: auto; padding: 10px 12px; font-size: 16px; width: 100%; box-sizing: border-box; } #custom-ns-form .hs-form .form-columns-2 .hs-form-field:first-child .input { margin-right: 16px; } /***** .legal-consent-container****/ #custom-ns-form .hs-form .hs-form-booleancheckbox-display input[type=checkbox] { -webkit-appearance: revert; } #custom-ns-form .hs-form .hs-form-booleancheckbox-display{ position: relative; } #custom-ns-form ul.inputs-list li.hs-form-booleancheckbox label input { height: 24px; left: 0; opacity: 0; position: absolute; top: 0; width: 24px; } #custom-ns-form .hs-form ul.inputs-list li.hs-form-booleancheckbox label span { margin-left: 26px; } #custom-ns-form .hs-form ul.inputs-list li.hs-form-booleancheckbox label span:before { border: 1px solid #c4c4c4; content: ""; height: 14px; left: 0; position: absolute; top: 1px; width: 14px; } #custom-ns-form .hs-form ul.inputs-list li.hs-form-booleancheckbox label span:after { color: #fff; content: ""; height: 11px; left: 5px; position: absolute; top: 1px; transform: rotate(45deg); transition: opacity .2s ease-in-out; width: 5px; } #custom-ns-form .hs-form ul.inputs-list li.hs-form-booleancheckbox input[type=checkbox]:checked+span:before { background: #7d5ea8; border: 1px solid #7d5ea8; } #custom-ns-form .hs-form ul.inputs-list li.hs-form-booleancheckbox input[type="checkbox"]:checked + span:after { border: 2px solid; border-left: 0; border-top: 0; } #custom-ns-form .hs-form .hs-form-booleancheckbox-display>span{ display: block; } #custom-ns-form .hs-form .hs-form-booleancheckbox-display p { font-size: 12px; font-style: normal; line-height: normal; color: #000; font-weight: 600; } #custom-ns-form .hs-form .legal-consent-container div:not(:last-child) { margin-bottom: 10px; } #custom-ns-form .hs-form .legal-consent-container .hs-richtext { font-size: 12px; font-style: normal; line-height: normal; color: #000; } #custom-ns-form .hs-form .legal-consent-container .hs-richtext p{ font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; } #custom-ns-form .hs-form .legal-consent-container .hs-richtext p a{ font-size: 12px; line-height: normal; } #custom-ns-form .hs-form .legal-consent-container .hs-richtext p u{ text-decoration-color: #7D5EA8; } #custom-ns-form .hs-form .legal-consent-container .hs-richtext p u:hover { text-decoration: none; } #custom-ns-form .hs-form .legal-consent-container .hs-richtext p a { color: #7D5EA8; } #custom-ns-form .hs-form .legal-consent-container .hs-richtext p a:hover{ text-decoration: none; } #custom-ns-form .hs-form select { -webkit-padding-end: 48px !important; -webkit-padding-start: 10px !important; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url('data:image/svg+xml,'); background-position: right 12px center; background-repeat: no-repeat; background-size: 14px; border: 1px solid #c4c4c4; width: 100%; } #custom-ns-form .hs-form .hs-form-field select{ height: 42px; } #custom-ns-form .hs-form ul.multi-container { list-style: none; margin-left: 0; padding-left: 0; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio, #custom-ns-form ul.inputs-list.multi-container li.hs-form-checkbox { margin: 0px 0px 4px 0px; line-height: normal; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio label, #custom-ns-form ul.inputs-list.multi-container li.hs-form-checkbox label { position: relative; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio label input, #custom-ns-form ul.inputs-list.multi-container li.hs-form-checkbox label input{ height: 24px; left: 0; opacity: 0; position: absolute; top: 0; width: 24px; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio label span, #custom-ns-form ul.inputs-list.multi-container li.hs-form-checkbox label span{ cursor: pointer; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio label span:before { border-radius: 50%; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio label span:before, #custom-ns-form ul.inputs-list li.hs-form-booleancheckbox label span:before, #custom-ns-form ul.inputs-list.multi-container li.hs-form-checkbox label span:before{ background: #fff; border: 1px solid #c4c4c4; content: ""; height: 14px; position: absolute; width: 14px; left: 0; top: 5px; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio label span:after { border-radius: 50%; content: ""; left: 3px; position: absolute; top: 8px; transition: opacity .2s ease-in-out; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-checkbox label span:after { border: 2px solid; border-left: 0; border-top: 0; content: ""; height: 11px; left: 5px; position: absolute; top: 5px; transform: rotate(45deg); transition: opacity .2s ease-in-out; width: 5px; color:white; opacity: 0; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-checkbox label input:checked+span:after { opacity: 1; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-checkbox input[type="checkbox"]:checked + span:before { background:#7D5EA8; border: 1px solid #7D5EA8; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio input[type="radio"]:checked + span:before{ border: 1px solid #7D5EA8; background:#7D5EA8; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio input[type="radio"]:checked + span:after{ border: 4px solid white; } #custom-ns-form ul.inputs-list.multi-container li.hs-form-radio label span, #custom-ns-form ul.inputs-list.multi-container li.hs-form-checkbox label span{ margin-left: 26px; font-size: 12px; } #custom-ns-form .input.show-close{ position: relative; } #custom-ns-form .input .svg-close-icon{ display: none; } #custom-ns-form .input.show-close .svg-arrow-icon, #custom-ns-form .input.show-close .svg-close-icon{ position: absolute; top: 0; bottom: 0; right: 6px; height: auot; height: auto; height: 22px; width: 22px; display: flex; align-items: center; justify-content: center; margin: auto; cursor:pointer; display: block; } #custom-ns-form .search-bar { list-style-type: none; margin: 0; padding: 0; background-color: #ffffff; border: 1px solid #ccc; border-top: none; border-radius: 4px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); max-height: 200px; overflow-y: auto; width: 100%; } #custom-ns-form .search-bar li { padding: 10px; cursor: pointer; transition: background-color 0.3s; } #custom-ns-form .search-bar li:hover { background-color: #f1f1f1; } #custom-ns-form .search-bar li{ font-size: 12px; color: #333; } #custom-ns-form .hs_icasa_school_sector__other_{ margin-top: -12px !important; } @media(max-width:480px) { #custom-ns-form .hs-form { padding: 28px 25px 30px; } #custom-ns-form .hs-button, #custom-ns-form input[type=submit] { font-size: 16px; padding: 12px 22px; } #custom-ns-form .form-columns-2 .hs-form-field { width: 100%; } #custom-ns-form .hs-form .form-columns-2 .input, #custom-ns-form .hs-form .form-columns-1 .input, #custom-ns-form .hs-form .form-columns-2 .hs-form-field:first-child .input{ margin-right: 0; } #custom-ns-form .three-column-lists .input ul li { flex: 0 0 49.33%; } } #custom-ns-form input { box-sizing: border-box; border: 1px solid #ccc; height: 30px; padding: 10px; } #custom-ns-form input.loading { background: url(https://knock.turdesigner.com/content/images/loading.gif) no-repeat right center; background-size:100px; background-position-x: 108%; } #custom-ns-form .no-list{ list-style: none; } #custom-ns-form #change_school_lookup_input_trigger{ cursor: pointer; margin-top: -14px; font-size: 12px; color: #7e5fa8; text-decoration: underline; } #custom-ns-form .hidden{ display: none; } ` }); function onFormReady($form) { setElements($form) appendElement() setEvents() setActions(); customForm.querySelector("[type='submit']").addEventListener("click", function (event) { if (!isAllValidationsOk()) { event.preventDefault() } }, false); } function setElements($form) { customForm = document.getElementById('custom-ns-form') allFormFieldEle = customForm.querySelectorAll(".field") hsSchoolProductOfInterestContainer = customForm.querySelectorAll(".hs_school_product_of_interest")[0] hsSchoolYearLevelsContainer = customForm.querySelectorAll(".hs_icasa_year_levels")[0] ContactFirstNameEle = customForm.querySelector("#firstname-" + formId) ContactLastNameEle = customForm.querySelector("#lastname-" + formId) ContactEmailEle = customForm.querySelector("#email-" + formId) ContactPhoneEle = customForm.querySelector("#phone-" + formId) CountryEle = customForm.querySelector("#country_code-" + formId) schoolNameEle = customForm.querySelector("#company-" + formId) schoolNameTextEle = customForm.querySelector("#icasa_school_name__other_-" + formId) MailingAddress1Ele = customForm.querySelector("#icasa_mailing_address_street_1-" + formId) MailingAddress2Ele = customForm.querySelector("#icasa_mailing_address_street_2-" + formId) MailingCityEle = customForm.querySelector("#icasa_mailing_address_suburb-" + formId) MailingStateEle = customForm.querySelector("#icasa_mailing_address_state_province-" + formId) MailingPostCodeEle = customForm.querySelector("#icasa_mailing_address_post_code-" + formId) CourierAddress1Ele = customForm.querySelector("#icasa_courier_address_street_1-" + formId) CourierAddress2Ele = customForm.querySelector("#icasa_courier_address_street_2-" + formId) CourierCityEle = customForm.querySelector("#icasa_courier_address_suburb-" + formId) CourierStateEle = customForm.querySelector("#icasa_courier_address_state_province-" + formId) CourierPostCodeEle = customForm.querySelector("#icasa_courier_address_post_code-" + formId) AdminEmailEle = customForm.querySelector("#icasa_admin_email-" + formId) SchoolPhoneEle = customForm.querySelector("#icasa_school_phone_number-" + formId) SchoolWebEle = customForm.querySelector("#icasa_school_website_url-" + formId) AbnEle = customForm.querySelector("#icasa_school_abn-" + formId) SectorEle = customForm.querySelector("#icasa_school_sector-" + formId) SectorOtherEle = customForm.querySelector("#icasa_school_sector__other_-" + formId) CompanyId = customForm.querySelector("#icasa_form_contact_school_id-" + formId) YearLevelEle = customForm.querySelectorAll("input[name='icasa_year_levels']") SCFirstNameEle = customForm.querySelector("#icasa_school_coordinator_first_name-" + formId) SCLastNameEle = customForm.querySelector("#icasa_school_coordinator_last_name-" + formId) SCEmailEle = customForm.querySelector("#icasa_school_coordinator_email-" + formId) PrincipleFirstNameEle = customForm.querySelector("#icasa_principal_first_name-" + formId) PrincipleLastNameEle = customForm.querySelector("#icasa_principal_last_name-" + formId) PrincipleEmailEle = customForm.querySelector("#icasa_principal_email-" + formId) PrinciplePhoneEle = customForm.querySelector("#icasa_principal_phone_number-" + formId) schoolAlreadyRegisteredAlert = customForm.querySelector("#school_already_registered_alert") changeSchoolLookupInputTrigger = customForm.querySelector("#change_school_lookup_input_trigger") legalConsentContainer = customForm.querySelectorAll(".legal-consent-container")[0] hsSubmit = customForm.querySelectorAll(".hs_submit")[0] hidableHeadings = customForm.querySelectorAll(".hidable_heading") otherCountryWarning = customForm.querySelector("#other_country_warnning") isSameAddressContainerEle = customForm.querySelector('#school_mailing_and_courier_address_is_common_checkbox_container'); schoolLevelContainerEle = customForm.querySelector('.hs_icasa_year_levels'); marketingOptEle = customForm.getElementsByClassName('hs-LEGAL_CONSENT.subscription_type_43805845')[0]; } function setEvents() { schoolNameEle.onkeypress = debounce(onSchoolNameChange, 1500); CountryEle.addEventListener('change', onCountyChange); isSameAddressCheckBoxEle.addEventListener('click', onChangeIsSameMailAddress); schoolNameOtherSubmitEle.addEventListener('click', onSetCustomSchoolName); changeSchoolLookupInputTrigger.addEventListener('click', onchangeSchoolLookupInputTriggerClicked) } function setActions() { //hide element groupActionForEleList(hidableHeadings, 'hide') groupActionForEleList(allFormFieldEle, 'hide') isSameAddressContainerEle.classList.add('hidden') schoolAlreadyRegisteredAlert.classList.add('hidden') changeSchoolLookupInputTrigger.classList.add('hidden') legalConsentContainer.classList.add('hidden') hsSubmit.classList.add('hidden') otherCountryWarning.classList.add('hidden'); // show wanted element hsSchoolProductOfInterestContainer.classList.remove('hidden') actionForGrandParent(ContactFirstNameEle, 'show'); actionForGrandParent(ContactLastNameEle, 'show'); actionForGrandParent(ContactEmailEle, 'show'); actionForGrandParent(ContactPhoneEle, 'show'); actionForGrandParent(CountryEle, 'show'); //change drop down case convertFirstOptionToLower(CountryEle) //move helper text moveHelperTextToBottom(AdminEmailEle) } function addError(ele, error) { var errorUl = ele.parentElement.parentElement.querySelector('.no-list.hs-error-msgs.inputs-list') if (errorUl == null) { errorUl = document.createElement("ul") errorUl.setAttribute('class', "no-list hs-error-msgs inputs-list") errorUl.setAttribute('role', "alert") } errorUl.innerHTML = ""; const errorLi = document.createElement("li") const errorLabel = document.createElement("label") errorLabel.setAttribute('class', "hs-error-msg hs-main-font-element") errorLabel.innerHTML = error; errorLi.append(errorLabel); errorUl.append(errorLi); ele.parentElement.parentElement.appendChild(errorUl) ele.addEventListener('change', function (e) { errorUl.innerHTML = ""; }) } function isAllValidationsOk() { if (isSearchableSchoolLookUp && isEmpty(schoolNameEle)) { addError(schoolNameEle, "Please complete this required field.") return false; } if (!isSearchableSchoolLookUp && isEmpty(schoolNameTextEle)) { addError(schoolNameTextEle, "Please complete this required field.") return false; } return true; } function isEmpty(ele) { if (ele.value == "" || ele.value == undefined || ele.value == null) { return true; } return false; } function appendElement() { // add search dropdown schoolNameEle.parentElement.append(schoolListEle); //add three column checkbox schoolLevelContainerEle.classList.add("three-column-lists"); // add is same email checkbox var newCheckboxFieldHTML = `
`; isSameAddressContainerEle.innerHTML = newCheckboxFieldHTML; isSameAddressCheckBoxEle = isSameAddressContainerEle.querySelector('#my_school_mailing_and_courier_address_are_the_same') // add svgIco to school ele other var schoolNameContainer = customForm.querySelector('.hs_icasa_school_name__other_'); var schoolElement = schoolNameContainer.querySelector('.input'); schoolElement.classList.add("show-close"); var svgArrowIcon = ''; if (schoolElement) { schoolNameOtherSubmitEle = document.createElement("div"); schoolNameOtherSubmitEle.classList.add("svg-close-icon"); schoolElement.append(schoolNameOtherSubmitEle); var closeIconContainer = customForm.querySelector('.svg-close-icon'); closeIconContainer.innerHTML = svgArrowIcon; } } function onFormSubmitted($form) { } function onBeforeFormSubmit($form) { } function onSetCustomSchoolName(e) { e.preventDefault() schoolName = e.target.value; clearPopulatedProperties(); unHideHalfOfTheFormWhenSchoolSelect(); } async function onSchoolNameChange(e) { const wordCount = e.target.value.length if (wordCount { let schoolLi = document.createElement('li'); schoolLi.innerHTML = school['searchLookupValue'] schoolLi.dataset.school = school['searchLookupValue'] schoolLi.dataset.school_id = school['schoolId'] schoolLi.addEventListener('click', onSchoolSelect); schoolListEle.appendChild(schoolLi) }); schoolNameEle.classList.remove("loading"); } function onChangeIsSameMailAddress(e) { if (e.target.checked) { setValueWithChange(CourierAddress1Ele, MailingAddress1Ele.value) setValueWithChange(CourierAddress2Ele, MailingAddress2Ele.value) setValueWithChange(CourierCityEle, MailingCityEle.value) setValueWithChange(CourierStateEle, MailingCityEle.value) setValueWithChange(CourierPostCodeEle, MailingPostCodeEle.value) } else { setValueWithChange(CourierAddress1Ele, "") setValueWithChange(CourierAddress2Ele, "") setValueWithChange(CourierCityEle, "") setValueWithChange(CourierStateEle, "") setValueWithChange(CourierPostCodeEle, "") } } function onCountyChange(e) { country = e.target.value; if (!nonOtherCountries.includes(country)) { otherCountryWarning.classList.remove('hidden'); changeSchoolLookupInputTrigger.classList.add('hidden'); actionForGrandParent(schoolNameEle, 'hide'); actionForGrandParent(schoolNameTextEle, 'hide'); return; } changeSchoolLookupInputTrigger.classList.add('hidden'); otherCountryWarning.classList.add('hidden'); showSchoolNameField(); if (country == "AU" && schoolName != null) { actionForGrandParent(AbnEle, 'show') } else { actionForGrandParent(AbnEle, 'hide') } } async function onSchoolSelect(e) { schoolAlreadyRegisteredAlert.classList.add("hidden"); clearPopulatedProperties(); schoolListEle.innerHTML = "" const schoolId = e.target.dataset.school_id; schoolNameEle.classList.add("loading"); var schoolInfo = await getSingleSchool(schoolId); setValueWithChange(schoolNameEle, schoolInfo.name); schoolNameEle.dataset.school = schoolInfo.name schoolNameEle.dataset.school_id = schoolInfo.id setPrePopulatedData(schoolInfo) schoolNameEle.classList.remove("loading"); if (schoolInfo.isRegistered) { hideHalfOfTheFormWhenSchoolSelect() schoolAlreadyRegisteredAlert.classList.remove("hidden"); changeSchoolLookupInputTrigger.classList.add('hidden'); return; } unHideHalfOfTheFormWhenSchoolSelect(); } function unHideHalfOfTheFormWhenSchoolSelect() { groupActionForEleList(hidableHeadings, 'show') actionForGrandParent(MailingAddress1Ele, 'show') actionForGrandParent(MailingAddress2Ele, 'show') actionForGrandParent(MailingCityEle, 'show') actionForGrandParent(MailingStateEle, 'show') actionForGrandParent(MailingPostCodeEle, 'show') actionForGrandParent(CourierAddress1Ele, 'show') actionForGrandParent(CourierAddress2Ele, 'show') actionForGrandParent(CourierCityEle, 'show') actionForGrandParent(CourierStateEle, 'show') actionForGrandParent(CourierPostCodeEle, 'show') actionForGrandParent(AdminEmailEle, 'show') actionForGrandParent(SchoolPhoneEle, 'show') actionForGrandParent(SchoolWebEle, 'show') actionForGrandParent(SectorEle, 'show') groupActionForEleList(YearLevelEle, 'show') actionForGrandParent(SCFirstNameEle, 'show') actionForGrandParent(SCLastNameEle, 'show') actionForGrandParent(SCEmailEle, 'show') actionForGrandParent(PrincipleFirstNameEle, 'show') actionForGrandParent(PrincipleLastNameEle, 'show') actionForGrandParent(PrincipleEmailEle, 'show') actionForGrandParent(PrinciplePhoneEle, 'show') legalConsentContainer.classList.remove('hidden') hsSchoolYearLevelsContainer.classList.remove('hidden') hsSubmit.classList.remove('hidden') if (country == "AU") { actionForGrandParent(AbnEle, 'show') } marketingOptEle.classList.remove('hidden'); } function hideHalfOfTheFormWhenSchoolSelect() { groupActionForEleList(hidableHeadings, 'hide') actionForGrandParent(MailingAddress1Ele, 'hide') actionForGrandParent(MailingAddress2Ele, 'hide') actionForGrandParent(MailingCityEle, 'hide') actionForGrandParent(MailingStateEle, 'hide') actionForGrandParent(MailingPostCodeEle, 'hide') actionForGrandParent(CourierAddress1Ele, 'hide') actionForGrandParent(CourierAddress2Ele, 'hide') actionForGrandParent(CourierCityEle, 'hide') actionForGrandParent(CourierStateEle, 'hide') actionForGrandParent(CourierPostCodeEle, 'hide') actionForGrandParent(AdminEmailEle, 'hide') actionForGrandParent(SchoolPhoneEle, 'hide') actionForGrandParent(SchoolWebEle, 'hide') actionForGrandParent(SectorEle, 'hide') groupActionForEleList(YearLevelEle, 'hide') actionForGrandParent(SCFirstNameEle, 'hide') actionForGrandParent(SCLastNameEle, 'hide') actionForGrandParent(SCEmailEle, 'hide') actionForGrandParent(PrincipleFirstNameEle, 'hide') actionForGrandParent(PrincipleLastNameEle, 'hide') actionForGrandParent(PrincipleEmailEle, 'hide') actionForGrandParent(PrinciplePhoneEle, 'hide') legalConsentContainer.classList.add('hidden') hsSchoolYearLevelsContainer.classList.add('hidden') hsSubmit.classList.add('hidden') actionForGrandParent(AbnEle, 'hide') isSameAddressContainerEle.classList.add('hidden') } function actionForGrandParent(ele, action = "hide") { if (action == "hide") { ele.parentElement.parentElement.classList.add('hidden') } if (action == "show") { ele.parentElement.parentElement.classList.remove('hidden') } } function groupActionForEleList(elements, action = "hide") { if (action == "hide") { elements.forEach(ele => { ele.classList.add('hidden') }) } if (action == "show") { elements.forEach(ele => { ele.classList.remove('hidden') }) } } function onchangeSchoolLookupInputTriggerClicked() { isSearchableSchoolLookUp = !isSearchableSchoolLookUp; showSchoolNameField(); } function showSchoolNameField() { schoolAlreadyRegisteredAlert.classList.add("hidden"); schoolName = null if (isSearchableSchoolLookUp) { actionForGrandParent(schoolNameEle, 'show'); actionForGrandParent(schoolNameTextEle, 'hide'); changeSchoolLookupInputTrigger.innerHTML = "Can't find your school? Click here." } else { actionForGrandParent(schoolNameEle, 'hide'); actionForGrandParent(schoolNameTextEle, 'show'); changeSchoolLookupInputTrigger.innerHTML = "Go back to school search. Click here." } setValueWithChange(schoolNameEle, "") setValueWithChange(schoolNameTextEle, "") changeSchoolLookupInputTrigger.classList.remove('hidden') } async function schoolLookup(countyCode, query) { try { const headers = new Headers(); headers.append("Accept", "*/*"); headers.append("Access-Control-Allow-Origin", "*"); headers.append("x-api-key", schoolLookUpKey); const requestOptions = { method: "GET", headers: headers, }; const response = await fetch("https://app-primdapublicapi-prd.azurewebsites.net/api/School/GetSchoolBySearchTextAndIsoCode/" + countyCode + "/" + encodeURI(query), requestOptions) return await response.json(); } catch (error) { addError(schoolNameEle, "something went wrong. please try again") console.log(error); return [] } } async function getSingleSchool(schoolID) { try { const headers = new Headers(); headers.append("Accept", "*/*"); headers.append("Access-Control-Allow-Origin", "*"); headers.append("x-api-key", schoolLookUpKey); const requestOptions = { method: "GET", headers: headers, }; const response = await fetch("https://app-primdapublicapi-prd.azurewebsites.net/api/School/GetSchoolById/" + schoolID, requestOptions) return await response.json(); } catch (error) { console.error(error); return []; } } function clearPopulatedProperties() { setValueWithChange(CourierAddress1Ele, "") setValueWithChange(CourierAddress2Ele, "") setValueWithChange(CourierCityEle, "") setValueWithChange(CourierStateEle, "") setValueWithChange(CourierPostCodeEle, "") setValueWithChange(MailingAddress1Ele, "") setValueWithChange(MailingAddress2Ele, "") setValueWithChange(MailingCityEle, "") setValueWithChange(MailingStateEle, "") setValueWithChange(MailingPostCodeEle, "") isSameAddressContainerEle.classList.add('hidden') setValueWithChange(AdminEmailEle, "") setValueWithChange(SchoolPhoneEle, "") setValueWithChange(SchoolWebEle, "") setValueWithChange(AbnEle, "") setValueWithChange(CompanyId, "") } function setPrePopulatedData(schoolInfo) { const mailingAddress = {} const CourierAddress = {} schoolInfo['addresses'].forEach(function (address) { if (address['addressType'] == 1) { mailingAddress['address1'] = address['address1'] ?? "" mailingAddress['address2'] = address['address2'] ?? "" mailingAddress['city'] = address['city'] ?? "" mailingAddress['region'] = address['region'] ? address['region']['name'] ?? "" : "" mailingAddress['postalCode'] = address['postalCode'] ?? "" } if (address['addressType'] == 2) { CourierAddress['address1'] = address['address1'] ?? "" CourierAddress['address2'] = address['address2'] ?? "" CourierAddress['city'] = address['city'] ?? "" CourierAddress['region'] = address['region'] ? address['region']['name'] ?? "" : "" CourierAddress['postalCode'] = address['postalCode'] ?? "" } }) if (Object.keys(CourierAddress).length != 0) { setValueWithChange(CourierAddress1Ele, CourierAddress['address1']) setValueWithChange(CourierAddress2Ele, CourierAddress['address2']) setValueWithChange(CourierCityEle, CourierAddress['city']) setValueWithChange(CourierStateEle, CourierAddress['region']) setValueWithChange(CourierPostCodeEle, CourierAddress['postalCode']) isSameAddressContainerEle.classList.add('hidden') } else { isSameAddressContainerEle.classList.remove('hidden') } if (Object.keys(mailingAddress).length != 0) { setValueWithChange(MailingAddress1Ele, mailingAddress['address1']) setValueWithChange(MailingAddress2Ele, mailingAddress['address2']) setValueWithChange(MailingCityEle, mailingAddress['city']) setValueWithChange(MailingStateEle, mailingAddress['region']) setValueWithChange(MailingPostCodeEle, mailingAddress['postalCode']) } setValueWithChange(AdminEmailEle, schoolInfo['email'] ?? "") setValueWithChange(SchoolPhoneEle, schoolInfo['phoneNumber'] ?? "") setValueWithChange(SchoolWebEle, schoolInfo['webSite'] ?? "") setValueWithChange(AbnEle, schoolInfo['abn'] ?? "") setValueWithChange(CompanyId, schoolInfo['hubSpotCompanyId'] ?? "") } window.addEventListener('click', function (e) { if (!schoolListEle.contains(e.target) && !schoolListEle.classList.contains('hidden')) { schoolListEle.classList.add('hidden'); if (schoolNameEle.dataset.school == null || schoolNameEle.dataset.school == undefined) { setValueWithChange(schoolNameEle, "") return; } setValueWithChange(schoolNameEle, schoolNameEle.dataset.school) } }); function wrap(el, wrapper) { el.parentNode.insertBefore(wrapper, el); wrapper.appendChild(el); } function debounce(cb, interval, immediate) { var timeout; return function () { var context = this, args = arguments; var later = function () { timeout = null; if (!immediate) cb.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, interval); if (callNow) cb.apply(context, args); }; }; function moveHelperTextToBottom(element) { const helperTextEle = element.parentElement.parentElement.querySelector('legend'); helperTextEle.style.marginTop = "8px"; element.parentElement.parentElement.appendChild(helperTextEle) } function convertFirstOptionToLower(element) { if (element && element.options && element.options.length > 0) { const firstOption = element.options[0]; if (firstOption.text === "Please Select") { firstOption.text = "Please select"; } } } function setValueWithChange(inputElement, value) { inputElement.value = value; var event = new InputEvent('input', { bubbles: true }); inputElement.dispatchEvent(event); event = new Event('change', { bubbles: true }); inputElement.dispatchEvent(event); } }