DYOB

Which Fabric?

.fabric-container { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:20px; } .fabric-card { width:30%; text-align:center; border:1px solid #ddd; padding:15px; border-radius:10px; cursor:pointer; transition:0.2s; box-sizing:border-box; } .fabric-card img { width:30%; height:auto; border-radius: 30px; }/* ⭐ Highlight Selected Card */ .fabric-card.selected { border: 2px solid #0073aa !important; background: #e8f4ff !important; box-shadow: 0 0 12px rgba(0,0,0,0.15) !important; }#selected_fabric_popup { position: fixed; bottom: 80px; left: 20px; background: #0073aa; color: #fff; padding: 10px 15px; border-radius: 8px; font-size: 13px; display:none; max-width: 200px; text-align:center; z-index: 999 !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } #selected_fabric_popup img { width: 80px; margin-top:5px; border-radius:5px; }/* Responsive */ @media (max-width: 1024px) { .fabric-card { width:48%; } } @media (max-width: 768px) { .fabric-card { width:100%; } }

// If the metrial is selected is Canvas document.addEventListener("DOMContentLoaded", function () { // Listen to normal change event jQuery(document).on("change", "select[name='select-1']", function () { let form = this.closest("form"); let textField = form.querySelector("input[name='text-1']"); if(this.value == "Canvas"){ data = "Matetial Canvas"; textField.value = data; } }); }); function selectFabric(card, name, img){// ⭐ Remove highlight from all cards document.querySelectorAll(".fabric-card").forEach(c => c.classList.remove("selected"));// ⭐ Highlight clicked card card.classList.add("selected");// Update hidden/form text field {text-1} let form = card.closest("form"); if(form){ let textField = form.querySelector("input[name='text-1']"); if(textField){ let data = "Material "+name; // [name, img] textField.value = data; //JSON.stringify(dataArray) } } }document.addEventListener("DOMContentLoaded", function(){ document.querySelectorAll(".forminator-custom-form").forEach(function(form){ form.addEventListener("submit", function(e){ let textField = form.querySelector("input[name='text-1']"); if(textField && textField.value === ""){ alert("Please select a fabric before submitting the form!"); e.preventDefault(); return false; }// Reset highlights after submit setTimeout(function(){ document.querySelectorAll(".fabric-card").forEach(c => c.classList.remove("selected")); if(textField) textField.value = ""; }, 500); }); }); }); input[name="text-1"] { position:absolute !important; left:-9999px !important; height:0 !important; width:0 !important; padding:0 !important; margin:0 !important; border:none !important; overflow:hidden !important; } div.forminator-field input[name="text-1"], div.forminator-field label[for^="forminator-field-text-1"] { display: none !important; }