מדריך: יצירת טופס צור קשר ב-AJAX עם jQuery

מדריך פשוט המלמד איך ליצור טופס יצירת קשר מרשים באמצעות jQuery ו-AJAX וכן PHP במינימום מאמץ.

אני משער שכולם יודעים איך ליצור טופס יצירת קשר פשוט, אבל הטפסים הנפוצים, עם ה-javascript alerts שלהם או עם ה-refresh היו נהדרים בשנות ה-90. היום טופס יצירת קשר צריך להיות חלק אינטגרלי מהאתר ולהשלח כמובן באמצעות AJAX אל השרת. הוולידציה של הטופס צריכה להיות זורמת ולא לערב כלל את השרת.

עם jQuery יצירת סקריפטים מבוססי AJAX היא כל כך קלה ופשוטה שזה ממש עושה חשק לנסות.

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

בניית הטופס באמצעות html

הטופס כמובן צריך לעמוד בכללי נגישות טפסים ותקינה, לפיכך אנו מאד מקפידים על fieldset, labels וכמובן על תגית for. שימו לב שיש כאן names והם חובה. אין לי הרבה מה להוסיף למעט הצגת הקוד:


<form id="form1" method="post" action="/">
        <fieldset>

            <label for="field_name">שם</label>
            <input name="field_name" id="field_name" type="text" />
        </fieldset>
        <fieldset>
            <label for="field_telephone">מספר טלפון</label>
            <input maxlength="7" name="field_telephone" id="field_telephone" type="text" />
                <select name="field_pre_telephone" id="field_pre_telephone">
                    <option>050</option>

                    <option>052</option>
                    <option>054</option>
                    <option>057</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>

                    <option>08</option>
                    <option>09</option>
                    <option>072</option>
                    <option>073</option>
                    <option>077</option>
                </select>

            </fieldset>
            <fieldset>
                <label for="field_email">כתובת דואר אלקטרוני</label>
                <input name="email" id="email" type="text" />
            </fieldset>
            <fieldset>
                <input id="Button" type="button" value="" />
            </fieldset>

    </form>

מדובר בקוד שאפשר להעתיק ולהדביק אותו בכל אתר אינטרנט ולעצב אותו באמצעות css.

בניית הקישור לסקריפט ול-jQuery

עכשיו עלינו לבנות את הסקריפט החביב, ראשית ניצור קישור לקובץ הסקריפט שלנו וכמובן ל-jQuery מדף ה-HTML שבו נמצא הטופס:


<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/validateForm.js" type="text/javascript"></script>

אחרי כן ניצור את קובץ validateForm.js בתיקית scripts ונתחיל לעבוד עליו.

כתיבת validateForm.js

המבנה הלוגי של הסקריפט הוא:

מחיקת הודעות שגיאה קודמות.
הפעלה כאשר המשתמש לוחץ על בכפתור שיש בטופס שלנו.
העברת כל שדה בפונקצית הוולדיציה המתאימה – כך אנו בודקים למשל שבשדה המייל יש מספרים בלבד.
במידה ושדה כלשהו נכשל – הדפסת הודעות שגיאה והמתנה.
במידה וכל השדות תקינים:
1. ביצוע סיריאליזציה של המידע.
2. שליחתו באמצעות POST ל-php.
3. הרצת פונקציה שמדפיסה הודעת תודה במידה והשרת מחזיר שהמידע התקבל בהצלחה.

בניית פונקציות הוולדיציה

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



function validPhone(number) //Function for validating phone
{  
    if(number.length ==7 && number == Math.abs(number) && number == Math.ceil(number) )
    { 
        return true;
    }
    else
    {
        return false;
    }
}

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



function validMail(str) //Function for validating mail
{
		var at="@"
		var dot="."
		var lat=str.indexOf(at)
		var lstr=str.length
		var ldot=str.indexOf(dot)
		if (str.indexOf(at)==-1){
		   return false;
		}
		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		   return false;
		}

		if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		    return false;
		}

		 if (str.indexOf(at,(lat+1))!=-1){
		    return false;
		 }

		 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		    return false;
		 }

		 if (str.indexOf(dot,(lat+2))==-1){
		    return false;
		 }
		
		 if (str.indexOf(" ")!=-1){
		    return false;
		 }

 		 return true;				
}

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



function validName(name) // function for validating name
{
    if(name.length > 1)
    {
        return true;
    }
    else
    {
        return false;
    }

}

בניית האירוע

עכשיו למלאכת ההרכבה של הסקריפט עצמו: ראשית אנחנו חייבים להורות לסקריפט לרוץ ברגע שדף ה-HTML לא נטען. קל לעשות את זה באמצעות סינטקס בסיסי של jQuery שמאפיין כמעט את כל הפונקציות שנכתבות בעזרת jQuery.


$(document).ready(function() {

});

אנחנו מוסיפים event listener לכפתור שיש בטופס. מהות ה-event: ברגע שמישהו לוחץ על הכפתור אז תפעיל את הטקסט שיש בתוך הפונקציה. מדובר באירוע מסוג click שאותו אנו מבצעים באמצעות שימוש ב-jQuery Events:



$(document).ready(function() {
    $("#Button").click(function() {
//כל קוד שנכתוב יופיע בחלק הזה//
    });
});

קבלת המשתנים מהשדות באמצעות jQuery

כעת אנו מגדירים את 4 המשתנים שלנו – שלושת המשתנים name, telephone ו-email ומשתנה עזר checkNumber שסוכם את סך הבדיקות שנעשו. באמצעות הסינטקס הפשוט של jQuery אנו טוענים לתוכם את הערכים שיש בשדות. יש לנו את ה-jQuery סלקטור שהוא בעצם ה-id של כל שדה ופונקצית .val() שמשיגה את מה שמוזן לתוך השדה.


        var name = $('#field_name').val(); //defining name
        var telephoneNumber = $('#field_telephone').val(); //defining phone
        var email = $('#email').val();  //defining mail
        var checkNumber = 0; //numbers of checks

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


        $('form strong').remove(); //remove all previous remarks

שליחת הערכים לפונקציות הוולדיציה

מה שנותר לנו לעשות זה לשלוח כל ערך לפונקצית הוולדיציה המתאימה שלו ולראות אם קיבלנו true. במידה וכן, אנו מוסיפים 1 למשתנה checkNumber. במידה ולא, אנו מדפיסים הודעת שגיאה. גם בהדפסת הודעת השגיאה אנו נעזרים ב-jQuery. באמצעות פונקצית closest המוצאת את ה-fieldset שבתוכו יש את שדה ה-input והדפסת הודעת שגיאה באמצעות append. הודעת השגיאה מודפסת כאשר יש מסביבה תגית strong שאותה כמובן אפשר לעצב איך שרוצים ב-css.


if(validName(name)==true)
        {
            checkNumber++; 
        }
        else
        {
            $('#field_name').closest("fieldset").append("<strong>יש למלא את השם</strong>");
        } 
        if(validPhone(telephoneNumber)==true)
        {
            checkNumber++;
        }
        else
        {
            $('#field_telephone').closest("fieldset").append("<strong>יש למלא את מספר הטלפון בצורה מדויקת</strong>");
        }
        if(validMail(email)==true)
        {
            checkNumber++;
        }
        else
        {
            $('#email').closest("fieldset").append("<strong>יש למלא את כתובת המייל בצורה מדויקת</strong>");
        }

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



        function contactSent()
        {
            $('form').empty();
            $('form').html("הפרטים נשלחו בהצלחה, ניצור איתך קשר ביום העסקים הקרוב. תודה רבה.");
        }

AJAX

עכשיו ללב העניין – שליחת הטופס באמצעות AJAX. ראשית אני אכתוב את הפונקציה ואז אני אסביר:



        if(checkNumber==3)
        {
            var data = $('form').serialize();
            $.post("leadform.php", data, contactSent());     
        }

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

השורה השניה היא השורה שגורמת לקסם לקרות. ראשית $.post היא פונקצית jQuery סטנדרטית ששולחת את הנתונים כ-post והיא מקבלת בטופס זה 3 משתנים: 1. את ה-url של ה-php/asp שאנו שולחים אליו, את המשתנה שבו יש את המידע שאנו שולחים וכן את ה-callback – הפונקציה שנשלחת במידה והכל תקין.

פשוט ואלגנטי, לא?

הנה הקוד במלואו:


function validPhone(number) //Function for validating phone
{  
    if(number.length ==7 && number == Math.abs(number) && number == Math.ceil(number) )
    { 
        return true;
    }
    else
    {
        return false;
    }
}
function validMail(str) //Function for validating mail
{
		var at="@"
		var dot="."
		var lat=str.indexOf(at)
		var lstr=str.length
		var ldot=str.indexOf(dot)
		if (str.indexOf(at)==-1){
		   return false;
		}
		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		   return false;
		}

		if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		    return false;
		}

		 if (str.indexOf(at,(lat+1))!=-1){
		    return false;
		 }

		 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		    return false;
		 }

		 if (str.indexOf(dot,(lat+2))==-1){
		    return false;
		 }
		
		 if (str.indexOf(" ")!=-1){
		    return false;
		 }

 		 return true;				
}

function validName(name) // function for validating name
{
    if(name.length > 1)
    {
        return true;
    }
    else
    {
        return false;
    }

}

$(document).ready(function() {
    $("#Button").click(function() {
        $('strong').remove(); //remove all previous remarks
        var name = $('#field_name').val(); //defining name
        var telephoneNumber = $('#field_telephone').val(); //defining phone
        var email = $('#email').val();  //defining mail
        var checkNumber = 0; //numbers of checks
        
        if(validName(name)==true)
        {
            checkNumber++; 
        }
        else
        {
            $('#field_name').closest("fieldset").append("<strong>יש למלא את השם</strong>");
        } 
        if(validPhone(telephoneNumber)==true)
        {
            checkNumber++;
        }
        else
        {
            $('#field_telephone').closest("fieldset").append("<strong>יש למלא את מספר הטלפון בצורה מדויקת</strong>");
        }
        if(validMail(email)==true)
        {
            checkNumber++;
        }
        else
        {
            $('#email').closest("fieldset").append("<strong>יש למלא את כתובת המייל בצורה מדויקת</strong>");
        }
        function contactSent()
        {
            $('form').empty();
            $('form').html("<strong>הפרטים נשלחו בהצלחה, ניצור איתך קשר ביום העסקים הקרוב. תודה רבה.</strong>");
        }
        if(checkNumber==3)
        {
            var data = $('form').serialize();
            $.post("leadform.php", data, contactSent());     
        }
    });
});

צד השרת – PHP

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


<?php
function clean($data) 
{
	$data = trim(stripslashes(strip_tags($data)));
	return $data;
}

function killExploits($data)
{
$exploits = array("content-type", "bcc:", "cc:", "document.cookie", "onclick", "onload", "javascript");
	foreach ($exploits as $exploit)
	{
		if (strpos($data, $exploit) != false)
		{
			return false;
		}
		
	}
	return true;
}
        
foreach ($_REQUEST as $k => $v) 
   {
        $_REQUEST[$k] = clean($v);
        $v =clean($v);
        if(killExploits($v)==false)
        {
        	die;
        }
   }
   
$subject = "Subject";
$body = "<b>Name".$_REQUEST['field_name']."</b><br>mail:<b>".$_REQUEST['email']."</b><br>Phone:<b>".$_REQUEST['field_pre_telephone']."-".$_REQUEST['field_telephone']."</b>n";
        $headers .= 'MIME-Version: 1.0' . "rn";
		$headers .= "Content-type: text/html; charset=UTF-8rn";
		$headers .= "From: ".$_REQUEST['field_name'];
		$approve = "yes";
        mail("[email protected]",$subject,$body,$headers);
        echo "success";
?>

זה הכל: קל, פשוט ואלגנטי, כיף להשתמש ב-AJAX עם jQuery.