Bootstrap Wizard Registration using PHP/MySQL

Submitted by: 
Language: 
Visitors have accessed this post 1926 times.

In this tutorial, we are going to learn on Bootstrap Wizard Registration using PHP/MySQL. These form field in registration is separated into a group. We have three steps to complete the registration. And a user can navigate using our previous and next button at every step.

Wizard Registration - HTML

This source code displays all three steps. This is for wizard registration form field.

  1. <div class="message"><?php if(isset($message)) echo $message; ?></div>
  2. <ul id="registration-step">
  3. <li id="account" class="highlight">Account</li>
  4. <li id="password">Credentials</li>
  5. <li id="general">General</li>
  6. </ul>
  7. <form name="frmRegistration" id="registration-form" method="post">
  8.  
  9. <div id="account-field">
  10. <label>Email</label><span id="email-error" class="registration-error"></span>
  11. <div><input type="text" name="email" autofocus="autofocus" id="email" class="demoInputBox" /></div>
  12. </div>
  13.  
  14. <div id="password-field" style="display:none;">
  15. <label>Enter Password</label><span id="password-error" class="registration-error"></span>
  16. <div><input type="password" name="password" id="user-password" autofocus="autofocus" class="demoInputBox" /></div>
  17. <label>Re-enter Password</label><span id="confirm-password-error" class="registration-error"></span>
  18. <div><input type="password" name="confirm-password" id="confirm-password" class="demoInputBox" /></div>
  19. </div>
  20.  
  21. <div id="general-field" style="display:none;">
  22. <label>Display Name</label>
  23. <div><input type="text" name="display-name" autofocus="autofocus" id="display-name" class="demoInputBox"/></div>
  24. <label>Gender</label>
  25. <div>
  26. <select name="gender" id="gender" class="demoInputBox">
  27. <option value="female">Female</option>
  28. <option value="male">Male</option>
  29. </select></div>
  30. </div>
  31.  
  32. <div>
  33. <input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;">
  34. <input class="btnAction" type="button" name="next" id="next" value="Next" >
  35. <input class="btnAction" type="submit" name="finish" id="finish" value="Finish" style="display:none;">
  36. </div>
  37.  
  38. </form>

jQuery Script

This script will help the user to navigate the wizard registration for the previous and next button.

  1. <script src="js/code_js.js"></script>
  2.  
  3. <script>
  4. function validate() {
  5. var output = true;
  6. $(".registration-error").html('');
  7. if($("#account-field").css('display') != 'none') {
  8. if(!($("#email").val())) {
  9. output = false;
  10. $("#email-error").html("required");
  11. }
  12. if(!$("#email").val().match(/^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/)) {
  13. $("#email-error").html("invalid");
  14. output = false;
  15. }
  16. }
  17.  
  18. if($("#password-field").css('display') != 'none') {
  19. if(!($("#user-password").val())) {
  20. output = false;
  21. $("#password-error").html("required");
  22. }
  23. if(!($("#confirm-password").val())) {
  24. output = false;
  25. $("#confirm-password-error").html("Not Matched");
  26. }
  27. if($("#user-password").val() != $("#confirm-password").val()) {
  28. output = false;
  29. $("#confirm-password-error").html("Not Matched");
  30. }
  31. }
  32. return output;
  33. }
  34. $(document).ready(function() {
  35. $("#next").click(function(){
  36. var output = validate();
  37. if(output) {
  38. var current = $(".highlight");
  39. var next = $(".highlight").next("li");
  40. if(next.length>0) {
  41. $("#"+current.attr("id")+"-field").hide();
  42. $("#"+next.attr("id")+"-field").show();
  43. $("#back").show();
  44. $("#finish").hide();
  45. $(".highlight").removeClass("highlight");
  46. next.addClass("highlight");
  47. if($(".highlight").attr("id") == $("li").last().attr("id")) {
  48. $("#next").hide();
  49. $("#finish").show();
  50. }
  51. }
  52. }
  53. });
  54. $("#back").click(function(){
  55. var current = $(".highlight");
  56. var prev = $(".highlight").prev("li");
  57. if(prev.length>0) {
  58. $("#"+current.attr("id")+"-field").hide();
  59. $("#"+prev.attr("id")+"-field").show();
  60. $("#next").show();
  61. $("#finish").hide();
  62. $(".highlight").removeClass("highlight");
  63. prev.addClass("highlight");
  64. if($(".highlight").attr("id") == $("li").first().attr("id")) {
  65. $("#back").hide();
  66. }
  67. }
  68. });
  69. });
  70. </script>

Data Display

This code will display the data after the user saves into the database.

  1. <center>
  2. <table border="1" cellspacing="5" cellpadding="5" style="margin:15px;">
  3. <tr style="color:blue;">
  4.  
  5. <th>
  6. Display Name
  7. </th>
  8. <th>
  9. Email
  10. </th>
  11. <th>
  12. Gender
  13. </th>
  14. </tr>
  15. <?php
  16. $conn = mysql_connect("localhost","root","");
  17. mysql_select_db("applicant",$conn);
  18. $result= mysql_query("select * from users order by user_id DESC ") or die (mysql_error());
  19. while ($row= mysql_fetch_array ($result) ){
  20. $id=$row['user_id'];
  21. ?>
  22. <tr style="text-align:center; color:blue;">
  23. <td style="width:200px;">
  24. <?php echo $row['display_name']; ?>
  25. </td>
  26. <td style="width:200px; color:red;">
  27. <?php echo $row['email']; ?>
  28. </td>
  29. <td style="width:200px; color:blue;">
  30. <?php echo $row['gender']; ?>
  31. </td>
  32. </tr>
  33. <?php } ?>
  34. </table>
  35. </center>

Output

First, the user types their desired value in all field to finish the bootstrap wizard registration shown in the image below.

ResultResultResult

Then, the user hit the finish button to save all the data into the database. The output will shown like this.

Result

Hope that this simple tutorial that I created may help you to your future projects. Also, for the beginners who want to learn basic of coding in PHP/MySQL.

If you are interested in programming, we have an example of programs that may help you even just in small ways.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.