שיעור 5
דף 5: אחראי טפסים - Form Handlers.
טפסים היינם אובייקטים: יש להם מתודות משלהם, תכונות משלהם ואחראי אירועים משלהם. אחד מאחראי האירועים שחשוב שתתוודע אליו הוא ה- onSubmit.
ה- onSubmit מבוצע בשני מצבים: אם המשתמש לוחץ על כפתור ה- submit, או שהמשתמש לוחץ על כפתור ה-return בשדות הטקסט. אם שתי פעולות אלו מטופלות באופן כלשהו, הרי שקוד ה-JavaScript שלך יתנהג באופן בלתי צפוי. נסה ללחוץ על כפתור ה- submit ולראות מה קורה.
ב- Netscape, אם תלחץ על כפתור ה- submit, בד"כ הדף יטען מחדש. לרוב, לא זה מה שרצית שיקרה. על מנת למנוע התנהגות זו, מה שעלייך לעשות הוא הדבר הבא:
<form onSubmit="return false;">
<input type="submit" value="Submit">
</form>
בדרך כלל return false הינה הדרך של JavaScript למנוע מהדפדפן שלך לעשות את מה שהתכוון לעשות. עוד דוגמא לעצירת לכך, היא עצירת ה- href מלהגיע ללינק שאליו כוון. לדוגמא הלינק הבא,
<a href=http://www.mattmarg.com/ onClick="return false;”>mattmarg!<?a>
לא יגיע לשום מקום כי החזרת false ב-onClick. נסה את הלינק המת הזה אם אתה לא מאמין לי.
זה יכול להיראות מאד מוזר, אבל זה ממש נפוץ במיוחד במקרה של טפסים. הנה דוגמא לשימוש בטופס על מנת לקבל מידע מהמשתמש. הקלד משהו בתוך שדה הטקסט ולחץ על כפתור ה- Return.
<form name="text_entry_form" onSubmit="monkeyLove(); return false;">
<b>Who does the monkey love: </b>
<input type="text" name="monkey_love" size="40">
</form>
כאשר אתה לוחץ על כפתור ה-return בתוך שדה הטקסט ה- onSubmit handler נקרא לפעולה. הוא מפעיל את פונקציית: ()monkeyLove אשר משנה את הערך של שדה הטקסט.
אם ה- return false לא היה מופעי ב- onSubmit handler, אז הפונקציה: monkeyLove() הייתה יוצאת לפועל, ומשנה את שדה הטקסט, אבל אז הדף היה נטען מחדש ובכך משנה את שדה הטקסט שוב, לא למה שהיה. על מנת למנוע מכל זה לקרות עלייך לשים לב שה- return false יהיה בתוך ה- onSubmit.
הנה, פונקציית ה- ()monkeyLove בשבילך לקריאה בעיון רב:
function monkeyLove()
{
var who_it_is = window.document.text_entry_form.monkey_love.value;
who_it_is = 'The monkey loves ' + who_it_is;
window.document.text_entry_form.monkey_love.value = who_it_is;
}
עוד דוגמא לאותו טופס רק בלי החזרת false על מנת שתוכל לראות מה יקרה:
|
