Form Field Validation And Form Submit Using Ajax

Ajax is a simple process that allows exchange of data with the servers as well as updating various parts of a web page. In PHP and HTML coding, a form is submitted with respect to the ‘method’ and ‘action’ parameters in the form HTML. A form submit by default redirects/reloads the page as per the URL in the form’s ‘action’ parameter. However a form submit using Ajax will help to save the form data even without reloading the page. The form field validation is important before submission so as to check if all the values entered in the fields are correct and is as expected.

In this article I would show you how I have used the ‘jquery.validate.js’ to validate the form fields. As per the functionality, once the form validation passes according to the rules that have been set, the form is submitted by the above method.
However, sometimes, a form-submit without page reload is what is required in a website’s functionality.
Also Read: What HTML5 Does For Web Development?
For this we will do the form submit using Ajax. Here, I will be going through a simple form field validation and submit using Ajax implementation to edit a bunch of data.
Below is the HTML form which has two parts. Initially the form simply displays the email id to the user, which is the data to be edited and the ‘Edit’ anchor. Once a user chooses to edit the email id, by clicking on ‘Edit’ button, the onclick event ‘edit mail ()’ is fired.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Email

Edit

Below is the edit_mail() function, which was fired by clicking on the ‘Edit’ anchor.
Jquery function
1
2
3
4
5
6
7
8
9
10
11
12
13
function edit_mail()

{

$(’#show_email’).css({‘display’ : ‘none’});

$(’#edit_email’).css({‘display’ : ‘block’});

$(’#s_mail’).removeAttr(‘onclick’);

$(’#s_mail’).html(“); //’Edit’ anchor is removed

}
The function simply changes the items displayed on the screen. The form for editing email (with id ‘edit_email’) is displayed by changing the ‘display’ property from ‘none’ to ‘block’.
Similarly, the email text (with id ‘show_email’) that was displayed earlier is hidden by changing the ‘display’ property to ‘none’. The onclick event is removed since we will not need it and do the form submit using Ajax, after validation of form fields.
Process Of Form Submit Using Ajax
Below is the form validation section. Now, once the validation passes, the form submit using Ajax is done and it runs the function defined in ‘submitHandler’. The ‘submitHandler’ submits the form ONLY when form field validation returns success. Any Ajax call that you want to make on form submit needs to be done here.
It is to be noted that the last line of submitHandler function has a statement ‘return false’. This is the main step to avoid the form submit from reloading the page.
Form validation and Ajax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$(’#edit_email’).validate({

rules: {

‘p_email’ : {

required : true,

email: true

}

},

submitHandler: function(form) {

var func_url = base_url+"front/ajax_functions”;

$.ajax({

url: func_url,

type: ‘post’,

cache: false,

data: {

mail: function(){

return $(’#p_email’).val();

}

},

success: function(json){

try{

var obj = jQuery.parseJSON(json);

//alert(obj[‘STATUS’]);

$(’#edit_email’).css({‘display’ : ‘none’});

$(’#show_email’).css({‘display’ : ‘block’});

$(’#s_mail’).attr({‘onclick’: ‘edit_mail()’});

$(’#s_mail’).html(‘Edit’);

$(’#show_email’).html(function(){

return $(’#p_email’).val();

});

}

catch(e){

alert(json);

alert(‘Exception while request..’);

}

}

});

return false;

}

});
When the Ajax responds with a success, the function in the ‘success’ tag of Ajax call is run. Here, the edit form is again changed to ‘display:none’ and displays the edited email id as text.
Below is the Ajax function which processes the edited mail id.
Ajax function call
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$mail = $_REQUEST[‘mail’];

////////***************////////

if($update == 1) //If update returns success

{

$res = array(‘STATUS’ => 1);

}

else //If update returns failure

{

$res = array(‘STATUS’ => 0);

}

echo json_encode($res);
The Ajax code above returns data as json. This is decoded in the Ajax ‘success’ tag in ‘submitHandler’ by creating an Ajax object, using the below statement, to parse the json code:
“var obj = jQuery.parseJSON(json);”
Once the program returns with a status ‘1’ from Ajax call, i.e., the email id is updated, the form submit using Ajax is considered complete without a page reload happening, which is prevented by the ‘return false’ statement at the end of the submitHandler function.
Form Field Validation And Form Submit Using Ajax

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s