article

Thursday, December 5, 2019

Create a Progress Bar Data Insert using PHP Mysqli bootstrap and Jquery Ajax

Create a Progress Bar Data Insert using PHP Mysqli bootstrap and Jquery 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
 <head>
  <title>Create a Progress Bar Data Insert using PHP Mysqli bootstrap and Jquery Ajax</title> 
<script>
 $(document).ready(function(){
 $('#sample_form').on('submit', function(event){
   event.preventDefault();
   var count_error = 0;
 
   if($('#username').val() == '')
   {
    $('#first_name_error').text('User Name is required');
    count_error++;
   }
   else
   {
    $('#first_name_error').text('');
   }
 
   if($('#useremail').val() == '')
   {
    $('#last_name_error').text('Email is required');
    count_error++;
   }
   else
   {
    $('#last_name_error').text('');
   }
 
   if(count_error == 0)
   {
    $.ajax({
   url:"ajax_progressbar.php",
   method:"POST",
   data:$(this).serialize(),
   beforeSend:function()
   {
    $('#save').attr('disabled', 'disabled');
    $('#process').css('display', 'block');
   },
   success:function(data)
   {
    var percentage = 0;
 
    var timer = setInterval(function(){
     percentage = percentage + 20;
     progress_bar_process(percentage, timer,data);
    }, 1000);
   }
  })
   }
   else
   {
    return false;
   }
    
  });
   
  function progress_bar_process(percentage, timer,data)
  {
 $('.progress-bar').css('width', percentage + '%');
 if(percentage > 100)
 {
  clearInterval(timer);
  $('#sample_form')[0].reset();
  $('#process').css('display', 'none');
  $('.progress-bar').css('width', '0%');
  $('#save').attr('disabled', false);
  $('#success_message').html(data);
  setTimeout(function(){
   $('#success_message').html('');
  }, 5000);
 }
  }
   
 });
</script>
 </head>
 <body>
  <br />
  <br />
  <div class="container">
   <h1 align="center">Create a Progress Bar Data Insert using PHP Mysqli bootstrap and Jquery Ajax</h1>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Registration</h3>
    </div>
      <div class="panel-body">
       <span id="success_message"></span>
       <form method="post" id="sample_form">
     <div class="form-group">
        <label>User Name</label>
         <input type="text" name="username" id="username" class="form-control" />
         <span id="first_name_error" class="text-danger"></span>
        </div>
  <div class="form-group">
         <label>Email</label>
         <input type="text" name="useremail" id="useremail" class="form-control" />
         <span id="last_name_error" class="text-danger"></span>
        </div>
  <div class="form-group" align="center">
         <input type="submit" name="save" id="save" class="btn btn-info" value="Save" />
        </div>
       </form>
       <div class="form-group" id="process" style="display:none;">
        <div class="progress">
       <div class="progress-bar progress-bar-striped active bg-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style=""></div>
      </div>
       </div>
      </div>
     </div>
  </div>
 </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//ajax_progressbar.php
<?php
include"dbcon.php";
if(isset($_POST["username"]))
{
  $username  = $_POST["username"];
  $useremail  = $_POST["useremail"];
  $sql = "INSERT INTO tbl_user (username, useremail) VALUES ('".$username."','".$useremail."')";
    if ($conn->query($sql) === TRUE) {
     echo "<div class='alert alert-success'>New record created successfully</div>";
     $conn->close();
    } else {
    echo "Error: " . $sql . "<br>" . $conn->error."";
    }
}
?>
1
2
3
4
5
6
7
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

Related Post