חשבתם ליצור שדות מותנים בטופס אלמנטור?
ואז הבנתם שצריך תוסף לזה…

אבל עכשיו תלמדו לעשות נראות שדות בתנאים עם קוד בלבד!!!

למה הקוד שימושי?

תחשבו שתרצו לתת למשתמש לבחור אילו פרטים להשאיר ליצירת קשר איתו…
כך תוכלו ליצור טופס שמתחיל כך:

ולאחר הבחירה של המשתמש באפשרות להשאיר טלפון יתווסף לו שדה טלפון!

ואם הוא רוצה הוא יוכל לבחור עוד או לבחור רק באפשרות השארת אימייל:

זו מחשבה על משהו קטן, תארו לעצמכם תפריט למסעדה!
שבשדה הראשון יהיה בחירה איזו ארוחה לבחור, ואז יתווספו שדות בחירה לסימון מה יהיה במנה, בקינוח ועוד…
נכון שזה מגניב!!!

והנה הקוד…

הקוד הזה פורסם ברשת בעבר, אבל החסרונות גברו על היתרונות,
לכן לקחתי אותו ושיפרתי בו הרבה כדי שיהיה באמת שימושי,
התוספות והשינויים העיקריים שנעשו:

• זכירת בחירה / מילוי קודם בעת חזרה לשדה גם לאחר ביטול הבחירה וסימון בחירה שונה.
• הזכירה לא תוצג בעת השליחה כל עוד לא מוצגת בפועל!

גררו ווידג'ט HTML והכניסו את הקוד הזה לתוכו:

<script>

let showThisFieldIf = {
tel: {
select: [1],
},
};

document.addEventListener('DOMContentLoaded', function () {
function testLogic() {
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
let conditionalInput = setInputsElemArray(conditionalInputID);
let match = true;
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
let selectedInputs = [];
inputs.forEach((input, i) => {
if (input.checked) {
selectedInputs.push(i);
}
});
if (inputs[0].tagName == 'SELECT') {
selectedInputs.push(inputs[0].selectedIndex);
}
let adjustedConditionValues = conditionValues.map(e => e - 1);
if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {
match = false;
}
}
if (match) {
conditionalInput.forEach(e => {
e.closest('.elementor-field-group').style.display = "block";
e.removeAttribute('disabled');
});
} else {
conditionalInput.forEach(e => {
e.closest('.elementor-field-group').style.display = "none";
e.setAttribute('disabled', 'disabled');
});
}
}
}

testLogic();

/* Add event listeners */
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
inputs.forEach(input => {
input.addEventListener('input', function () {
testLogic();
});
});
}
}

function setInputsElemArray(ID) {
let selectors = `[name="form_fields[${ID}]"]`;
let inputs = Array.from(document.querySelectorAll(selectors));
if (!inputs.length) {
selectors = `[name="form_fields[${ID}][]"]`;
inputs = Array.from(document.querySelectorAll(selectors));
}
return inputs;
}
});

</script>

ועכשיו להסבר איך מגדירים את הטופס שלנו:

שימו לב שבשביל לזהות את השדות – לכל השדות צריך לתת ID.
כנסו לכל שדה > לחצו על מתקדם > ובאפשרות ID הזינו ID משלכם

צרו שדה בחירה מסוג: תיבת סימון (אפשרי כל סוג, בחרתי באפשרות הזו כדי לתת בהדגמה אפשרויות בחירה מרובות) ותנו לו ID (בדוגמא זה: select)
בשדה זה יהיו שני אפשרויות:

1. טלפון
2. אימייל

צרו עוד שדה (לא משנה הסוג!) שהוא עם id = tel.
צרו שדה נוסף (לא משנה הסוג!) שהוא עם id = email.

ועכשיו נתאים את הקוד שלנו כך שאם תיבחר בשדה ה- select האפשרות הראשונה: טלפון – יופיע השדה טלפון!
ואם תיבחר האפשרות השנייה: אימייל – יופיע השדה אימייל!

מה שעלינו לעשות זה להגדיר את קטע הקוד הזה:

tel: {
select: [1],
},

כך שבשורה הראשונה לפני הנקודתיים (:) נזין את הID של השדה שעליו אנחנו רוצים לשלוט אם יוצג או לא, במקרה שלנו זה tel.
ובשורה השנייה (שבתוך הסוגריים המסולסלים) נזין את הID של השדה שבו אנחנו אמורים 'לבחור' במקרה שלנו זה select,
בתוך הסוגריים המרובעים נזין את המספר והמיקום של הבחירה שבלחיצה עליה היא תפעיל ותציג את השדה 'טלפון', במקרה שלנו זוהי בחירה מספר 1 (ראו תמונה):

ואם נעבור לתצוגה האמיתית (לא עורך אלמנטור) נשים לב מיד שהשדה טלפון נעלם, ורק בלחיצה על האפשרות 'טלפון' בשדה בחירה – הוא יופיע!

וכך נעשה שוב גם עם השדה של ה'אימייל' שיש לו את ה id = email,
והאפשרות ששולטת עליו היא האפשרות השנייה משדה הבחירה…

אז כל החלק העליון של הקוד שלנו (כולל כל התנאים של הטלפון ואימייל) יראה כך:

let showThisFieldIf = {
tel: {
select: [1],
},
email: {
select: [2],
},
};

ואם נעבור לתצוגה האמיתית נראה שבבחירת האפשרות 'טלפון' מופיע שדה טלפון,
ובבחירת האפשרות 'אימייל' נוסף ומוצג לנו השדה אימייל!

הקוד הינו קליל ופשוט וכאמור 'זוכר' בחירות והזנות קודמות ואם בחרת טלפון, והתחרטת וביטלת את הסימון, ואז שוב בחרת את הטלפון, מה שהוקלד / הוזן בשדה לפני כן נשאר על מקומו!

בהצלחה רבה.

הערות קוד:
בקוד זה יש בעיה עם 'שדות חובה', כך שאם שדה מותנה (כמו הטלפון במקרה שלנו…) יהיה חובה – גם אם הוא יהיה מוסתר הוא עדיין יידרש למילוי והגולש לא יבין מה רוצים ממנו!
לכן הימנעו לעשות שדות חובה בכל שדה מותנה שאמור 'להיעלם' לפעמים!