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> <link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <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); } ?> |