הפונקציות ממשפחת serialize נועדו כדי לאסוף נתוני טופס לתוך סטרינג או מערך, תוך שימוש בפונקציה אחת. האפשרות האחרת אומרת לעבור על כל שדות הטופס בלולאה ולשרשר אותם לאובייקט או מערך אחד. עבור כל שדה יישמרו key + value, כאשר key הוא השם של השדה (המאפיין name), וvalue הוא הערך שהגולש הזין/סימן עבור השדה.

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

שימו ♥:  שדות ללא המאפיין name – לא יכללו באובייקט שייווצר על ידי הפונקציה.

הפונקציות של serialize שימושיות גם לשליחת טופס בAJAX, אבל לא רק. נוכל להשתמש בפונקציות גם עבור פעולות שמתבצעות רק בJS ללא שימוש בAJAX. לדוגמה – סינון פריטים בעמוד. נכניס את כל המסננים שלנו (צ'קבוקסים או כפתורי רדיו לצורך העניין) לתוך טופס אחד, כאשר לכולם יש name כמובן, ואז בעת submit של הטופס (לחיצה על הכפתור "סינון" למשל) – נאגד את האפשרויות שסימן הגולש ונסנן את הפריטים בעמוד לפיהם.

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

אופן השימוש בפונקציות

var formData = jQuery('#myForm').serialize();

בתוך הסוגריים של הסלקטור יהיו הID או הקלאס של הטופס שאת הנתונים שלו אנחנו רוצים לקבל.

serialize

שימוש בפונקציה serialize תכניס לתוך המשתנה formData (או איך שתבחרו לקרוא לו כמובן) את כל נתוני הטופס משורשרים כquery string, כלומר משהו בסגנון הזה:

firstName=Dan&lastName=Cohen&city=jerusalem

אם נרצה להוסיף נתונים נוספים, על הנתונים של הטופס – צריך פשוט לשרשר לסטרינג הזה פרמטרים נוספים. לדוגמה:

formData = jQuery('#myForm').serialize();
formData += "&age=35&hobby=puzzles";

כעת, בתוך המשתנה formData יהיו לנו בנוסף לשלושת שדות הטופס (שם פרטי, משפחה ועיר) שתי פרמטרים נוספים של גיל ותחביב.

serializeArray

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

array[
    {name: "fullName", value: "חני"},
    {name: "email", value: "my@email.com"},
    {name: "phone", value: "0520520522"}
]

במידה ונרצה להוסיף למערך נתונים נוספים שלא נמצאים בטופס – אפשר להוסיף למערך (push) אובייקט באותו פורמט כמו האובייקטים האחרים. לדוגמה:

var captchaDetails = {
    name: captcha,
    value: jQuery('#captcha').val()
};
formData.push(captchaDetails);

בדוגמה הזו הוספנו לטופס את נתוני הקאפצ'ה (רכיב לאימות שהגולש אכן אנושי ואיננו רובוט שמנסה להספים את המערכת של האתר). הנתון נמצא כvalue של אלמנט בשם captcha, ואותו צרפנו למערך הנתונים של הטופס.

הערך הנשמר עבור פקדי טופס מסוגים שונים

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

שדה הזנה

מדובר בשדות שבהם הגולש מזין תוכן, כדוגמת: text, textarea, שדה מסוג tel, email וכדו'. בשדות אלו הגולש מזין טקסט.

עבור שדות מסוג זה הערך מגיע בדיוק כפי שהוזן על ידי הגולש

שדות בחירה יחידה

אלו שדות מסוג כפתורי רדיו, range ותיבת select שלא הוגדר לה המאפיין multiple.

הפרמטר name:

עבור כפתורי רדיו – לכל קבוצת כפתורים יש name אחיד משלה, וזה הname שמתקבל. כלל זה תקף גם עבור כפתורי checkbox שבסעיף הבא.

עבור שדה מסוג range – יתקבל הname של השדה.

עבור תיבת select – יתקבל המאפיין name של הselect עצמו. כלל זה תקף גם לגבי תיבת סלקט לבחירה מרובה שבסעיף הבא.

הפרמטר value:

עבור כפתורי רדיו – הערך שמתקבל הוא הvalue של הinput המסומן. – כנ"ל גם בcheckbox.

עבור שדה מסוג range – יתקבל הערך שסומן על ידי הגולש.

עבור תיבת סלקט – יתקבל הvalue של הoption הנבחור. אם נבחר option ללא המאפיין value – הערך שמתקבל יהיה הטקסט של הoption. כנ"ל גם בסלקט לבחירה מרובה.

שדות בחירה מרובה

אלו שדות מסוג כפתורי צ'קבוקס, או תיבת select אשר הוגדר לה המאפיין multiple.

במידה ונתוני הטופס עוברים לשרת באמצעות AJAX – הרי שבשדות מסוג זה מומלץ להגדיר כname את השם + סוגריים מרובעים. לדוגמה: hobbies[]. זה משמעותי לגבי צד שרת שעושה אחר כך שימוש בנתונים. אני יודעת שבPHP למשל, אם תשלחו לשרת נתון של שדה בחירה מרובה כאשר השם הוא ללא סוגריים מרובעים – השרת יקרא רק את הבחירה הראשונה ויתעלם מהאחרות. לכן כדאי לשים לזה לב.

במידה ונתוני הטופס מעובדים בJS בלבד – אין לזה משמעות ואפשר לתת שם גם ללא סוגריים מרובעים.

בסטרינג שנקבל באמצעות serialize, או במערך שנקבל באמצעות serializeArray, נקבל שוב ושוב name + value, עבור כל בחירה בשדה. לדוגמה אם סימנתי שתי צ'קבוקסים ששייכים לאותה קבוצה (ויש להם את אותו name) – הרי שיתקבל משהו כזה:

food=pizza&food=falafel // When use serialize

{
    name: food,
    value: pizza
}, {
    name: food,
    value: falafel
} // When use serializeArray

שדות נסתרים – hidden

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

הname שיישלח – הוא הname של האינפוט, והvalue שיישלח הוא הvalue שהוגדר לאינפוט. חלק ופשוט.

הערה לגבי שדה מסוג file

הפונקציה serialize או serializeArray אינן מסוגלות להחזיר תוכן של שדה מסוג file.

כאשר הטופס מכיל שדה לבחירת קובץ ורוצים לקפל את נתוני הטופס ולשלוח אותם לשרת – יש לעבוד באופן מעט שונה לא רק בקיפול נתוני הטופס אלא מאפיינים נוספים שחייבים להיות כדי שהטופס יתפקד ויישלח כמו שצריך. בעז"ה אכתוב פוסט מפורט על טופס עם שדה file, כולל שליחה לAJAX.

סיכום:

  • הפונקציות שלמדנו תחזרנה לנו את נתוני הטופס, עבור כל שדה שיש לו name.
  • כאשר לא הוזן/נבחר ערך בשדה – ישנם סוגי שדות (כמו שדות להזנה רגילה) שעבורם יישלח שם השדה ללא ערך (בserialize) או עם ערך ריק (serializeArray), וישנם שדות כמו select, שבהם אם לא נבחר ערך – השדה לא יחזור כלל בפונקציה, לא הname שלו ולא value ריק. זה משמעותי אם תרוצו בלולאה על נתוני הטופס למשל. פשוט צריך לזכור לבדוק אם הוזן ערך בשדה לפני שמעבדים אותו הלאה.

דוגמת קוד לערכי השדות השונים בשתי הפונקציות

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

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

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

בהצלחה רבה!

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *