/* *** Read Before Proceeding! *** If any edits being made affect anything inside the Hulk Form iframe's document, then after the changes have been made go to... Shopify > Hulk Form Builder > Forms > Select the title of the Form to edit. > Form Intergration > Advanced > Advanced JS > [CTRL] + [A] and Delete, then Paste this entire text. Do this for any form that is affected by the changes. Ex: You addEventListener to the submit button inside the hulk forms iframe, then you will need to edit all of the active Advance JS sections on each hulk form. Ex: You addEventListener to a specific element on the DSE Module Repair Form, then you only need to replace the Advanced JS in the DSE Module Repair Form Advanced JS section. In practice, it might be best to replace all of the advanced js sections for all changes, but it takes a while. Here's all of the links to current forms 3-30-2026: MH4 Marius Form: https://admin.shopify.com/store/battle-beaver-customs/apps/form-builder-by-hulkapps/app/forms/edit/ooEAi1AC3syhHJR5LhGMYg PS4 Form: https://admin.shopify.com/store/battle-beaver-customs/apps/form-builder-by-hulkapps/app/forms/edit/Shs0wVp5CWT8UtuOiJD3Qw PS5 Form: https://admin.shopify.com/store/battle-beaver-customs/apps/form-builder-by-hulkapps/app/forms/edit/PdcQh_P1dBjyVPPwxYxRLA XSX Form: https://admin.shopify.com/store/battle-beaver-customs/apps/form-builder-by-hulkapps/app/forms/edit/lozowfdRNoI3ovpsARmu_w X1S Form: https://admin.shopify.com/store/battle-beaver-customs/apps/form-builder-by-hulkapps/app/forms/edit/V1BL8Paz4rO6x_FbvdxuIg GCC/NGC Form: https://admin.shopify.com/store/battle-beaver-customs/apps/form-builder-by-hulkapps/app/forms/edit/HXrT7QvOw4DqxOqYDKliFQ DSEM Repair Form: https://admin.shopify.com/store/battle-beaver-customs/apps/form-builder-by-hulkapps/app/forms/edit/o3oDSzWsN8tOaoxwZQnp_Q DSEM Trade-In Form: https://admin.shopify.com/store/battle-beaver-customs/apps/form-builder-by-hulkapps/app/forms/edit/puIMlH-SUMxcGz5uEjEpQw */ // DOMContentLoaded required since not having it causes the form to skip over elements that haven't been generated yet. document.addEventListener('DOMContentLoaded', function() { // console.log("Service Center Hulk Forms script initialized"); function outsideIframe() { // console.log("outsideIframe() called."); // DOMContentLoaded is not detecting when the iframe's document is finished filling with elements. // Elements get loaded in 9 seconds later all at once. Editing elements before they exist won't work. window.addEventListener('message', (event) => { // console.log("Message received from window:", event.data); // Once the document is fully loaded. pxFormGenerator sends a window message (event.data.type === "form_viewed") // Once the form is submitted. pxFormGenerator sends a window message (event.data.type === "form_submitted") if (typeof event.data === "object") { if (event.data.type === "form_viewed") { // console.log('Hulk Form ready.'); injectAdvancedJS(); } else if (event.data.type === "form_submitted") { // console.log('Hulk Form submitted.'); injectPostSubmissionJS(); } } }); function injectAdvancedJS() { // console.log("injectAdvanceJS called."); const iframe = document.querySelector('div[class="pxFormGenerator"] iframe'); // const documentHulk = iframe.contentDocument; const hulkID = document.querySelector('div[class="pxFormGenerator"]')?.id; // console.log("Hulk ID:", hulkID); // console.log(iframe); // console.log(documentHulk); } function injectPostSubmissionJS() { // console.log("injectPostSubmissionJS called."); } } function insideIframe() { // console.log("insideIframe() called."); function triggerChangeEvent(element) { if (!element) {return;} var event = new Event('change', {bubbles: true, cancelable: true,}); element.dispatchEvent(event); } // Hulk Forms recently changed how Radio Buttons are generated, and, as a result, if you click a radio button and then uncheck the checked checkbox that revealed the radio button, it breaks the chain of the following buttons that get reavealed after that radio button. Ask Ryan for more details. Last checked 3-15-2026. function radioChangeFix(checkboxes, radios) { checkboxes.forEach(checkbox => { checkbox.addEventListener("click", function() { if (this.checked) { radios.forEach(radio => { setTimeout(function() {console.log("Success!"); triggerChangeEvent(radio);}, 10); }); } }); }); } function handlePlacementsAssignments(allAssignments, allPlacements) { var assignmentsAddButtons = document.getElementById("rear-button-assignments")?.querySelectorAll('button') ?? []; assignmentsAddButtons.forEach(button => { button.addEventListener("click", function() { setTimeout(assignmentsAutocomplete, 100); }); }); function assignmentsAutocomplete() { var assignmentsInputs = document.getElementById("rear-button-assignments")?.querySelectorAll('input[type="text"]') ?? []; var lastTwoAssignments = Array.from(assignmentsInputs).slice(-2); lastTwoAssignments.forEach(input => { // console.log(input); // console.log("attempting to add autocomplete"); var suggestions = allAssignments; input.autocomplete = "off"; var timeout; input.addEventListener('focus', function() { clearTimeout(timeout); timeout = setTimeout(() => showSuggestions(input), 50); // Slight delay to prevent flickering }); input.addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(() => showSuggestions(input), 50); }); function showSuggestions(inputElement) { var query = inputElement.value.toLowerCase(); var filtered = suggestions.filter(item => item.toLowerCase().includes(query)); showDropdown(filtered, inputElement); } function showDropdown(list, inputElement) { $('.autocomplete-list').remove(); if (list.length === 0) return; var dropdown = $('

'); list.forEach(function(item) { var option = $('

' + item + '

'); list.forEach(function(item) { var option = $('

' + item + '

'); option.on('click', function() { $(inputElement).val(item); $('.autocomplete-list').remove(); }); dropdown.append(option); }); $('body').append(dropdown); setTimeout(() => { // Delay positioning slightly to avoid flickering var offset = $(inputElement).offset(); dropdown.css({ top: offset.top + $(inputElement).outerHeight(), left: offset.left, width: $(inputElement).outerWidth() }); }, 10); } $(document).on('click', function(event) { if (!$(event.target).closest('.autocomplete-list, input[type="text"]').length) { $('.autocomplete-list').remove(); } }); }); } placementsAutocomplete(); } function ps4mh4HandleMarius() { // Disables BB-provided 5-pin Marius Board for when we run out of stock. // document.querySelector('input[name="Select Marius Board Version and Thumbstick Mechanism Type:"][value="Install 5-pin Marius Board w/ Midas (HE) Thumbstick Mechanisms [$150]"]').disabled = true; function mariusImages() { //console.log("mariusImages called"); let images = document.getElementById("marius-board-version")?.querySelectorAll('img[class*="picture_choice_img"]') ?? []; if (images.length < 2) { setTimeout(function() {mariusImages();}, 1000); return; } else { //console.log(images); images.forEach(img => { img.addEventListener("click", function() { setTimeout(function() { // alters the tension dropdowns with $15 desoldering fee if needed alterMariusTensionPricing(true); // if alterMariusTensionPricing changes back in the future, then this event listener may need to be modified with the correct true/false based on 3-pin/5-pin // console.log("img clicked"); let selectedRadio = document.getElementById("marius-board-version")?.querySelector('input[type="radio"]:checked'); //console.log(selectedRadio); var selectedBoard; if (selectedRadio) { selectedBoard = selectedRadio.parentNode.nextElementSibling.innerText; } //console.log(selectedBoard); if (selectedBoard.toLowerCase().includes("5-pin")) { document.querySelectorAll('input[type="radio"][name="Select New Thumbstick Mechanisms (Marius Board Installation):"][value*="5-pin"]').forEach(radio => {radio.disabled = false;}); document.querySelectorAll('input[type="radio"][name="Select New Thumbstick Mechanisms (Marius Board Installation):"][value*="3-pin"]').forEach(radio => {radio.checked = false; radio.disabled = true;}); } else if (selectedBoard.toLowerCase().includes("3-pin")) { document.querySelectorAll('input[type="radio"][name="Select New Thumbstick Mechanisms (Marius Board Installation):"][value*="5-pin"]').forEach(radio => {radio.checked = false; radio.disabled = true;}); document.querySelectorAll('input[type="radio"][name="Select New Thumbstick Mechanisms (Marius Board Installation):"][value*="3-pin"]').forEach(radio => {radio.disabled = false;}); } else if (!selectedBoard) { document.querySelectorAll('input[type="radio"][name="Select New Thumbstick Mechanisms (Marius Board Installation):"][value*="5-pin"]').forEach(radio => {radio.checked = false; radio.disabled = true;}); document.querySelectorAll('input[type="radio"][name="Select New Thumbstick Mechanisms (Marius Board Installation):"][value*="3-pin"]').forEach(radio => {radio.checked = false; radio.disabled = true;}); } }, 50); }); }); } } document.querySelectorAll('input[type="radio"][name="Select New Thumbstick Mechanisms (Marius Board Installation):"][value*="5-pin"]').forEach(radio => {radio.checked = false; radio.disabled = true;}); document.querySelectorAll('input[type="radio"][name="Select New Thumbstick Mechanisms (Marius Board Installation):"][value*="3-pin"]').forEach(radio => {radio.checked = false; radio.disabled = true;}); mariusImages(); function alterMariusTensionPricing(applyTensionFee) { // console.log("alterMariusTensionPricing called"); ["Select Left Thumbstick Tension and Stick Click:", "Select Right Thumbstick Tension and Stick Click:", "Select Left Thumbstick Tension and Stick Click", "Select Right Thumbstick Tension and Stick Click"].forEach(name => { let currentIndex = document.querySelector(`select[name="${name}"]`)?.selectedIndex; // console.log(currentIndex); document.querySelectorAll(`select[name="${name}"] option:not([value=""])`).forEach(option => { function alterOptionValue(option, string) {option.value = string; option.innerText = string;} // add $15 desoldering fee per mech if customer-provided 5-pin board and mechs are pre-installed let images = document.getElementById("marius-board-version")?.querySelectorAll('img[class*="picture_choice_img"]') ?? []; if (images.length === 0) {return;} let imageRadios = [images[0].previousElementSibling, images[1].previousElementSibling]; let imageNames = [images[0].parentNode.nextElementSibling.innerText, images[1].parentNode.nextElementSibling.innerText]; // should be ["5-pin Marius Board", "3-pin Marius Board"] let selectedName = ""; imageRadios.forEach((radio, index) => {if (radio.checked) {selectedName = imageNames[index];}}); const tensionPrice = 5; const smartStickClickPrice = 10; const desolderingFee = 15; var needsDesolderingFee = false; /*needsDesolderingFee = (name === "Select Left Thumbstick Tension and Stick Click:" || name === "Select Right Thumbstick Tension and Stick Click:") && document.querySelector('input[type="radio"][value*="Yes, but I would like new Thumbstick Mechanisms installed."]').checked && selectedName === "5-pin Marius Board";*/ // If we add desoldering fee back, make sure to add error catching for the querySelector here. if (option.value.includes("Decreased Tension [-40%] & Smart Stick Click")) { alterOptionValue(option, `[$${applyTensionFee ? tensionPrice + smartStickClickPrice : smartStickClickPrice}] - Decreased Tension [-40%] & Smart Stick Click${needsDesolderingFee ? ` + [$${desolderingFee}] 5-pin Desoldering Fee` : ""}`); } else if (option.value.includes("Decreased Tension [-40%]")) { alterOptionValue(option, `[$${applyTensionFee ? tensionPrice : 0}] - Decreased Tension [-40%]${needsDesolderingFee ? ` + [$${desolderingFee}] 5-pin Desoldering Fee` : ""}`); } else if (option.value.includes("Light Tension [-20%] & Smart Stick Click")) { alterOptionValue(option, `[$${applyTensionFee ? tensionPrice + smartStickClickPrice : smartStickClickPrice}] - Light Tension [-20%] & Smart Stick Click${needsDesolderingFee ? ` + [$${desolderingFee}] 5-pin Desoldering Fee` : ""}`); } else if (option.value.includes("Light Tension [-20%]")) { alterOptionValue(option, `[$${applyTensionFee ? tensionPrice : 0}] - Light Tension [-20%]${needsDesolderingFee ? ` + [$${desolderingFee}] 5-pin Desoldering Fee` : ""}`); } else if (option.value.includes("Stock Tension [+0%] & Smart Stick Click")) { alterOptionValue(option, `[$${smartStickClickPrice}] - Stock Tension [+0%] & Smart Stick Click${needsDesolderingFee ? ` + [$${desolderingFee}] 5-pin Desoldering Fee` : ""}`); } else if (option.value.includes("Stock Tension [+0%]")) { alterOptionValue(option, `[$0] - Stock Tension [+0%]${needsDesolderingFee ? ` + [$${desolderingFee}] 5-pin Desoldering Fee` : ""}`); } else if (option.value.includes("Increased Tension [+75%]")) { alterOptionValue(option, `[$${applyTensionFee ? tensionPrice : 0}] - Increased Tension [+75%]${needsDesolderingFee ? ` + [$${desolderingFee}] 5-pin Desoldering Fee` : ""}`); } else if (option.value.includes("Heavy Tension [+150%]")) { alterOptionValue(option, `[$${applyTensionFee ? tensionPrice : 0}] - Heavy Tension [+150%]${needsDesolderingFee ? ` + [$${desolderingFee}] 5-pin Desoldering Fee` : ""}`); } }); setTimeout(function() {document.querySelectorAll(`select[name="${name}"]`).forEach(select => {select.selectedIndex = currentIndex;})}, 5); }); } document.querySelectorAll('input[type="radio"][name="Are the Thumbstick Mechanisms pre-installed?"]').forEach(radio => {radio.addEventListener("click", function() {alterMariusTensionPricing(true);});}); // if alterMariusTensionPricing changes back in the future, then this event listener may need to be modified with the correct true/false based on 3-pin/5-pin document.querySelectorAll('input[type="radio"][value*="Midas (HE) (5-pin only)"]').forEach(radio => {radio.addEventListener("click", function() {alterMariusTensionPricing(true);});}); document.querySelectorAll('input[type="radio"][value*="Magneto (TMR) (3-pin only)"]').forEach(radio => {radio.addEventListener("click", function() {alterMariusTensionPricing(true);});}); document.querySelectorAll('input[type="radio"][value*="Alps (OEM) (3-pin only)"]').forEach(radio => {radio.addEventListener("click", function() {alterMariusTensionPricing(true);});}); document.querySelectorAll('input[type="radio"][value*="Install 3-pin Marius Board w/ Magneto"]').forEach(radio => {radio.addEventListener("click", function() {alterMariusTensionPricing(true);});}); document.querySelectorAll('input[type="radio"][value*="Install 3-pin Marius Board w/ Alps"]').forEach(radio => {radio.addEventListener("click", function() {alterMariusTensionPricing(true);});}); document.querySelectorAll('input[type="radio"][value*="Install 5-pin Marius Board w/ Midas"]').forEach(radio => {radio.addEventListener("click", function() {alterMariusTensionPricing(true);});}); } function dsemRepairFormJS() { document.querySelectorAll("#modules-div").forEach(element => {element.parentNode.style = "padding: 0; margin: 0px -15px 0px -15px; width: -webkit-fill-available;";}); document.querySelectorAll("#form-height-reset-checkbox-1").forEach(element => {element.parentNode.parentNode.parentNode.parentNode.style.display = "none";}); document.querySelectorAll("#modules-data").forEach(element => {element.parentNode.style.display = "none";}); document.querySelectorAll("#mech-type-data-validation").forEach(element => {element.parentNode.style.display = "none";}); document.querySelectorAll("#tension-data-validation").forEach(element => {element.parentNode.style.display = "none";}); document.querySelectorAll("#stick-click-data-validation").forEach(element => {element.parentNode.style.display = "none";}); function deleteModule(count) { document.querySelectorAll(`#module-${count}-div`).forEach(element => {element.remove();}); document.querySelectorAll(`#module-${Number(count) - 1}-div`).forEach(element => {element.classList.add("last-module");}); document.querySelectorAll('#module-count').forEach(element => {element.value--;}); triggerChangeEvent(document.getElementById('module-count')); outputData(); } document.querySelectorAll("#module-minus").forEach(element => { element.addEventListener("click", function() { if(document.getElementById('module-count')?.value > 1) { deleteModule(document.getElementById('module-count').value); } }); }); document.querySelectorAll("#module-plus").forEach(element => { element.addEventListener("click", function() { if (document.getElementById('module-count')?.value < 10) { document.querySelectorAll('#module-count').forEach(element => {element.value++;}); triggerChangeEvent(document.getElementById('module-count')); generateModule(document.getElementById('module-count')?.value); document.querySelectorAll("#modules-div").forEach(element => {element.style.display = "block";}); } }); }); function generateModule(count) { if (count === null) {return;} const parent = document.getElementById("modules-div"); if (!parent) {return;} document.querySelectorAll('div[class*="last-module"]').forEach(function(div) {div.classList.remove("last-module");}); const div = document.createElement("div"); div.id = `module-${count}-div`; if(count % 2 == 1) {div.style.backgroundColor = "rgb(231 231 231)";} else {div.style.backgroundColor = "rgb(241 241 241)";} div.style.padding = "10px"; div.style.position = "relative"; if (count == 1) {div.classList.add("first-module");} div.classList.add("last-module"); const col1 = document.createElement("div"); const bold = document.createElement("b"); bold.innerHTML = `

Module ${count}

`; bold.style = "text-align: center; font-size: 18px;"; col1.appendChild(bold); const pricing = document.createElement("div"); pricing.innerHTML = ""; // + (Thumbstick **) pricing.classList.add("pricing-div"); pricing.id = `module-${count}-pricing`; col1.appendChild(pricing); const mechTypeDiv = document.createElement("div"); const mechType = document.createElement("select"); mechType.id = `module-${count}-mech-type`; mechType.classList.add("form-control"); generateOptions(mechType, [ ["", "Select Mechanism Type", true], ["No Service Needed", "$0 - No Service Needed"], ["TMR", "$25 - Magneto Mechanism (TMR)"], ["Alps", "$20 - OEM/Analog Mechanism"] ] ); const mechTypeLabel = document.createElement("label"); mechTypeLabel.classList.add("fitText"); mechTypeLabel.classList.add("block_label"); mechTypeLabel.htmlFor = `module-${count}-mech-type`; mechTypeLabel.tabIndex = -1; mechTypeLabel.innerText = "Replacement Thumbstick Mechanism*"; mechTypeLabel.style = "display: inline;"; mechTypeDiv.appendChild(mechTypeLabel); mechTypeDiv.appendChild(mechType); col1.appendChild(mechTypeDiv); const tensionDiv = document.createElement("div"); const tension = document.createElement("select"); tension.id = `module-${count}-tension`; tension.classList.add("form-control"); tension.disabled = true; generateOptions(tension, [ ["", "Select Tension", true], ["Decreased", "+$5 - Decreased Tension (-40%)"], ["Light", "+$5 - Light Tension (-20%)"], ["Stock", "+$0 - Stock Tension"], ["Increased", "+$5 - Increased Tension (+75%)"], ["Heavy", "+$5 - Heavy Tension (+150%)"] ] ); const tensionLabel = document.createElement("label"); tensionLabel.classList.add("fitText"); tensionLabel.classList.add("block_label"); tensionLabel.htmlFor = `module-${count}-tension`; tensionLabel.tabIndex = -1; tensionLabel.innerText = "Tension*"; tensionLabel.style = "display: inline;"; tensionDiv.appendChild(tensionLabel); tensionDiv.appendChild(tension); col1.appendChild(tensionDiv); const stickClickDiv = document.createElement("div"); const stickClick = document.createElement("select"); stickClick.id = `module-${count}-stick-click`; stickClick.classList.add("form-control"); stickClick.disabled = true; generateOptions(stickClick, [ ["", "Select Stick Click", true], ["Smart Stick Click", "+$15 - Smart Stick Click"], ["Stock Stick Click", "+$0 - Stock Stick Click"] ] ); const stickClickLabel = document.createElement("label"); stickClickLabel.classList.add("fitText"); stickClickLabel.classList.add("block_label"); stickClickLabel.htmlFor = `module-${count}-stick-click`; stickClickLabel.tabIndex = -1; stickClickLabel.innerText = "Add Smart Stick Click?*"; stickClickLabel.style = "display: inline;"; stickClickDiv.appendChild(stickClickLabel); stickClickDiv.appendChild(stickClick); col1.appendChild(stickClickDiv); const stickTypeDiv = document.createElement("div"); const stickType = document.createElement("input"); stickType.type = "text"; stickType.classList.add("autocomplete"); stickType.classList.add("validate"); stickType.classList.add("form-control"); stickType.id = `module-${count}-stick-type`; stickType.placeholder = "Ex: OEM Edge, PS5 Solid Blue, Clear/Black Z-Stick, etc."; //stickType.autocomplete = "off"; const stickTypeLabel = document.createElement("label"); stickTypeLabel.classList.add("fitText"); stickTypeLabel.classList.add("block_label"); stickTypeLabel.htmlFor = `module-${count}-stick-type`; stickTypeLabel.tabIndex = -1; stickTypeLabel.style = "width: 100%; display: inline;"; stickTypeLabel.innerHTML = "Replacement Thumbstick ** See Available Thumbsticks"; const stickTypeFooter = document.createElement("p"); stickTypeFooter.innerText = "** Edge Modules are only compatible with OEM Edge Sticks ($5), PS5 OEM Black Sticks ($0), PS5 Solid Sticks ($7), Z-Sticks ($10), Pro Sticks ($10), and Interchangeable Sticks ($15)."; stickTypeFooter.style = "font-size: 12px; line-height: 1.5; margin-bottom: 0; margin-top: 5px;"; stickTypeDiv.appendChild(stickTypeLabel); stickTypeDiv.appendChild(stickType); stickTypeDiv.appendChild(stickTypeFooter); col1.appendChild(stickTypeDiv); stickType.addEventListener("input", function(event) { if (event.key === "'" || event.key === "(" || event.key === ")") { event.preventDefault(); } stickType.value = stickType.value.replace(/['()"`{}\[\]\\]/g, "").replace(/[\r\n\u2028\u2029]+/g, ""); }); stickType.addEventListener("input", function(event) { if (event.key === "Enter" || event.key === "\\" || event.key === "{" || event.key === "}" || event.key === "[" || event.key === "]" || event.key === "`" || event.key === '"') { // console.log(event); event.preventDefault(); } stickType.value = stickType.value.replace(/['()"`{}\[\]\\]/g, "").replace(/[\r\n\u2028\u2029]+/g, ""); }); stickType.addEventListener("keydown", function(event) { if (event.key === "'" || event.key === "(" || event.key === ")") { event.preventDefault(); } }); stickType.addEventListener("keydown", function(event) { if (event.key === "Enter" || event.key === "\\" || event.key === "{" || event.key === "}" || event.key === "[" || event.key === "]" || event.key === "`" || event.key === '"') { event.preventDefault(); } }); // stickType.addEventListener("paste", function(event) { // event.preventDefault(); // const clipboardData = event.clipboardData || window.clipboardData; // const pastedText = clipboardData.getData('text/plain'); // const modifiedText = pastedText // .replace(/"/g, "") // .replace(/`/g, "") // .replace(/{/g, "") // .replace(/}/g, "") // .replace(/'/g, "") // .replace(/$/g, "") // .replace(/$/g, "") // .replace(/\[/g, "") // .replace(/]/g, "") // .replace(/\\/g, "") // .replace(/\n/g, ""); // document.execCommand('insertText', false, modifiedText); // }); stickType.addEventListener("paste", function (event) { event.preventDefault(); const clipboardData = event.clipboardData || window.clipboardData; const pastedText = clipboardData.getData("text/plain"); const modifiedText = pastedText .replace(/['()"`{}\[\]\\]/g, "") // remove all unwanted chars in one go .replace(/[\r\n\u2028\u2029]+/g, ""); // remove ALL newline types const start = stickType.selectionStart; const end = stickType.selectionEnd; stickType.value = stickType.value.slice(0, start) + modifiedText + stickType.value.slice(end); // Move cursor const newPos = start + modifiedText.length; stickType.selectionStart = stickType.selectionEnd = newPos; }); const toastContainer = document.createElement("div"); toastContainer.id = `module-${count}-toast-container`; toastContainer.classList.add("toast-container"); div.appendChild(toastContainer); div.appendChild(col1); parent.appendChild(div); stickType.oninput = function() {outputData();}; mechType.onchange = function() {handleMech(mechType, tension, stickClick, toastContainer); outputData();}; tension.onchange = function() {handleMech(mechType, tension, stickClick, toastContainer); outputData();}; stickClick.onchange = function() {handleMech(mechType, tension, stickClick, toastContainer); outputData();}; outputData(); document.querySelectorAll("#form-height-reset-checkbox-1").forEach(element => {element.click(); element.click();}); // check and uncheck checkbox to resize form } function outputData() { const count = document.getElementById('module-count')?.value; var output = document.getElementById("modules-data"); if (count === null || !output) {return;} var mechTypeValidation = ""; var tensionValidation = ""; var stickClickValidation = ""; var pricing = document.getElementById("pricing-div"); if (!pricing) {return;} pricing.innerHTML = ""; var pricingString = ""; var pricingArray = []; var totalPrice = 0; var grandTotalPrice = 0; output.value = ""; if (count == 0) {return;} for (var i = 1; i <= count; i++) { output.value += `${(i > 1 ? ", " : "")}'Module ${i}': ('Mech Type': '${document.getElementById(`module-${i}-mech-type`)?.value}', 'Tension': '${document.getElementById(`module-${i}-tension`)?.value}', 'Stick Click': '${document.getElementById(`module-${i}-stick-click`)?.value}', 'Thumbstick': '${document.getElementById(`module-${i}-stick-type`)?.value}')`; if (document.getElementById(`module-${i}-mech-type`)?.value === "") {mechTypeValidation += "Missing Data";} else if (document.getElementById(`module-${i}-mech-type`)?.value?.includes("TMR")) {pricingArray.push([25, "$25 Magneto Mechanism"]);} else if (document.getElementById(`module-${i}-mech-type`)?.value?.includes("Alps")) {pricingArray.push([20, "$20 OEM Mechanism"]);} else if (document.getElementById(`module-${i}-mech-type`)?.value?.includes("No Service Needed")) {pricingArray.push([0, "$0 No Mechanism Service"]);} if (!document.getElementById(`module-${i}-tension`)?.disabled && document.getElementById(`module-${i}-tension`)?.value === "") {tensionValidation += "Missing Data";} else if (!document.getElementById(`module-${i}-tension`)?.disabled) { if (document.getElementById(`module-${i}-tension`)?.value?.includes("Stock")) {pricingArray.push([0, " + $0 Stock Tension"]);} else {pricingArray.push([5, ` + $5 ${document.getElementById(`module-${i}-tension`)?.value} Tension`]);} } if (!document.getElementById(`module-${i}-stick-click`)?.disabled && document.getElementById(`module-${i}-stick-click`)?.value === "") {stickClickValidation += "Missing Data";} else if (!document.getElementById(`module-${i}-stick-click`)?.disabled) { if (document.getElementById(`module-${i}-stick-click`)?.value?.includes("Smart")) {pricingArray.push([15, " + $15 Smart Stick Click"]);} else {pricingArray.push([0, " + $0 Stock Stick Click"]);} } pricingArray.forEach(price => {totalPrice += price[0];}); pricingString += `

Module ${i} ≈ $${totalPrice} ≈ `; pricingArray.forEach(price => {pricingString += price[1];}); pricingString += "

"; document.querySelectorAll(`#module-${i}-pricing`).forEach(element => {element.innerHTML = `≈ $${totalPrice}`;}); pricingArray = []; grandTotalPrice += totalPrice; totalPrice = 0; } output.value = `(${output.value})`; if (mechTypeValidation !== "") {document.querySelectorAll("#mech-type-data-validation").forEach(element => {element.value = "";});} else {document.querySelectorAll("#mech-type-data-validation").forEach(element => {element.value = "Validated";});} if (tensionValidation !== "") {document.querySelectorAll("#tension-data-validation").forEach(element => {element.value = "";});} else {document.querySelectorAll("#tension-data-validation").forEach(element => {element.value = "Validated";});} if (stickClickValidation !== "") {document.querySelectorAll("#stick-click-data-validation").forEach(element => {element.value = "";});} else {document.querySelectorAll("#stick-click-data-validation").forEach(element => {element.value = "Validated";});} pricingString += `

--------------------

Grand Total ≈ $${grandTotalPrice} ***

*** Price does not include the cost of Replacement Thumbsticks or the cost of shipping. Price is subject to change. Payment will be due when the Service Center emails you your invoice after the Service Center has received your shipped module(s) and checked them into our system. Orders below $15 may have a processing fee applied.

*** We are only able to fulfil requests for total modules received. Any missing modules will not have requested repairs fulfilled.

`; pricing.innerHTML = pricingString; } function showToast(toastContainer, message, type = 'info') { if (!toastContainer) { console.error("Toast container not found."); return; } const toast = document.createElement('div'); toast.classList.add('toast'); toast.textContent = message; // Add type-specific classes for styling (e.g., 'success', 'error', 'warning') if (type === 'success') { toast.style.backgroundColor = '#4CAF50'; // Green } else if (type === 'error') { toast.style.backgroundColor = '#f44336'; // Red } else if (type === 'warning') { toast.style.backgroundColor = '#ff9800'; // Orange } toastContainer.appendChild(toast); // Remove the toast after a few seconds setTimeout(() => { toast.remove(); }, 6000); // 6 seconds } function handleMech(mechType, tension, stickClick, toastContainer) { if (mechType.value === "" || mechType.value.includes("No Service Needed")) { tension.selectedIndex = 0; stickClick.selectedIndex = 0; tension.disabled = true; stickClick.disabled = true; } else { tension.disabled = false; } if (tension.value === "") { stickClick.selectedIndex = 0; stickClick.disabled = true; } else if (tension.value.includes("Increased") || tension.value.includes("Heavy")) { stickClick.selectedIndex = 0; stickClick.disabled = true; // Add toast or something to tell customer that Smart Click isn't available w/ Incr./Heavy showToast(toastContainer, 'Smart Stick Click is not available for Increased or Heavy Tension.', 'error'); } else { stickClick.disabled = false; } } function generateOptions(container, values) { // const container = document.currentScript.previousElementSibling; values.forEach(function(value) { const option = document.createElement("option"); option.value = value[0]; option.innerText = (value[1] ? value[1] : value[0]); option.selected = (value[2] ? true : false); if (value[0] === "line break") { // console.log("test") option.innerText = "------------------------------"; option.disabled = true; } /// Change this to listen for domContentLoaded and manually edit the .dropdown-content li to add the

element container.appendChild(option); }); } } function mh4FormJS() { radioChangeFix(document.querySelectorAll('input[name="Available Thumbstick Service Options:"][value="Service Existing Mechanisms"]'), document.querySelectorAll('input[name="Service Existing Left Thumbstick Mechanism"], input[name="Service Existing Right Thumbstick Mechanism"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Replace All Existing Rear Button Switches"]'), document.querySelectorAll('input[name="Replacement Switch Type:"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Add / Relocate Rear Buttons"]'), document.querySelectorAll('input[name="Add / Relocate Rear Button(s) "], input[name="Final Rear Button Switch Type:"]')); radioChangeFix(document.querySelectorAll('input[name="Please select which items you would like serviced during your unit′s visit to our Service Center:"][value*="Marius Board Upgrade"]'), document.querySelectorAll('input[name="Will you provide your own Marius Board or will you purchase one from Battle Beaver?"], input[name="Are the Thumbstick Mechanisms pre-installed?"], input[name="Select New Thumbstick Mechanisms (Marius Board Installation):"], input[name="Select Marius Board Version and Thumbstick Mechanism Type:"]')); radioChangeFix(document.querySelectorAll('input[name="Please select which items you would like serviced during your unit′s visit to our Service Center:"][value*="Touchpad"]'), document.querySelectorAll('input[name="Available Touchpad Service Options"]')); document.querySelectorAll('input[name="What Marius Board Services are you requesting?"]').forEach(radio => { radio.addEventListener('click', function() { if (this.value.includes("upgrade to Marius") && this.checked) { document.querySelectorAll('input[name="Please select which items you would like serviced during your unit′s visit to our Service Center:"][value="Marius Board Upgrade"]').forEach(checkbox => {checkbox.checked = true; triggerChangeEvent(checkbox); checkbox.disabled = true;}); } else { document.querySelectorAll('input[name="Please select which items you would like serviced during your unit′s visit to our Service Center:"][value="Marius Board Upgrade"]').forEach(checkbox => {checkbox.disabled = false;}); } }); }); document.querySelectorAll('input[name="Please select which items you would like serviced during your unit′s visit to our Service Center:"][value="Marius Board Upgrade"]').forEach(radio => { radio.addEventListener("change", function() { if (this.checked) { document.querySelectorAll('input[name="Available Thumbstick Service Options:"]:not([value="Physical Stick"]), input[name="Please select which items you would like serviced during your unit′s visit to our Service Center:"][value="USB Port"]').forEach(checkbox => {checkbox.checked = false; triggerChangeEvent(checkbox); checkbox.disabled = true;}); } else { document.querySelectorAll('input[name="Available Thumbstick Service Options:"]:not([value="Physical Stick"]), input[name="Please select which items you would like serviced during your unit′s visit to our Service Center:"][value="USB Port"]').forEach(checkbox => {checkbox.disabled = false;}); } }); }); } function ps4FormJS() { radioChangeFix(document.querySelectorAll('input[name="Available Thumbstick Service Options:"][value="Service Existing Mechanisms"]'), document.querySelectorAll('input[name="Service Existing Left Thumbstick Mechanism"], input[name="Service Existing Right Thumbstick Mechanism"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Replace All Existing Rear Button Switches"]'), document.querySelectorAll('input[name="Replacement Switch Type:"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Add / Relocate Rear Buttons"]'), document.querySelectorAll('input[name="Add / Relocate Rear Button(s) "], input[name="Final Rear Button Switch Type:"]')); radioChangeFix(document.querySelectorAll('input[name="Please select which items you would like serviced during your unit′s visit to our Service Center:"][value*="Marius Board Upgrade"]'), document.querySelectorAll('input[name="Will you provide your own Marius Board or will you purchase one from Battle Beaver?"], input[name="Are the Thumbstick Mechanisms pre-installed?"], input[name="Select New Thumbstick Mechanisms (Marius Board Installation):"], input[name="Select Marius Board Version and Thumbstick Mechanism Type:"]')); radioChangeFix(document.querySelectorAll('input[name="Please select which items you would like serviced during your unit′s visit to our Service Center:"][value*="Touchpad"]'), document.querySelectorAll('input[name="Available Touchpad Service Options"]')); } function ps5FormJS() { // Disables PS5 KF XT Grips for when we run out of stock. document.querySelectorAll('input[type="radio"][value*="Add & Install KontrolFreek XT Grips"]').forEach(radio => {radio.disabled = true;}); radioChangeFix(document.querySelectorAll('input[name="Available Thumbstick Service Options:"][value="Service Existing Mechanisms"]'), document.querySelectorAll('input[name="Service Existing Left Thumbstick Mechanism"], input[name="Service Existing Right Thumbstick Mechanism"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Replace All Existing Rear Button Switches"]'), document.querySelectorAll('input[name="Replacement Switch Type:"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Add / Relocate Rear Buttons"]'), document.querySelectorAll('input[name="Add / Relocate Rear Button(s) "], input[name="Final Rear Button Switch Type"]')); } function xsxFormJS() { radioChangeFix(document.querySelectorAll('input[name="Available Thumbstick Service Options:"][value="Service Existing Mechanisms"]'), document.querySelectorAll('input[name="Service Existing Left Thumbstick Mechanism"], input[name="Service Existing Right Thumbstick Mechanism"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Replace All Existing Rear Button Switches"]'), document.querySelectorAll('input[name="Replacement Switch Type:"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Add / Relocate Rear Buttons"]'), document.querySelectorAll('input[name="Add / Relocate Rear Button(s) "], input[name="Final Rear Button Switch Type"]')); } function x1sFormJS() { radioChangeFix(document.querySelectorAll('input[name="Available Thumbstick Service Options:"][value="Service Existing Mechanisms"]'), document.querySelectorAll('input[name="Service Existing Left Thumbstick Mechanism"], input[name="Service Existing Right Thumbstick Mechanism"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Replace All Existing Rear Button Switches"]'), document.querySelectorAll('input[name="Replacement Switch Type:"]')); radioChangeFix(document.querySelectorAll('input[name="Rear Button Service Options:"][value*="Add / Relocate Rear Buttons"]'), document.querySelectorAll('input[name="Add / Relocate Rear Button(s) "], input[name="Final Rear Button Switch Type"]')); } function gccFormJS() { radioChangeFix(document.querySelectorAll('input[name="Select Component(s) to Service:"][value*="Phob Board Conversion"]'), document.querySelectorAll('input[name="Phob Conversion"]')); radioChangeFix(document.querySelectorAll('input[name="Select Component(s) to Service:"][value*="Rubber Contact Pads (RCP)"]'), document.querySelectorAll('input[name="Select Contact Pad (RCP) Service:"]')); radioChangeFix(document.querySelectorAll('input[name="Select Component(s) to Service:"][value*="Notches"]'), document.querySelectorAll('input[name="Select a Notch Service:"], input[name="Notch Additions"]')); radioChangeFix(document.querySelectorAll('input[name="Select Thumbstick(s) to Replace:"][value*="Left Thumbstick"]'), document.querySelectorAll('input[name="Left Thumbstick Replacement:"]')); radioChangeFix(document.querySelectorAll('input[name="Select Thumbstick(s) to Replace:"][value*="C-Stick"]'), document.querySelectorAll('input[name="C-Stick Replacement:"]')); function toggleFirstQuestions() { function toggleFirstQuestionElements(toggle) { document.querySelectorAll('input[name*="Production Time Estimate"]').forEach((element, index) => { if (index === 0) { element.parentNode.parentNode.style.display = toggle; element.parentNode.parentNode.nextElementSibling.style.display = toggle; } }); // document.querySelectorAll('input[name*="Production Time Estimate"]')[0].parentNode.parentNode.previousSibling.style.display = toggle; document.querySelectorAll("#processing-fee-line-break").forEach(element => {element.parentNode.style.display = toggle;}); document.querySelectorAll('input[name*="Processing Fees"]').forEach((element, index) => { if (index === 0) { element.parentNode.parentNode.style.display = toggle; } }); // document.querySelectorAll('input[name*="Processing Fees"]')[0].parentNode.parentNode.previousSibling.style.display = toggle; //document.querySelectorAll('div[aria-label*="To ensure the highest level of service"]')[0].style.display = toggle; //document.querySelector('p[innerHTML*="To ensure the highest level of service"]').parentNode.querySelectorAll('p').forEach(paragraph => {paragraph.style.display = toggle}); document.querySelectorAll("#processing-fees-paragraph").forEach(element => {element.parentNode.querySelectorAll('p').forEach(paragraph => {paragraph.style.display = toggle;});}); //document.querySelectorAll('div[aria-label*="Service Options"]')[0].style.display = toggle; document.querySelectorAll("#service-options-header").forEach(element => {element.style.display = toggle;}); document.querySelectorAll('input[name*="Select Component"]').forEach((element, index) => { if (index === 0) { element.parentNode.parentNode.style.display = toggle; element.parentNode.parentNode.previousSibling.style.display = toggle; } }); //document.querySelectorAll('div[aria-label*="Repair Speed"]')[0].firstChild.style.display = toggle; document.querySelectorAll("#repair-speed-header").forEach(element => {element.style.display = toggle;}); } var toggle = "none" document.querySelectorAll('input[name*="What Main Board"]').forEach(boardRadio => { if (boardRadio.checked === true) { document.querySelectorAll('input[name*="What game"]').forEach(gameRadio => { if (gameRadio.checked === true) { toggle = "block"; return; } }); return; } }); toggleFirstQuestionElements(toggle); } toggleFirstQuestions(); document.querySelectorAll('input[name*="What Main Board"]').forEach(element => { element.addEventListener("change", toggleFirstQuestions); }); document.querySelectorAll('input[name*="What game"]').forEach(element => { element.addEventListener("change", toggleFirstQuestions); }); let temporaryStickboxesCheckbox = false; let temporaryCableCheckbox = false; let temporaryMainBoardCheckbox = false; function boardToggle() { let currentPhob = document.querySelector('input[name*="What Main Board"]:checked')?.value?.includes("Phob"); let newPhob = document.querySelector('input[name*="Select Component(s)"][value*="Phob Board Conversion"]')?.checked && document.querySelector('input[name="Phob Conversion"][value*="Phob Board Conversion"]:checked'); // "false ||" sets the statement to false if it returns null newPhob ? newPhob = true : newPhob = false; let stickboxesCheckbox = document.querySelector('input[name*="Select Component(s)"][value*="Stickboxes"]'); let cableCheckbox = document.querySelector('input[name*="Select Component(s)"][value*="Cable"]'); let mainBoardCheckbox = document.querySelector('input[name*="Select Component(s)"][value*="Main Board"]'); if (!stickboxesCheckbox && !cableCheckbox && !mainBoardCheckbox) {return;} if (newPhob && document.querySelector('input[value*="Phob Board Conversion with New T3"]')?.checked) { if (stickboxesCheckbox.checked) { temporaryStickboxesCheckbox = true; stickboxesCheckbox.click(); stickboxesCheckbox.disabled = true; } else if (!stickboxesCheckbox.checked) { stickboxesCheckbox.disabled = true; } if (cableCheckbox.checked) { temporaryCableCheckbox = true; cableCheckbox.click(); cableCheckbox.disabled = true; } else if (!cableCheckbox.checked) { cableCheckbox.disabled = true; } } else { stickboxesCheckbox.disabled = false; cableCheckbox.disabled = false; if (temporaryStickboxesCheckbox) { temporaryStickboxesCheckbox = false; stickboxesCheckbox.click(); } if (temporaryCableCheckbox) { temporaryCableCheckbox = false; cableCheckbox.click(); } } if (newPhob) { if (mainBoardCheckbox.checked) { temporaryMainBoardCheckbox = true; mainBoardCheckbox.click(); mainBoardCheckbox.disabled = true; } else if (!mainBoardCheckbox.checked) { mainBoardCheckbox.disabled = true; } } else { mainBoardCheckbox.disabled = false; if (temporaryMainBoardCheckbox) { temporaryMainBoardCheckbox = false; mainBoardCheckbox.click(); } } if (currentPhob || newPhob) { document.querySelectorAll('input[value*="Phob Board Recalibration"]').forEach(element1 => { element1.parentNode.style.display = "block"; }); document.querySelectorAll('input[value*="Magnet Replacement"]').forEach(element1 => { element1.parentNode.style.display = "block"; }); document.querySelectorAll('input[value*="Replace Potentiometers"]').forEach(element1 => { element1.parentNode.style.display = "none"; element1.checked = false; }); document.querySelectorAll('input[type="checkbox"][value*="BB Snapback Module"]').forEach(element1 => { element1.parentNode.style.display = "none"; element1.checked = false; }); document.querySelectorAll("#phob-recalibration-paragraph-1").forEach(element => {element.style.display = "block";}); document.querySelectorAll("#phob-recalibration-paragraph-2").forEach(element => {element.style.display = "block";}); document.querySelectorAll('input[value*="Universal Trigger"]').forEach(element1 => { element1.parentNode.style.display = "none"; element1.checked = false; }); document.querySelectorAll('input[name*="Smart ABXY"][value*="Replace Smart"]:checked').forEach(checkbox => { // if OEM smart button is selected, then select the phob counterpart document.querySelectorAll(`input[name*="Smart ABXY"][value="${checkbox.value.replace("Replace Smart", "Replace/Install Smart")}"]`).forEach(input => {input.checked = true;}); }); document.querySelectorAll('input[name*="Smart ABXY"][value*="Replace Smart"]').forEach(checkbox => { checkbox.checked = false; checkbox.parentNode.style.display = "none"; }); document.querySelectorAll('input[name*="Smart ABXY"][value*="Replace/Install Smart"]').forEach(checkbox => { checkbox.parentNode.style.display = "block"; }); } else { document.querySelectorAll('input[value*="Phob Board Recalibration"]').forEach(element1 => { element1.parentNode.style.display = "none"; element1.checked = false; }); document.querySelectorAll('input[value*="Magnet Replacement"]').forEach(element1 => { element1.parentNode.style.display = "none"; element1.checked = false; }); document.querySelectorAll('input[value*="Replace Potentiometers"]').forEach(element1 => { element1.parentNode.style.display = "block"; }); document.querySelectorAll('input[type="checkbox"][value*="BB Snapback Module"]').forEach(element1 => { element1.parentNode.style.display = "block"; }); document.querySelectorAll("#phob-recalibration-paragraph-1").forEach(element => {element.style.display = "none";}); document.querySelectorAll("#phob-recalibration-paragraph-2").forEach(element => {element.style.display = "none";}); document.querySelectorAll('input[value*="Universal Trigger"]').forEach(element1 => { element1.parentNode.style.display = "block"; }); document.querySelectorAll('input[name*="Smart ABXY"][value*="Replace/Install Smart"]:checked').forEach(checkbox => { // if OEM smart button is selected, then select the phob counterpart document.querySelectorAll(`input[name*="Smart ABXY"][value="${checkbox.value.replace("Replace/Install Smart", "Replace Smart")}"]`).forEach(input => {input.checked = true;}); }); document.querySelectorAll('input[name*="Smart ABXY"][value*="Replace/Install Smart"]').forEach(checkbox => { checkbox.checked = false; checkbox.parentNode.style.display = "none"; }); document.querySelectorAll('input[name*="Smart ABXY"][value*="Replace Smart"]').forEach(checkbox => { checkbox.parentNode.style.display = "block"; }); } } document.querySelectorAll('input[name*="What Main Board"]').forEach(element => { element.addEventListener("change", boardToggle); }); document.querySelectorAll('input[value*="Phob Board Conversion"]').forEach(element => { //covers checklist and both radio buttons element.addEventListener("change", boardToggle); }); // document.querySelectorAll('input[value*="Phob Conversion"]').forEach(element => { // element.addEventListener("change", boardToggle); // }); function meleeToggle() { if (document.querySelector('input[value*="Melee, P+"]')?.checked === true) { document.querySelectorAll('input[value*="Spring Removed "]').forEach(radio => {radio.disabled = false;}); document.querySelectorAll('input[name*="Notch Additions"]:not([value*="Other"])').forEach(radio => {radio.disabled = false;}); } else { document.querySelectorAll('input[value*="Spring Removed "]').forEach(radio => { radio.checked = false; radio.disabled = true; }); document.querySelectorAll('input[name*="Notch Additions"]:not([value*="Other"])').forEach(radio => { if (radio.checked) { document.querySelectorAll('input[name*="Notch Service"][value*="Touch-Up"]').forEach(input => {input.click();}); document.querySelectorAll('input[name*="Notch Service"][value*="Notch Upgrade"]').forEach(input => {input.click();}); // double check the parent checbox to unselect the radio button } radio.checked = false; radio.disabled = true; }); } } document.querySelectorAll('input[value*="Melee, P+"]').forEach(element => { element.addEventListener("change", meleeToggle); }); document.querySelectorAll('input[value*="Ultimate, Rivals"]').forEach(element => { element.addEventListener("change", meleeToggle); }); } function allFormsJS() { // Allows for better experience when using the [TAB] key to navigate the form document.querySelectorAll('div.headings, label.block_label, p.infoMessage').forEach(element => { // console.log(element); element.tabIndex = "-1"; }); // Prevents user from entering any special characters than can break the Shopify Flow output string/JSON. document.querySelectorAll('textarea, input[type="text"]').forEach(function(element) { // console.log(element); // needed for mobile users element.addEventListener("input", function(event) { if (event.key === "Enter" || event.key === "\\" || event.key === "{" || event.key === "}" || event.key === "[" || event.key === "]" || event.key === "`" || event.key === '"') { // console.log(event); event.preventDefault(); } element.value = element.value.replace(/["`{}\[\]\\]/g, "").replace(/[\r\n\u2028\u2029]+/g, ""); }); element.addEventListener("keydown", function(event) { if (event.key === "Enter" || event.key === "\\" || event.key === "{" || event.key === "}" || event.key === "[" || event.key === "]" || event.key === "`" || event.key === '"') { // console.log(event); event.preventDefault(); } }); // element.addEventListener("paste", function(event) { // event.preventDefault(); // const clipboardData = event.clipboardData || window.clipboardData; // const pastedText = clipboardData.getData('text/plain'); // const modifiedText = pastedText // .replace(/"/g, "") // .replace(/`/g, "") // .replace(/{/g, "") // .replace(/}/g, "") // .replace(/\[/g, "") // .replace(/]/g, "") // .replace(/\\/g, "") // .replace(/\n/g, ""); // document.execCommand('insertText', false, modifiedText); // }); element.addEventListener("paste", function (event) { // console.log(event); event.preventDefault(); const clipboardData = event.clipboardData || window.clipboardData; const pastedText = clipboardData.getData("text/plain"); const modifiedText = pastedText .replace(/["`{}\[\]\\]/g, "") // remove all unwanted chars in one go .replace(/[\r\n\u2028\u2029]+/g, ""); // remove ALL newline types const start = element.selectionStart; const end = element.selectionEnd; element.value = element.value.slice(0, start) + modifiedText + element.value.slice(end); // Move cursor const newPos = start + modifiedText.length; element.selectionStart = element.selectionEnd = newPos; }); // Makes Beaver Buttons selected by default. Only needed for MH4, PS4, PS5, XSX, X1S but no harm caused. document.querySelectorAll('input[name*="Switch Type"][value*="Beaver Button"]').forEach(input => {input.click();}); // Adds horizontal scroll to pricing tables document.querySelectorAll("#replace-rear-buttons-table, #relocate-rear-buttons-table").forEach(table => {table.parentNode.style = "overflow-x: auto;";}); }); // Changes all customer typed or internal ' values to `. The Shopify Flow script will change it back to ' later for JSON reconstruction. document.querySelectorAll('button[type="submit"]').forEach(button => { button.addEventListener("click", function() { document.querySelectorAll('textarea, input[type="text"]').forEach(function(element) { element.value = element.value.replace(/'/g, "`"); // once submit button clicked => change all ' to ` and the doPost script will change it back later }); // moved response header alteration to post submission script }, true); // true changes this event listener to activate first (rather than the actual submit function) }); // Change Home Address to State/Provice and add asterisks(*) to mark as required(*). Not needed for DSEM Trade-In Form, but no harm caused. document.querySelectorAll('label[for="address_line1"]').forEach(label => {label.innerHTML = "Address line 1*"}); document.querySelectorAll('label[for="address_line2"]').forEach(label => {label.innerHTML = "Address line 2*"}); document.querySelectorAll('label[for="address_city"]').forEach(label => {label.innerHTML = "City*"}); document.querySelectorAll('label[for="address_province"]').forEach(label => {label.innerHTML = "State/Province*"}); document.querySelectorAll('label[for="address_zipcode"]').forEach(label => {label.innerHTML = "Zip code*"}); document.querySelectorAll('label[for="address_country"]').forEach(label => {label.innerHTML = "Country*"}); } const hulkDiv = document.querySelector('div[class*="hulk_form_"]'); const hulkID = hulkDiv ? hulkDiv.className.replace("hulk_form_", "") : ""; // console.log("hulkID", hulkID); switch (hulkID) { // PS4 (DualShock 4) Form case "Shs0wVp5CWT8UtuOiJD3Qw": allFormsJS(); ps4FormJS(); ps4mh4HandleMarius(); handlePlacementsAssignments(["Cross", "Circle", "Square", "Triangle", "D-Pad Up", "D-Pad Right", "D-Pad Down", "D-Pad Left", "L1", "R1", "L3", "R3"], ["High", "Medium", "Standard", "Low", "Lower"]); break; // MH4 (PS4 Marius) Form case "ooEAi1AC3syhHJR5LhGMYg": allFormsJS(); mh4FormJS(); ps4mh4HandleMarius(); handlePlacementsAssignments(["Cross", "Circle", "Square", "Triangle", "D-Pad Up", "D-Pad Right", "D-Pad Down", "D-Pad Left", "L1", "R1", "L3", "R3"], ["High", "Medium", "Standard", "Low", "Lower"]); break; // PS5 (DualSense) Form case "PdcQh_P1dBjyVPPwxYxRLA": allFormsJS(); ps5FormJS(); handlePlacementsAssignments(["Cross", "Circle", "Square", "Triangle", "D-Pad Up", "D-Pad Right", "D-Pad Down", "D-Pad Left", "L1", "R1", "L2", "R2", "L3", "R3"], ["Medium", "Standard", "Busters", "Low", "Lower"]); break; // XSX Form case "lozowfdRNoI3ovpsARmu_w": allFormsJS(); xsxFormJS(); handlePlacementsAssignments(["A", "B", "X", "Y", "D-Pad Up", "D-Pad Right", "D-Pad Down", "D-Pad Left", "LB", "RB", "LT", "RT", "LS Click", "RS Click"], ["Extra High", "High", "Medium", "Standard", "Low", "Lower", "Extra Low"]); break; // X1S Form case "V1BL8Paz4rO6x_FbvdxuIg": allFormsJS(); x1sFormJS(); handlePlacementsAssignments(["A", "B", "X", "Y", "D-Pad Up", "D-Pad Right", "D-Pad Down", "D-Pad Left", "LB", "RB", "LT", "RT", "LS Click", "RS Click"], ["Secondary Extra High", "Secondary High", "Secondary Medium", "Secondary Standard", "Primary Extra High", "Primary High", "Primary Medium", "Primary Standard", "Ring Finger Extra High", "Ring Finger High", "Ring Finger Medium", "Ring Finger Standard"]); break; // GCC/NGC Form case "HXrT7QvOw4DqxOqYDKliFQ": allFormsJS(); gccFormJS(); break; // DSE Module Repair Form case "o3oDSzWsN8tOaoxwZQnp_Q": allFormsJS(); dsemRepairFormJS(); break; // DSE Module Trade-In Form case "puIMlH-SUMxcGz5uEjEpQw": allFormsJS(); break; default: break; } } if (document.querySelector('div.pxFormGenerator')) { outsideIframe(); } if (document.querySelector('div[class*="hulk_form_"]')) { insideIframe(); } });

Register

Biopulent Trade Account Form

Contact Us