בחירת האפשרות "אחר" באמצעות ג'אווה סקריפט

[wmw]

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

המטלות הנדרשות:
תיבת בחירה [combo box] בעלת מספר אפשרויות קבועות, כשהאפרות האחרונה היא "אחר"
תיבת טקסט [input] שתהיה פעילה רק במקרה שבחרו באפשרות "אחר".
הדגשת הסטטוס של התיבה [פעיל / לא פעיל] באמצעות צבע.
מחיקת הטקסט שבתיבה במקרה שנעשתה בחירה מחודשת באחת האפשרויות האחרות.

[אפשרות המחיקה אינה חובה, ובאם מחליטים שתיבת הטקסט תהיה "נראית / בלתי נראית", אין צורך לרוקן את הטקסט שהוקלד.]

אז נתחיל בקוד HTML

<select id="slc_car" onchange="javascript:chkOther();">
<option value="0">וולבו</option>
<option value="1">פיאט</option>
<option value="2">הונדה</option>
<option value="-1">אחר</option>
</select>
<input id="txt_other" type="text" style="background-color:#aaa;" disabled="disabled"/>

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

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

<script type="text/javascript">
function chkOther(){
if(document.getElementById("slc_car").selectedIndex=="3"){
    document.getElementById("txt_other").style.backgroundColor = "#fff";
    document.getElementById("txt_other").disabled=false;
}
else{
    document.getElementById("txt_other").style.backgroundColor = "#aaa";
    document.getElementById("txt_other").value="";
    document.getElementById("txt_other").disabled=true;
}
</script>

הסבר:
קודם כל אנו בודקים באמצעות משפט IF מהו האינדקס של התיבה שנבחרה
כלל חשוב: אינדקס מתחיל מאפס ולכן, היות והאפשרות "אחר" היא הרביעית, הרי שמספרה הוא 3!.

במקרה שהאפשרות שנבחרה היא "אחר" [אינדקס 3], אנו משנים את צבעה של תיבת הטקסט לצבע לבן.
בשורה הבאה אנו "מאפשרים" את התיבה, והופכים אותה פעילה.

במקרה שהבחירה שונה מאינדקס 3, [else], אנו עושים את הפעולה ההפוכה.
צובעים את רקע התיבה לאפור, מרוקנים את תוכן התיבה, וחוסמים אותה מפעילות.

כעת, אותו דבר למקרה שאנו רוצים לקבוע האם התיבה תהיה "גלויה / מוסתרת":
את החלק הזה אני יכתוב בצורה מתקדמת קצת, אך העקרון הוא זהה.
This user does not have permission to use the HTML BB code.

בדוגמה הזו השתמשתי בקיצורים.
קודם כל, שלחתי את תיבת הבחירה כולה [המילה this שבסוגריים] כפרמטר לפונקציה. [ולא נזקקתי לתת לה ID {אבל זה רק להדגמה, הרי אני אצטרך לשלוח את הערך שלה לאיזשהי פונקציה שתשלח אותה במייל או תשמור אותה במסד נתונים, וזה יהיה לפי ID או NAME} אלא אני שולח את כל כולה לפונקציה ולא נזקק להפעיל את פונקציית החיפוש של ג'אווה סקריפט]
קיצור שני: יצרתי אובייקט, שערכו הוא תיבת הטקסט, והפעלית את חיפוש האלמנט פעם אחת בלבד.

שימו לב: בכל פעם "הצגתי" או "הסתרתי" את תיבת הטקסט באמצעות 2 פקודות.
למעשה אחת מהן מיותרת, אך כדי שהפונקציה תופעל בכל הדפדפנים, שמתי את שניהם.

בהצלחה.

 

[יריב]

שים לב שאתה משתמש בויזיביליטי ודיספליי.
1. הבדלים קטנים ברינדור ויזיביליטי קרוס בראוזר.
2. גם אפשרות ה-דיספליי=נון לא מי יודע מה בגלל רינדור קרוס ברואזר
שילוב שניהם - שילוב מנצח. אקספלורר ושאר העולם יגיבו יפה.
דיספליי=נון למעשה יעשה בור ולכן אם הדיו המקיף לא מגדיר גובה הוא יתקצר, אז אני מקווה שאפשר להגדיר לו גובה.
שים לב ששגיאת סקריפט במקום אחר לא מפסיקה את כל מנוע הג'אווה סקריפט היות שאז אתה תלוי גם בסקריפטים חיצוניים שכביכול מתנהגים יפה,
ככלל כל פעולת סטייל או פקודה שיכולה להפגע מסיבות מנוע דפדפן תכניס ל-IF כדי שהסקריפט לא יעצור.

 

[יריב]

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

 

[wmw]

היי יריב
מראש הגדרתי את הקוד לשינויי עיצוב והשבתת האובייקט, בגלל ה"בור" שנוצר במקרה של העלמת אובייקט.

את התוספת יצרתי למשתמשים מתקדמים יותר, שיוכלו לשחק כהבנתם [אם בצורה של "שמירת מקום" או בכל צורה אחרת.

מקווה שהוספה של מדריכים תסייע לכל בוגרי/ות DREEM שנזקקים בדר"כ לקצת סקריפטים פה ושם.

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