Untitled
unknown
plain_text
a year ago
36 kB
8
Indexable
(function(){ var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode('@import url(\'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600&display=swap\');html body .ry-1-0-form-grid { box-sizing: border-box; display: flex; flex-flow: column; width: 100%;}html body .ry-1-0-form-grid-main { margin-top: 32px; margin-bottom: 32px; max-width: 350px; width: 100%; margin-left: auto; margin-right: auto;}/* hiding original form */html body .ry-1-0-parent>.MuiBox-root+div>form,html body .ry-1-0-parent>.MuiBox-root+div>div:first-child+.ry-1-0-form-grid-main~.MuiBox-root { display: none !important;}/* hiding original form */html body .ry-1-0-form-grid[data-step-1] { margin-top: -32px;}html body .ry-1-0-form-grid-item { box-sizing: border-box; margin: 0px; padding-top: 32px; max-width: inherit; --errclr: #B30309;}html body .ry-1-0-form-grid-item_wpr { border: 0; margin: 0; display: inline-flex; padding: 0; position: relative; min-width: 0; flex-direction: column; vertical-align: top; width: 100%;}html body .ry-1-0-form-grid-item[data-group-box] .ry-1-0-form-grid-item_wpr { flex-direction: row; grid-gap: 15px;}html body .ry-1-0-form-grid-item-label { font-family: Averta, Helvetica Neue, Arial, sans-serif; line-height: 1; padding: 0; color: #5E5A66; display: block; font-size: 12px; font-weight: 800; padding-bottom: 0.25rem; transform: translateX(0) translateY(-2px); transform-origin: top left; top: 0; left: 0; position: absolute;}html body .ry-1-0-form-grid-item_inputbase { color: #171619; cursor: text; display: inline-flex; font-size: 14px; box-sizing: border-box; align-items: center; font-family: Averta, Helvetica Neue, Arial, sans-serif; font-weight: 400; line-height: 1.1876em; padding: 0.25rem 0.75rem 0.15rem; overflow: hidden; position: relative; box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.04); caret-color: #4500A5; border-color: #CCC9D1; border-style: solid; border-width: 1px; border-radius: 4px; background-color: #FFF; margin-top: 16px; width: 100%;}html body .ry-1-0-form-grid-item_inputbase>input { font: inherit; color: currentColor; width: 100%; border: 0; height: 1.1876em; margin: 0; display: block; min-width: 0; background: none; box-sizing: content-box; animation-name: mui-auto-fill-cancel; letter-spacing: inherit; animation-duration: 10ms; -webkit-tap-highlight-color: transparent; padding: 0 12px 12px 0; font-size: 16px; margin-top: 8px; border: none; outline: none;}html body .ry-1-0-form-grid-item-errbox { left: 0px; bottom: -20px; position: absolute; font-weight: 400; color: var(--errclr); font-size: 11px; font-family: Averta, Helvetica Neue, Arial, sans-serif; line-height: 1.66; display: none;}/* on err */html body .ry-1-0-form-grid-item.ry-1-0-err .ry-1-0-form-grid-item-errbox { display: block !important;}html body .ry-1-0-form-grid-item.ry-1-0-err .ry-1-0-form-grid-item-label { color: var(--errclr) !important;}html body .ry-1-0-form-grid-item.ry-1-0-err .ry-1-0-form-grid-item_inputbase { border-color: var(--errclr) !important;}/* on err end */html body .ry-1-0-form-seperator { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 39px;}html body .ry-1-0-form-seperator>.ry-1-0-line { width: 188px; height: 2px; background: #E9E9E9; margin-bottom: 24px;}html body .ry-1-0-form-seperator>.ry-1-0-heading { color: #171619; text-align: center; font-size: 16px; font-style: normal; font-weight: 600; line-height: 120%; /* 19.2px */ font-family: \'Plus Jakarta Sans\', sans-serif;}html body .ry-1-0-form-seperator:not(.ry-1-0-active)>.ry-1-0-heading { color: #BAB8B8;}html body .ry-1-0-form-grid-item[data-group-box] .ry-1-0-form-grid-item_wpr>.ry-1-0-box-1 { flex-basis: 70%;}html body .ry-1-0-form-grid-item[data-group-box] .ry-1-0-form-grid-item_wpr>.ry-1-0-box-2 { flex: 1 1 0%; position: relative;}html body .ry-1-0-form-grid-item-checklabel { display: inline-flex; -webkit-box-align: center; align-items: center; cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent;}html body .ry-1-0-form-grid-item-typeography { line-height: 1.5; letter-spacing: 0.00938em; margin: 0px; font-family: Averta, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 400;}html body .ry-1-0-form-grid-item-checkbox { display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; background-color: transparent; outline: 0px; border: 0px; margin: 0px; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; padding: 9px; border-radius: 50%; color: rgba(0, 0, 0, 0.6); font-family: Averta, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 400; isolation: isolate; margin-left: -9px;}html body .ry-1-0-form-grid-item-checkbox input { cursor: inherit; position: absolute; opacity: 0; width: 100%; height: 100%; top: 0px; left: 0px; margin: 0px; padding: 0px; z-index: 1; border: none; outline: none;}html body .ry-1-0-form-grid-item-checkbox:hover { background-color: rgba(69, 0, 165, 0.04); box-shadow: none;}html body .ry-1-0-form-grid-item-checkbox input~svg { user-select: none; width: 1em; height: 1em; display: inline-block; fill: currentcolor; flex-shrink: 0; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; font-size: 1.5rem;}html body .ry-1-0-form-grid-item-checkbox input:checked+svg { color: rgb(69, 0, 165);}html body .ry-1-0-form-grid-item-checkbox input:checked { display: none !important;}html body .ry-1-0-form-grid-item-checkbox input:not(:checked)~.ry-1-0-checked-svg,html body .ry-1-0-form-grid-item-checkbox input:checked~.ry-1-0-not-checked-svg { display: none !important;}html body .ry-1-0-submit-cta { display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: 0px; margin: 0px; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; min-width: 64px; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; width: 100%; box-shadow: none; border-color: rgb(69, 0, 165); background-color: rgb(69, 0, 165); color: rgb(255, 255, 255); padding: 16px 24px; border-radius: 1000px; font-family: Averta, "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 14px; text-transform: none; white-space: nowrap; border: 1px solid transparent;}html body .ry-1-0-submit-cta:hover { border-color: rgb(143, 115, 227); background-color: rgb(143, 115, 227); box-shadow: none; text-decoration: none;}html body .ry-1-0-submit-cta:disabled { background-color: rgb(245, 245, 247); color: rgb(119, 115, 128); cursor: not-allowed; border: none;}html body .ry-1-0-form-grid-item.ry-1-0-notice p { color: #5E5A66; font-size: 12px; font-family: Averta, Helvetica Neue, Arial, sans-serif; font-weight: 400; line-height: 1.3; margin: 0;}html body .ry-1-0-form-grid-item.ry-1-0-notice { padding-top: 16px !important;}html body .city-list { max-height: 200px; opacity: 1; transform: none; min-width: 222px; transition: opacity 281ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 187ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transform-origin: 0px 0px; min-height: 16px; overflow-x: hidden; overflow-y: auto; outline: 0; position: absolute; max-width: calc(100% - 32px); box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); color: #171619; background-color: white; z-index: 9999999; top: 26px; left: 50%; transform: translateX(-50%);}html body .city-list>ul { padding-right: 15px; width: calc(100% + 15px); outline: 0; padding-top: 0; padding-bottom: 0; margin: 0; padding: 0; position: relative; list-style: none;}html body .city-list>ul>li { padding-left: 16px; min-height: auto; width: auto; overflow: hidden; font-size: 14px; box-sizing: border-box; min-height: 48px; font-family: Averta, Helvetica Neue, Arial, sans-serif; font-weight: 400; line-height: 1.5; padding-top: 6px; white-space: nowrap; padding-bottom: 6px; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; padding-right: 16px; display: flex; position: relative; text-align: left; align-items: center; justify-content: flex-start; text-decoration: none; color: inherit; border: 0; cursor: pointer; margin: 0; user-select: none; border-radius: 0; vertical-align: middle; background-color: transparent; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;}[data-zip-code-state] .ry-1-0-box-1 { position: relative;}[data-zip-code-state] .ry-1-0-box-1:not(.show-list) .city-list { display: none !important;}[data-zip-code-state] input#stt { pointer-events: none !important;}[data-zip-code-state] .ry-1-0-box-1 svg { width: 2rem;}input#stt::placeholder { color: #000 !important;}'));document.head.appendChild(style); (function (w) { "use strict"; var tag = "ry-1-0", debug = document.cookie.indexOf("cfQA") > -1, window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w; var nativeFieldsSelectors = { "firstNme": "#firstName", "lastNme": "#lastName", "dob": "#dateOfBirth", "eml": "#email", "ceml": "#confirmEmail", "phne": "#phone", "saddress": '[id^="serviceAddress.addressLine1"]', "adduni": '[id^="serviceAddress.unitNumber"]', "cty": '[id^="serviceAddress.city"]', "stt": '[id^="serviceAddress.state"]', "zp": '[id^="serviceAddress.zipCode"]' } const fieldsValues = { "fnm": "", "lnm": "", "dob": "", "email": "", "cemail": "", "phone": "", "streetAddress": "", "unit": "", "city": "", "state": "", "zip": "", "checkBox": "" } window[tag] = { log: function (msg) { if (debug) console.log("[EXPO]", tag, "-->", msg); }, waitForElement: function (cssSelector, callback) { var stop, elementCached, timeout, check = function () { try { elementCached = document.querySelector(cssSelector); if (stop) return; if (elementCached) { callback(elementCached); clearTimeout(timeout); window[tag].log(cssSelector + " found"); } else { window.requestAnimationFrame(check); } } catch (err) { window[tag].log(err.message); } }; window.requestAnimationFrame(check); timeout = setTimeout(function () { stop = true; window[tag].log(cssSelector + " not found"); }, 10000); }, testStart: function () { try { this.waitForElement("body", function (docBody) { docBody.classList.add(tag); }); // INITIALIZE THE TEST initVariation(); window[tag].log("test running"); } catch (err) { window[tag].log(err.message); } }, }; // INITIALIZE VARIATION window[tag].testStart(); const statesHTML = ` <div class="city-list"><ul role="listbox"><li data-value="AL">Alabama</li><li tabindex="-1" role="option" aria-disabled="false" data-value="AK">Alaska</li><li tabindex="-1" role="option" aria-disabled="false" data-value="AZ">Arizona</li><li tabindex="-1" role="option" aria-disabled="false" data-value="AR">Arkansas</li><li tabindex="-1" role="option" aria-disabled="false" data-value="CA">California</li><li tabindex="-1" role="option" aria-disabled="false" data-value="CO">Colorado</li><li tabindex="-1" role="option" aria-disabled="false" data-value="CT">Connecticut</li><li tabindex="-1" role="option" aria-disabled="false" data-value="DE">Delaware</li><li tabindex="-1" role="option" aria-disabled="false" data-value="DC">District Of Columbia</li><li tabindex="-1" role="option" aria-disabled="false" data-value="FL">Florida</li><li tabindex="-1" role="option" aria-disabled="false" data-value="GA">Georgia</li><li tabindex="-1" role="option" aria-disabled="false" data-value="HI">Hawaii</li><li tabindex="-1" role="option" aria-disabled="false" data-value="ID">Idaho</li><li tabindex="-1" role="option" aria-disabled="false" data-value="IL">Illinois</li><li tabindex="-1" role="option" aria-disabled="false" data-value="IN">Indiana</li><li tabindex="-1" role="option" aria-disabled="false" data-value="IA">Iowa</li><li tabindex="-1" role="option" aria-disabled="false" data-value="KS">Kansas</li><li tabindex="-1" role="option" aria-disabled="false" data-value="KY">Kentucky</li><li tabindex="-1" role="option" aria-disabled="false" data-value="LA">Louisiana</li><li tabindex="-1" role="option" aria-disabled="false" data-value="ME">Maine</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MD">Maryland</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MA">Massachusetts</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MI">Michigan</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MN">Minnesota</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MS">Mississippi</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MO">Missouri</li><li tabindex="-1" role="option" aria-disabled="false" data-value="MT">Montana</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NE">Nebraska</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NV">Nevada</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NH">New Hampshire</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NJ">New Jersey</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NM">New Mexico</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NY">New York</li><li tabindex="-1" role="option" aria-disabled="false" data-value="NC">North Carolina</li><li tabindex="-1" role="option" aria-disabled="false" data-value="ND">North Dakota</li><li tabindex="-1" role="option" aria-disabled="false" data-value="OH">Ohio</li><li tabindex="-1" role="option" aria-disabled="false" data-value="OK">Oklahoma</li><li tabindex="-1" role="option" aria-disabled="false" data-value="OR">Oregon</li><li tabindex="-1" role="option" aria-disabled="false" data-value="PA">Pennsylvania</li><li tabindex="-1" role="option" aria-disabled="false" data-value="RI">Rhode Island</li><li tabindex="-1" role="option" aria-disabled="false" data-value="SP">South Carolina</li><li tabindex="-1" role="option" aria-disabled="false" data-value="SD">South Dakota</li><li tabindex="-1" role="option" aria-disabled="false" data-value="TN">Tennessee</li><li tabindex="0" role="option" aria-disabled="false" aria-selected="true" data-value="TX">Texas</li><li tabindex="-1" role="option" aria-disabled="false" data-value="UT">Utah</li><li tabindex="-1" role="option" aria-disabled="false" data-value="VT">Vermont</li><li tabindex="-1" role="option" aria-disabled="false" data-value="VI">Virgin Islands</li><li tabindex="-1" role="option" aria-disabled="false" data-value="VA">Virginia</li><li tabindex="-1" role="option" aria-disabled="false" data-value="WA">Washington</li><li tabindex="-1" role="option" aria-disabled="false" data-value="WV">West Virginia</li><li tabindex="-1" role="option" aria-disabled="false" data-value="WI">Wisconsin</li><li tabindex="-1" role="option" aria-disabled="false" data-value="WY">Wyoming</li></ul></div> `; const newFormHTML = ` <div class="${tag}-form-grid-main"> <div class="${tag}-form-grid" data-step-1=""> <div class="${tag}-form-grid-item" data-first-name=""> <div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="firstNme">First Name</label> <div class="${tag}-form-grid-item_inputbase"><input id="firstNme" name="firstNme" placeholder="" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> </div> <div class="${tag}-form-grid-item" data-last-name=""> <div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="lastNme">Last Name</label> <div class="${tag}-form-grid-item_inputbase"><input id="lastNme" name="lastNme" placeholder="" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> </div> <div class="${tag}-form-grid-item" data-dob=""> <div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="dob">Birthday</label> <div class="${tag}-form-grid-item_inputbase"><input id="dob" name="dob" placeholder="MM/DD/YYYY" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> </div> </div> <div class="${tag}-form-seperator" data-separator-1=""> <span class="${tag}-line"></span> <span class="${tag}-heading">What is your email and phone number?</span> </div> <div class="${tag}-form-grid" data-step-2=""> <div class="${tag}-form-grid-item" data-email=""> <div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="eml">Email</label> <div class="${tag}-form-grid-item_inputbase"><input id="eml" name="eml" placeholder="" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> </div> <div class="${tag}-form-grid-item" data-confirm-email=""> <div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="ceml">Confirm Email</label> <div class="${tag}-form-grid-item_inputbase"><input id="ceml" name="ceml" placeholder="" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> </div> <div class="${tag}-form-grid-item" data-phone=""> <div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="phne">Phone</label> <div class="${tag}-form-grid-item_inputbase"><input id="phne" name="phne" placeholder="555-555-5555" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> </div> </div> <div class="${tag}-form-seperator" data-separator-2=""> <span class="${tag}-line"></span> <span class="${tag}-heading">What is your address?</span> </div> <div class="${tag}-form-grid" data-step-3=""> <div class="${tag}-form-grid-item" data-address="" data-group-box=""> <div class="${tag}-form-grid-item_wpr"> <div class="${tag}-box-1"> <label class="${tag}-form-grid-item-label" for="saddress">Street address </label> <div class="${tag}-form-grid-item_inputbase"><input id="saddress" name="saddress" placeholder="" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> <div class="${tag}-box-2"> <label class="${tag}-form-grid-item-label" for="adduni">Unit # </label> <div class="${tag}-form-grid-item_inputbase"><input id="adduni" name="adduni" placeholder="" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> </div> </div> <div class="${tag}-form-grid-item" data-city=""> <div class="${tag}-form-grid-item_wpr"><label class="${tag}-form-grid-item-label" for="cty">City</label> <div class="${tag}-form-grid-item_inputbase"><input id="cty" name="cty" placeholder="" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> </div> <div class="${tag}-form-grid-item" data-zip-code-state="" data-group-box=""> <div class="${tag}-form-grid-item_wpr"> <div class="${tag}-box-1"> <label class="${tag}-form-grid-item-label" for="stt">State </label> <div class="${tag}-form-grid-item_inputbase"><input id="stt" name="stt" placeholder="Texas" required="" type="text" inputmode="text" value="Texas"><svg class="MuiSvgIcon-root MuiSelect-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"></path></svg></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> ${statesHTML} </div> <div class="${tag}-box-2"> <label class="${tag}-form-grid-item-label" for="zp">Zip Code </label> <div class="${tag}-form-grid-item_inputbase"><input id="zp" name="zp" placeholder="" required="" type="text" inputmode="text"></div> <div class="${tag}-form-grid-item-errbox">Some required information is missing.</div> </div> </div> </div> <div class="${tag}-form-grid-item "><label class="${tag}-form-grid-item-checklabel"><span class="${tag}-form-grid-item-checkbox"><input id="sndMarketingPromos" name="sndMarketingPromos" type="checkbox" checked><svg class="${tag}-checked-svg" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CheckBoxIcon"> <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"> </path> </svg> <svg class="${tag}-not-checked-svg" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CheckBoxOutlineBlankIcon"> <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"> </path> </svg></span><span class="${tag}-form-grid-item-typeography">Please sign me up for notifications, updates and offers from Rhythm</span></label></div> <div class="${tag}-form-grid-item" data-submit-cta=""><button class="${tag}-submit-cta" tabindex="0" type="button">Next</button></div> <div class="${tag}-form-grid-item ${tag}-notice"> <p>By providing your contact information, you acknowledge that Rhythm will seek to verify your identity and credit worthiness, including by running a soft credit check that does not impact your credit rating.</p> </div> </div> </div> `; function listener() { /* These are the modifications: */ window.addEventListener("locationchange", function () { initVariation(); }); history.pushState = ((f) => function pushState() { var ret = f.apply(this, arguments); window.dispatchEvent(new Event("pushstate")); window.dispatchEvent(new Event("locationchange")); return ret; })(history.pushState); history.replaceState = ((f) => function replaceState() { var ret = f.apply(this, arguments); window.dispatchEvent(new Event("replacestate")); window.dispatchEvent(new Event("locationchange")); return ret; })(history.replaceState); window.addEventListener("popstate", () => { window.dispatchEvent(new Event("locationchange")); }); } const targetedPaths = ['/sign-up/name', '/sign-up/contact', '/sign-up/address']; function initVariation() { // expample to use of waitforelement window[tag].waitForElement("html body .MuiStepper-root", () => { document.querySelector('html body .MuiStepper-root').closest('.MuiBox-root').parentElement.classList.add(`${tag}-parent`); window[tag].waitForElement(`html body .${tag}-parent form`, function () { const pathnm = window.location.pathname; if (!document.querySelector(`.${tag}-form-grid-main`) && targetedPaths.includes(pathnm)) { document.querySelector(`html body .${tag}-parent>.MuiBox-root+div>div:first-child`).insertAdjacentHTML('afterend', newFormHTML); loadPrevForm(); // Events triggerEvents(); } else if (!targetedPaths.includes(pathnm)) { document.querySelector(`.${tag}-form-grid-main`) && document.querySelector(`.${tag}-form-grid-main`).remove(); document.querySelector(`.${tag}-parent`) && document.querySelector(`.${tag}-parent`).classList.remove(`${tag}-parent`); } }) }); } listener(); // events function triggerEvents() { // date document.querySelector("#dob").addEventListener('input', function () { autoFormatDate(this); }); // document.querySelectorAll('[data-first-name] input,[data-last-name] input,[data-dob] input,[data-email] input,[data-confirm-email] input,[data-phone] input,#saddress,#adduni,#cty,#stt,#zp').forEach(fieldFirstStep => { fieldFirstStep.addEventListener('change', function () { validateFieldStep(this); }); fieldFirstStep.addEventListener('input', function () { validateFieldStep(this); }); fieldFirstStep.addEventListener('blur', function () { validateFieldStep(this); }) }); // format date document.querySelector('[data-dob] input').addEventListener('input', function () { autoFormatDate(this); }); // show list document.querySelector(`[data-zip-code-state] .${tag}-box-1`).addEventListener('click', function () { this.classList.add('show-list'); }); // outside click document.body.addEventListener('click', function (event) { // Check if the event target is the element or one of its children if (event.target !== document.querySelector(`[data-zip-code-state] .${tag}-box-1`) && !document.querySelector(`[data-zip-code-state] .${tag}-box-1`).contains(event.target)) { document.querySelector(`[data-zip-code-state] .${tag}-box-1`) && document.querySelector(`[data-zip-code-state] .${tag}-box-1`).classList.remove('show-list'); } }); // document.querySelectorAll('html body .city-list>ul>li').forEach(cityL => { if (cityL) { cityL.addEventListener('click', function () { this.closest('.city-list').parentElement.querySelector('input').value = this.innerText; this.closest('.city-list').parentElement.querySelector('input').setAttribute("data-value", this.getAttribute('data-value')); this.closest('.city-list').parentElement.querySelector('input').dispatchEvent(new Event('input')); this.closest('.city-list').parentElement.querySelector('input').dispatchEvent(new Event('change')); document.querySelector(`[data-zip-code-state] .${tag}-box-1`).classList.remove('show-list'); }); } }); document.querySelector(`.${tag}-submit-cta`).addEventListener('click', function () { document.querySelector(`html body .ry-1-0-parent button[type="submit"]`) && document.querySelector(`html body .ry-1-0-parent button[type="submit"]`).click(); }) } // update value // save form function saveForm() { // first name const firstNm = document.querySelector('[data-first-name] input'); // last name const lastNm = document.querySelector('[data-last-name] input'); // dob const dob = document.querySelector('[data-dob] input'); // email const email = document.querySelector('[data-email] input'); // confirm email const cemail = document.querySelector('[data-confirm-email] input'); // phone const phone = document.querySelector('[data-phone] input'); // street address const streeAddress = document.querySelector('[data-address] #saddress'); // unit const unit = document.querySelector('[data-address] #adduni'); // city const city = document.querySelector('[data-city] input'); // state const state = document.querySelector('[data-zip-code-state] #stt'); // zip code const zip = document.querySelector('[data-zip-code-state] #zp'); // push notification checked or not const checkBox = document.querySelector('#sndMarketingPromos'); if (firstNm && firstNm.value !== "") { fieldsValues.fnm = firstNm.value; } if (lastNm && lastNm.value !== "") { fieldsValues.lnm = lastNm.value; } if (dob && dob.value !== "") { fieldsValues.dob = dob.value; } if (email && email.value !== "") { fieldsValues.email = email.value; } if (cemail && cemail.value !== "") { fieldsValues.cemail = cemail.value; } if (phone && phone.value !== "") { fieldsValues.phone = phone.value; } if (streeAddress && streeAddress.value !== "") { fieldsValues.streetAddress = streeAddress.value; } if (unit && unit.value !== "") { fieldsValues.unit = unit.value; } if (city && city.value !== "") { fieldsValues.city = city.value; } if (state && state.value !== "") { fieldsValues.state = state.value; } if (zip && zip.value !== "") { fieldsValues.zip = zip.value; } if (checkBox) { fieldsValues.checkBox = checkBox.checked; } } function loadPrevForm() { const form = fieldsValues; // first name const firstNm = document.querySelector('[data-first-name] input'); // last name const lastNm = document.querySelector('[data-last-name] input'); // dob const dob = document.querySelector('[data-dob] input'); // email const email = document.querySelector('[data-email] input'); // confirm email const cemail = document.querySelector('[data-confirm-email] input'); // phone const phone = document.querySelector('[data-phone] input'); // street address const streeAddress = document.querySelector('[data-address] #saddress'); // unit const unit = document.querySelector('[data-address] #adduni'); // city const city = document.querySelector('[data-city] input'); // state const state = document.querySelector('[data-zip-code-state] #stt'); // zip code const zip = document.querySelector('[data-zip-code-state] #zp'); // push notification checked or not const checkBox = document.querySelector('#sndMarketingPromos'); firstNm.value = form.fnm || ""; lastNm.value = form.lnm || ""; dob.value = form.dob || ""; email.value = form.email || ""; cemail.value = form.cemail || ""; phone.value = form.phone || ""; streeAddress.value = form.streetAddress || ""; unit.value = form.unit || ""; city.value = form.city || ""; state.value = form.state || ""; zip.value = form.zip || ""; checkBox.checked = form.checkBox || false; } // date Formatter function autoFormatDate(input) { var inputValue = input.value.replace(/\D/g, ''); // Remove non-numeric characters if (inputValue.length > 2) { inputValue = inputValue.substring(0, 2) + '/' + inputValue.substring(2); } if (inputValue.length > 5) { inputValue = inputValue.substring(0, 5) + '/' + inputValue.substring(5, 9); } // Handle backspace to ensure correct formatting if (inputValue.length > 2 && inputValue.charAt(2) !== '/') { inputValue = inputValue.substring(0, 2) + '/' + inputValue.substring(2); } input.value = inputValue; // Validate the formatted date var dateRegex = /^(0[1-9]|1[0-2])\/(0[1-9]|[1-2][0-9]|3[0-1])\/\d{4}$/; if (dateRegex.test(inputValue)) { input.closest('[data-dob]').classList.remove(`${tag}-err`); // You can do further processing with the valid date here } else { input.closest('[data-dob]').classList.add(`${tag}-err`); input.closest('[data-dob]').querySelector(`.${tag}-form-grid-item-errbox`).innerText = 'Please enter a valid date (MM/DD/YYYY).' } } // validate fields step function validateFieldStep(input) { var value = input.value; var key = input.getAttribute("name"); var nativeSelector = nativeFieldsSelectors[key]; if (key === "dob") { const prnt = input.closest('[data-dob]'); if (!prnt.classList.contains(`${tag}-err`)) { if (nativeSelector && document.querySelector(nativeSelector)) { setNativeValue(document.querySelector(nativeSelector), value); scrollToStep(2); } } } else if (key == "phne") { const prnt = input.closest('[data-phone]'); if (!prnt.classList.contains(`${tag}-err`)) { if (nativeSelector && document.querySelector(nativeSelector)) { setNativeValue(document.querySelector(nativeSelector), value); scrollToStep(3); } } } if (key == "stt") { setNativeValue(document.querySelector(nativeSelector), input.getAttribute('data-value')); } else { if (nativeSelector && document.querySelector(nativeSelector)) { setNativeValue(document.querySelector(nativeSelector), value); } } saveForm(); } // Simulate react value change function setNativeValue(element, value) { let lastValue = element.value; element.value = value; let event = new Event("input", { target: element, bubbles: true }); // React 15 event.simulated = true; // React 16 let tracker = element._valueTracker; if (tracker) { tracker.setValue(lastValue); } element.dispatchEvent(event); element.dispatchEvent(new Event('change', { target: element, bubbles: true })); element.dispatchEvent(new Event('focus', { target: element, bubbles: true })); } // scroll to steps function scrollToStep(num) { const sel = `[data-separator-${num}]`; // if step one if (num == 2 && !document.querySelector(`[data-step-1] .${tag}-err`)) { jumptoSection(sel); saveForm(); // click to second form document.querySelector(`html body .ry-1-0-parent button[type="submit"]`) && document.querySelector(`html body .ry-1-0-parent button[type="submit"]`).click(); } // if step two if (num == 3 && !document.querySelector(`[data-step-2] .${tag}-err`)) { jumptoSection(sel); // click to second form document.querySelector(`html body .ry-1-0-parent button[type="submit"]`) && document.querySelector(`html body .ry-1-0-parent button[type="submit"]`).click(); } } function jumptoSection(targetSel) { const el = document.querySelector(targetSel); if (el) { let extrapart = -30; const elTop = el.offsetTop + extrapart; window.scrollTo({ top: elTop, left: 0, behavior: "smooth", }); } } })(window); })();
Editor is loading...
Leave a Comment