Learn Infinity

Learn Some Thing New

Form submission with PHP, MySQL with jQuery and Ajax

8 years ago
Read Time: 5 minutes
by Learn Infinity
1 comment

Form submission with PHP, MySQL with jQuery and Ajax

In this exercise, we will see an illustration program to figure out how to do Form submission with PHP, MySQL with Ajax-Post. Here we will go to handle the data values into a database as well as view page with the help of front-end UI. We have users table containing users data like full name, username, password, and etc. Using this users table, we need to perform Form submission and Store procedure utilizing MySQL with Ajax-Post.

Step 1:

Initially, we need to configure our database with our application and create a required table(s) in it. Following code, use to connect our database and create user table structure.

<?php
$conn = mysql_connect("localhost","root","") or die(mysql_error());
$db = mysql_select_db("php_crud",$conn) or die(mysql_error());
date_default_timezone_set('Asia/Kolkata');
?>

1

2

3

4

5

<?php

$conn = mysql_connect("localhost","root","") or die(mysql_error());

$db = mysql_select_db("php_crud",$conn) or die(mysql_error());

date_default_timezone_set('Asia/Kolkata');

?>

User Table Structure:

CREATE TABLE `tv_users` (
  `user_id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(250) NOT NULL,
  `full_name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `contact_no` varchar(50) NOT NULL,
  `role` varchar(10) NOT NULL,
  `status` int(11) NOT NULL,
  `created_at` varchar(10) NOT NULL,
  `created_by` int(11) NOT NULL,
  `updated_at` varchar(10) NOT NULL,
  `updated_by` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

CREATE TABLE `tv_users` (

`user_id` int(11) NOT NULL,

`username` varchar(100) NOT NULL,

`password` varchar(250) NOT NULL,

`full_name` varchar(100) NOT NULL,

`email` varchar(100) NOT NULL,

`contact_no` varchar(50) NOT NULL,

`role` varchar(10) NOT NULL,

`status` int(11) NOT NULL,

`created_at` varchar(10) NOT NULL,

`created_by` int(11) NOT NULL,

`updated_at` varchar(10) NOT NULL,

`updated_by` int(11) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 2:

The below code use to design the Front-End UI to handle the database operations. This HTML form contains input fields to enter user information to be saved into the user table.

<form id="hl_form" name="hl_form">
<input type="hidden" id="form_name" name="form_name" value="add_user" />
<input type="hidden" id="edit_id" name="edit_id" value="0" />
<input type="hidden" id="old_password" name="old_password" value="" />
<div class="row">
	<div class="col-md-offset-2 col-md-8">
		<div class="panel panel-default">
			<div class="panel-heading">User Details:</div>
			<div class="panel-body">
				<div class="alert icon-alert with-arrow alert-success form-alter" role="alert">
					<i class="fa fa-fw fa-check-circle"></i>
					<strong> Success ! </strong> Data saved successfully. 
				</div>
				<div class="alert icon-alert with-arrow alert-danger form-alter" role="alert">
					<i class="fa fa-fw fa-times-circle"></i>
					<strong> Note !</strong> Data saving failed. 
				</div>
				<div class="col-md-6">
					<div class="form-group">
						<label for="full_name" class="required" >Full Name:</label>
						<input type="text" class="form-control" id="full_name" name="full_name" required />
					</div>
					<div class="form-group">
						<label for="username" class="required" >Username:</label>
						<input type="text" class="form-control dup-check" id="username" name="username" required />
						<span class="dup-chek-details"></span>
					</div>
					<div class="form-group">
						<label for="password" class="required" >Password:</label>
						<input type="password" class="form-control" id="password" name="password" required />
					</div>
					<div class="form-group">
						<label for="c_password" class="required" >Confirm Password:</label>
						<input type="password" class="form-control" id="c_password" name="c_password" required />
					</div>
					
				</div>
				<div class="col-md-6">
					<div class="form-group">
						<label for="email" class="required" >Email:</label>
						<input type="email" class="form-control" id="email" name="email" required />
					</div>
					
					<div class="form-group">
						<label for="contact_no" class="required" >Contact No.:</label>
						<input type="text" class="form-control" id="contact_no" name="contact_no" required />
					</div>
					
					<div class="form-group">
						<label for="user_role" class="required" >User Role:</label>
						<select class="form-control selectpicker show-tick" id="user_role" name="user_role" data-live-search="true" required >
							<option value="">-- select --</option>
							<option value="Admin">Admin</option>
							<option value="User">User</option>
						</select>
					</div>
				</div>
				
				<div class="clearfix"></div>
				<div class="form-action-group">
					<button type="button" class="btn btn-primary btn-form-action btn-submit">Submit</button>
					<button type="button" class="btn btn-danger btn-form-action btn-reset">Clear</button>
				</div>
				
			</div>
		</div>
	</div>
</div>
</form>

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

<form id="hl_form" name="hl_form">

<input type="hidden" id="form_name" name="form_name" value="add_user" />

<input type="hidden" id="edit_id" name="edit_id" value="0" />

<input type="hidden" id="old_password" name="old_password" value="" />

<div class="row">

<div class="col-md-offset-2 col-md-8">

<div class="panel panel-default">

<div class="panel-heading">User Details:</div>

<div class="panel-body">

<div class="alert icon-alert with-arrow alert-success form-alter" role="alert">

<i class="fa fa-fw fa-check-circle"></i>

<strong> Success ! </strong> Data saved successfully.

</div>

<div class="alert icon-alert with-arrow alert-danger form-alter" role="alert">

<i class="fa fa-fw fa-times-circle"></i>

<strong> Note !</strong> Data saving failed.

</div>

<div class="col-md-6">

<div class="form-group">

<label for="full_name" class="required" >Full Name:</label>

<input type="text" class="form-control" id="full_name" name="full_name" required />

</div>

<div class="form-group">

<label for="username" class="required" >Username:</label>

<input type="text" class="form-control dup-check" id="username" name="username" required />

<span class="dup-chek-details"></span>

</div>

<div class="form-group">

<label for="password" class="required" >Password:</label>

<input type="password" class="form-control" id="password" name="password" required />

</div>

<div class="form-group">

<label for="c_password" class="required" >Confirm Password:</label>

<input type="password" class="form-control" id="c_password" name="c_password" required />

</div>

</div>

<div class="col-md-6">

<div class="form-group">

<label for="email" class="required" >Email:</label>

<input type="email" class="form-control" id="email" name="email" required />

</div>

<div class="form-group">

<label for="contact_no" class="required" >Contact No.:</label>

<input type="text" class="form-control" id="contact_no" name="contact_no" required />

</div>

<div class="form-group">

<label for="user_role" class="required" >User Role:</label>

<select class="form-control selectpicker show-tick" id="user_role" name="user_role" data-live-search="true" required >

<option value="">-- select --</option>

<option value="Admin">Admin</option>

<option value="User">User</option>

</select>

</div>

</div>

<div class="clearfix"></div>

<div class="form-action-group">

<button type="button" class="btn btn-primary btn-form-action btn-submit">Submit</button>

<button type="button" class="btn btn-danger btn-form-action btn-reset">Clear</button>

</div>

</div>

</div>

</div>

</div>

</form>

Step 3:

The below code use to validate the entered user information matched with our requirements or not using validate.js. Validate JS is widely used for validating the HTML forms with rules and expressions.

$("#hl_form").validate({
	// Specify the validation rules
	rules: {
		full_name: {
			required: true
		},
		email: {
			required: true,
			email: true
		},
		username: {
			required: true
		},
		password: {
			required: true,
			minlength: 5
		},
		c_password: {
			required: true,
			minlength: 5,
			equalTo: "#password"
		},
		user_role: "required"
	},
	
	// Specify the validation error messages
	messages: {
		full_name: "Please enter your First Name",
		email: "Please enter your Email name",
		username: {
			required: "Please enter your Username"
			
		},
		password: {
			required: "Please provide a password",
			minlength: "Your password must be at least 5 characters long"
		},
		c_password: "Password Mismatch",
		user_role: "Please Choose User Role"
	},
	submitHandler: function(form) {
		form.submit();
	}
});

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

$("#hl_form").validate({

// Specify the validation rules

rules: {

full_name: {

required: true

},

email: {

required: true,

email: true

},

username: {

required: true

},

password: {

required: true,

minlength: 5

},

c_password: {

required: true,

minlength: 5,

equalTo: "#password"

},

user_role: "required"

},

// Specify the validation error messages

messages: {

full_name: "Please enter your First Name",

email: "Please enter your Email name",

username: {

required: "Please enter your Username"

},

password: {

required: "Please provide a password",

minlength: "Your password must be at least 5 characters long"

},

c_password: "Password Mismatch",

user_role: "Please Choose User Role"

},

submitHandler: function(form) {

form.submit();

}

});

Step 4:

The below code use to process the form data with validation. If validation gets matched means, it will submit the form data to the server for store the values into database using a $.post() method. Here we can use $.ajax() method also to perform form processing with database and front-end.

$(document).on('click', '.btn-submit', function(ev){
	ev.preventDefault();
	var btn_button = $(this);
	if($("#hl_form").valid() == true){
		var data = $("#hl_form").serialize();
		btn_button.html(' <i class="fa fa fa-spinner fa-spin"></i> Processing...');
		btn_button.attr("disabled",true);
		$.post('save_details.php', data, function(data,status){
			console.log("Data: " + data + "\nStatus: " + status);
			if( data == "1"){
				//alert("Data: " + data + "\nStatus: " + status);
				$(".alert-danger").hide();
				$(".alert-success").fadeIn(800);
				btn_button.html('<i class="fa fa fa-check-circle"></i> Done');
				setTimeout(function(){  location.reload(); }, 2000);
			}
			else{
				//alert("Data: " + data + "\nStatus: " + status);
				$(".alert-success").hide();
				$(".alert-danger").fadeIn(800);
				btn_button.html('Submit').attr("disabled",false);
			}
		});
	}
});

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

$(document).on('click', '.btn-submit', function(ev){

ev.preventDefault();

var btn_button = $(this);

if($("#hl_form").valid() == true){

var data = $("#hl_form").serialize();

btn_button.html(' <i class="fa fa fa-spinner fa-spin"></i> Processing...');

btn_button.attr("disabled",true);

$.post('save_details.php', data, function(data,status){

console.log("Data: " + data + "\nStatus: " + status);

if( data == "1"){

//alert("Data: " + data + "\nStatus: " + status);

$(".alert-danger").hide();

$(".alert-success").fadeIn(800);

btn_button.html('<i class="fa fa fa-check-circle"></i> Done');

setTimeout(function(){ location.reload(); }, 2000);

}

else{

//alert("Data: " + data + "\nStatus: " + status);

$(".alert-success").hide();

$(".alert-danger").fadeIn(800);

btn_button.html('Submit').attr("disabled",false);

}

});

}

});

and PHP Store procedure,

require_once('connect.php');

$form_name = $_POST['form_name'];

$created_at = $updated_at = date("d/m/Y");
$created_by = $updated_by = 0;
$updated_addon_query = " updated_at='$updated_at', updated_by='$updated_by' ";

if($form_name == 'add_user'){
	$full_name = mysql_real_escape_string(trim($_POST['full_name']));
	$username = mysql_real_escape_string(trim($_POST['username']));
	$password = md5($_POST['password']);
	$contact_no = mysql_real_escape_string(trim($_POST['contact_no']));
	$email = mysql_real_escape_string(trim($_POST['email']));
	$user_role = mysql_real_escape_string(trim($_POST['user_role']));
	
	$query = "insert into tv_users(username,password,full_name,email,contact_no,role,created_at,created_by)
			  values('$username','$password','$full_name','$email','$contact_no','$user_role','$created_at','$created_by')";
	$result = mysql_query($query) or die(mysql_error());
	if($result)
		echo "1";
	else
		echo "0";
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

require_once('connect.php');

$form_name = $_POST['form_name'];

$created_at = $updated_at = date("d/m/Y");

$created_by = $updated_by = 0;

$updated_addon_query = " updated_at='$updated_at', updated_by='$updated_by' ";

if($form_name == 'add_user'){

$full_name = mysql_real_escape_string(trim($_POST['full_name']));

$username = mysql_real_escape_string(trim($_POST['username']));

$password = md5($_POST['password']);

$contact_no = mysql_real_escape_string(trim($_POST['contact_no']));

$email = mysql_real_escape_string(trim($_POST['email']));

$user_role = mysql_real_escape_string(trim($_POST['user_role']));

$query = "insert into tv_users(username,password,full_name,email,contact_no,role,created_at,created_by)

values('$username','$password','$full_name','$email','$contact_no','$user_role','$created_at','$created_by')";

$result = mysql_query($query) or die(mysql_error());

if($result)

echo "1";

else

echo "0";

}

Learn Infinity

Learn Infinity is the most famous Programming & Web Development blog. Our principal is to provide the best online tutorial on web development. We execute the best tutorials for web experts this will help developers, programmers, freelancers and proving free resource you can download or preview the tutorials.

Leave a Reply Cancel reply

Back to top