טפסי צור קשר 7… ועוד

בואו נתחיל עם ה "ועוד"

על העבודה עם התוסף "טפסי צרו קשר 7" עצמו אני לא הולך להרחיב,

למדנו על כך בשיעור, ואני מאמין שכל אחד שקצת שיחק עם זה הבין מהר מאוד את שלל האופציות והפיצ'רים.

אני הולך קצת לפרט על משהו נחמד שלמדתי, ואני שמח לשתף בו את חברי השיעור.

"להפוך את הטופס לדינמי יותר"

קחו לדוגמא את תפריט הבחירה הבא:


HTMLCssJavaScriptPHPC#.NET

בוודאי שמתם לב שבכל בחירה משתנים לנו אפשרויות הבחירה בהמשך הטופס,

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

לקסם הנ"ל אחראי… איך לא… קוד JavaScript.

את הקוד עצמו אני שם בתוך תגית <script></script> והוא יושב בחלונית עריכת הטופס.

והנה הקוד המלא של הטופס:

[select menu-849 id:choice include_blank "פיתוח FrontEnd" "פיתוח BackEnd"]
[checkbox checkbox-9 id:Flang "HTML" "Css" "JavaScript"][checkbox checkbox-711 id:Blang "PHP" "C#" ".NET"]

<script>
 document.getElementById("Flang").style.display = "none";
 document.getElementById("Blang").style.display = "none";
 document.getElementById("choice").addEventListener("change", showOptions);

function showOptions(){
 var selected = document.getElementById("choice").value;

 if(selected=="פיתוח FrontEnd"){
   document.getElementById("Flang").style.display = "block";
   document.getElementById("Blang").style.display = "none";

 }else if(selected=="פיתוח BackEnd"){
   document.getElementById("Flang").style.display = "none";
   document.getElementById("Blang").style.display = "block";

 }else{
   document.getElementById("Flang").style.display = "none";
   document.getElementById("Blang").style.display = "none";
 }
}
</script>

לא להיבהל :-), אני מסביר את הקוד לפי סדר שלבי הפעולה,

2 השורות הראשונות הם הטופס עצמו, תיבת רשימה ו2 תיבות רדיו.

שימו לב! להוסיף לכל שדה id בכדי שנוכל לדבר איתו, אפשרי להוסיף בחלונית שנפתחת בהוספת פריט לטופס (כמו בתמונה) או להוסיף ידני id:myRadio.

 

אחרי שקראנו להם בשמות אפשר להתחיל לכתוב קוד… ושוב… אני מזכיר בתוך תגית <script>

 

ראשית אני מעלים את כפתורי הרדיו באמצעות display:none,

לאחמ"כ אני כותב מאזין לאירוע "change" על תיבת הבחירה, שקוראת לפונקציה בשם showOptions.

הפונקציה בודקת ב if מהו הוא הפריט הנבחר ולפי זה מציגה ומסתירה לחילופין את השדות הרצויים, שוב ב display:block/none.

וזהו!!!… זה עובד… תנסו את זה 🙂

 

חשוב מאוד!

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

שימו לב לתמונה הבאה:

כך זה נראה בפועל… חשוב מאוד לא לעשות מרווחי שורה, אני שברתי את הראש עם זה עד שהבנתי את הבעיה בהצצה בF12 מסתבר שהטופס עצמו כשהוא מוצג, כל מעבר שורה הוא סוגר אותו בתגית <p> מה שגורם לתגית סקריפט להקטע באמצע ולא לעבוד… אז אל תגידו שלא התרעתי.

 

מוזמנים להגיב לשאול ולפרגן בחופשיות.

נפתלי

 

 

 

השאר תגובה

כתובת המייל שלך לא תפורסם, שדות חובה מזומנים בכוכבית. *