מדריך ליצירת תנאים לוגיים בין שדות ובין אלמנטים שונים
ישנם מקרים שנרצה להציג או להסתיר שדה או אלמנט מסוים בהתניה לבחירת הגולש או בלחיצה על כפתור מסוים.
במדריך זה נראה כיצד ניתן באמצעות JQuery להציג או להסתיר אלמנטים לפי תנאי לוגי של שדה או אלמנט אחר.
בטופס הבא ניתן לראות דוגמא למימוש בטופס אלמנטור עם שדה "אזור בארץ" שברגע שנבחר אזור בארץ מתווסף לטופס שדה "עיר" המציג את רשימת הערים בארץ לאותו אזור שנבחר
במקרה הזה יש ליצור בטופס "אזור בארץ" עם 3 אזורים: מרכז, צפון, דרום. וכן 3 שדות בשם "עיר" שבכל אחד מהם רשימת ערים של אותו אזור לכל אחד מהשדות עיר נוסיף ID כדי שנוכל לקחת בקלות סלקטור של אותו שדה.
בשלב הבא נגדיר ב CSS להסתיר ברירת מחדל את 3 השדות "עיר" באמצעות הסלקטורים של אותם שדות לכולם ניתן את הפקודה display: none כדי להסתיר אותו לחלוטין מהטופס במצב ברירת מחדל שלא נבחר עדיין אזור בארץ
.elementor-field-group-cityCenter , .elementor-field-group-cityNorth, .elementor-field-group-citySouth{
display: none;
}
בשלב הבא נוסיף אלמנט HTML עם הסקריפט הבא שבשינוי שדה מופעלת פונקציה שבודקת איזה ערך נבחר בשדה באמצעות פקודת if else
בכל אחד מהם נציג את השדה הרלוונטי באמצעות display block ונסתיר את 2 האחרים באמצעות display none
הסיבה שצריך בצורה יזומה להסתיר מחדש את האחרים למרות שזה כבר מוסתר ברירת מחדל באמצעות CSS שהגדרנו קודם כי לפעמים הגולש בוחר אפשרות אחת והפונקציה הופעלה וכבר הציגה את השדה של אותו אזור ונרצה שזה יוסתר מחדש בבחירה של אזור אחר
<script>
jQuery('#form-field-area').on('change', function() {
if ( this.value == "צפון") {
jQuery(".elementor-field-group-cityNorth").css("display", "block");
jQuery(".elementor-field-group-cityCenter").css("display", "none");
jQuery(".elementor-field-group-citySouth").css("display", "none");
}else if ( this.value == "מרכז") {
jQuery(".elementor-field-group-cityCenter").css("display", "block");
jQuery(".elementor-field-group-cityNorth").css("display", "none");
jQuery(".elementor-field-group-citySouth").css("display", "none");
}else if ( this.value == "דרום") {
jQuery(".elementor-field-group-citySouth").css("display", "block");
jQuery(".elementor-field-group-cityCenter").css("display", "none");
jQuery(".elementor-field-group-cityNorth").css("display", "none");
}else {
jQuery(".elementor-field-group-cityCenter").css("display", "none");
jQuery(".elementor-field-group-cityNorth").css("display", "none");
jQuery(".elementor-field-group-citySouth").css("display", "none");
}
});
</script>