Skip to main content

Creating a Simple Dynamic Input using PHP and jQuery

Language

In this tutorial, we will create a simple PHP web application that has a feature allowing the user to dynamically add inputs to the page to save the forms at once. We will be using the jQuery Plugin in order to meet our goal. Also, we will use the Bootstrap Framework to have a pleasant user interface.

So, let's get started...

Getting Started

Requirements
  • Download and Install the latest version if XAMPP
  • Open the XAMPP's Control Panel and start the "Apache" and "MySQL".
  • Prepare a text editor such as notepad++ and sublime text. Download and Install if necessary.
  • Download Bootstrap Framework
  • Download jQuery plugin
  • Compile the Plugins/Libraries in a single folder and move it into the XAMPP's htdocs directory.

Creating the Database

Go to the PHPMyAdmin and create a new database naming "db_dynamic". Then copy the code below and paste it into the SQL tab's Text field and click "Go" button.

  1. CREATE TABLE `person` (
  2. `firstname` varchar(30) NOT NULL,
  3. `lastname` varchar(30) NOT NULL
  4.  

Database Connection

Open your text editor and create a new file in your web app directory and save it as connect.php. Copy the script below to the file and save it.

  1. <?php
  2. $conn = new mysqli('localhost', 'root', '', 'db_dynamic');
  3. if($conn->connect_error){
  4. die("Fatal Error: Can't connec to database" . $conn->connect_error);
  5. }
  6. ?>

Creating the Interface

The below code is the default page when browsing our web application. This contains also the script for creating our dynamic inputs and display it into the interface. Save the file as index.php.

  1. <!DOCTYPE html>
  2. <html lang = "eng">
  3. <head>
  4. <meta charset = "UTF-8" />
  5. <link rel = "stylesheet" type = "text/css" href = "css/style.css" />
  6. <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
  7. </head>
  8. <body>
  9. <nav class = "navbar navbar-default navbar-fixed-top">
  10. <div class = "container-fluid">
  11. <a class = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
  12. </div>
  13. </nav>
  14. <br />
  15. <br />
  16. <br />
  17. <br />
  18. <center><h2>Simple dynamic input using jQuery/MySQLi</h2></center>
  19. <br />
  20. <br />
  21. <br />
  22. <div class = "row">
  23. <div class = "col-md-3">
  24. </div>
  25. <div class = "col-md-1" style = "margin-left:10px;" >
  26. <button class = "btn btn-success" id = "add"><span class = "glyphicon glyphicon-plus"></span> Add new Entry</button>
  27. <br />
  28. <br />
  29. </div>
  30. <form method = "POST" action = "save_data.php">
  31. <button class = "btn btn-primary" name = "submit" ><span class = "glyphicon glyphicon-save"></span> Submit</button>
  32. <div style = "margin-left:30px;" id = "input" class = "col-md-3">
  33. <div class = "well">
  34. <div class = "form-group">
  35. <label>Firstname</label>
  36. <input class = "form-control" type = "text" name = "firstname[]"/>
  37. </div>
  38. <div class = "form-group">
  39. <label>Lastname</label>
  40. <input class = "form-control" type = "text" name = "lastname[]"/>
  41. </div>
  42. </div>
  43. </div>
  44. </form>
  45. </div>
  46. </body>
  47. <script src = "js/jquery.js"></script>
  48. <script type = "text/javascript">
  49. $(document).ready(function(){
  50. $('#add').click(function(){
  51. $input = $('<div class = "well">'
  52. + '<div class = "form-group">'
  53. + '<label>Firstname</label>'
  54. + '<input class = "form-control" type = "text" name = "firstname[]" required = "required"/>'
  55. + '</div>'
  56. + '<div class = "form-group">'
  57. + '<label>Lastname</label>'
  58. + '<input class = "form-control" type = "text" name = "lastname[]" required = "required"/>'
  59. + '</div>');
  60. $input.fadeIn(1000).appendTo('#input');
  61. });
  62. });
  63. </script>
  64. </html>

The below code is the script fir the interface for our results page. This page displays the saved data in our database.

result.php
  1. <!DOCTYPE html>
  2. <html lang = "eng">
  3. <head>
  4. <meta charset = "UTF-8" />
  5. <link rel = "stylesheet" type = "text/css" href = "css/style.css" />
  6. <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
  7. </head>
  8. <body>
  9. <nav class = "navbar navbar-default navbar-fixed-top">
  10. <div class = "container-fluid">
  11. <a class = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
  12. </div>
  13. </nav>
  14. <br />
  15. <br />
  16. <br />
  17. <center><h2>How to create a dynamic input using jQuery/MySQLi</h2></center>
  18. <br />
  19. <br />
  20. <div class = "row">
  21. <div class = "col-md-3 ">
  22. </div>
  23. <div class = "col-md-6">
  24. <div>
  25. <center><a href = "index.php" class = "btn btn-success"><span class = "glyphicon glyphicon-log-out"></span> Back</a></center>
  26. <center><h3>Result</h3></center>
  27. <table class = "table table-bordered table-hover">
  28. <thead>
  29. <tr>
  30. <th>ID</th>
  31. <th>Firstname</th>
  32. <th>Lastname</th>
  33. </tr>
  34. </thead>
  35. <tbody>
  36. <?php
  37. require_once'connect.php';
  38. $query = $conn->query("SELECT * FROM `person` ORDER BY `id` ASC") or die(mysqli_error());
  39. while ($fetch = $query->fetch_array()){
  40. ?>
  41. <tr>
  42. <td><?php echo $fetch['id']?></td>
  43. <td><?php echo $fetch['firstname']?></td>
  44. <td><?php echo $fetch['lastname']?></td>
  45. </tr>
  46. <?php
  47. }
  48. ?>
  49. </tbody>
  50. </table>
  51. </div>
  52. <div>
  53. </div>
  54. </body>
  55. <script src = "js/jquery.js"></script>
  56. </html>

Saving the Data

The below codes is the scripts for saving the data to our database.

save_data.php
  1. <?php
  2. require_once 'connect.php';
  3. if(ISSET($_POST['submit'])){
  4. foreach($_POST['firstname'] as $key=>$value){
  5. $firstname = $value;
  6. $lastname = $_POST['lastname'][$key];
  7. $conn->query("INSERT INTO `person` VALUES('', '$firstname', '$lastname')") or die(mysqli_error());
  8. }
  9. header("location:result.php");
  10. }
  11. ?>

Demo

That's it! I hope this tutorial will help you with what you are looking for and for your future projects. Explore more on this website for more tutorials and free source codes.

Enjoy :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment