Dynamically Add and Remove Form Item using jQuery clone() Method Tutorial

Submitted by oretnom23 on Wednesday, February 2, 2022 - 16:16.

In this article, I will be discussing about how to create an Add and Remove Form Item Feature in web-application using jQuery's clone() method. This kind of feature is commonly applied to a project which has a process of saving multiple data at once in the database. There are lots of ideas and techniques you can create to achieve this feature with the help of jQuery, but I found this solution more simple and easiest in my experience.

Below, I have provided a simple PHP Web Application which contains a form for Contact Directories which allows the users to add multiple set of input dynamically. The form items/sets contain the fields that are needed and each of these items has a 'remove button' using an 'x' icon button at the upper-right. The remove button allows the user to remove the item. It has also contained some features that are commonly included in submitting a form such as preventing submitting the form when no item is listed and if required fields are empty. The application only displays the submitted data and there is no database included.

Getting Started

To run the application you must have a local server such as XAMPP in order to run PHP Scripts in your device.

Using XAMPP:

Download and Install XAMPP. After that, open the XAMPP's Control Panel and start the Apache. Then create a new directory in your xampp/htdocs directory.

Libraries/Plugin used: (Download and compile the ff in your source code directory)

Creating Default Page Interface

The script below is the code of our default page which is the index.php. This file contains the contact form.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Cloning Element</title>
  9.     <link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
  10.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  11.     <script src="./js/jquery-3.6.0.min.js"></script>
  12.     <script src="./js/bootstrap.min.js"></script>
  13.     <script src="./js/script.js"></script>
  14.     <style>
  15.         :root {
  16.             --bs-success-rgb: 71, 222, 152 !important;
  17.         }
  18.  
  19.         html,
  20.         body {
  21.             height: 100%;
  22.             width: 100%;
  23.             font-family: Apple Chancery, cursive;
  24.         }
  25.  
  26.         .btn-info.text-light:hover,
  27.         .btn-info.text-light:focus {
  28.             background: #000;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body class="bg-light">
  34.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient" id="topNavBar">
  35.         <div class="container">
  36.             <a class="navbar-brand" href="https://sourcecodester.com">
  37.             Sourcecodester
  38.             </a>
  39.  
  40.             <div>
  41.                 <b class="text-light">Cloning Element</b>
  42.             </div>
  43.         </div>
  44.     </nav>
  45.     <div class="container py-5" id="page-container">
  46.         <div class="card rounded-0 shadow">
  47.             <div class="card-header">
  48.                 <h4 class="card-title"> Simple Contact Information Form</h4>
  49.             </div>
  50.             <div class="card-body">
  51.                 <form action="submitted_data.php" method="POST" id="contact-form">
  52.                     <div class="row align-items-center" id="item-card">
  53.                         <div class="col-lg-4 col-md-6 col-sm-12 item mb-3 h-100">
  54.                             <div class="card rounded-0 shadow h-100">
  55.                                 <div class="card-body h-100">
  56.                                     <div class="container-fluid">
  57.                                         <div class="w-100 text-end">
  58.                                             <button class="btn btn-outline-danger btn-sm rounded-0 remove-item" type="button"><i class="fa fa-times"></i></button>
  59.                                         </div>
  60.                                         <div class="form-group">
  61.                                             <label class="control-label text-muted">Name</label>
  62.                                             <input type="text" name="name[]" class="form-control form-control-sm rounded-0" required>
  63.                                         </div>
  64.                                         <div class="form-group">
  65.                                             <label class="control-label text-muted">Email</label>
  66.                                             <input type="email" name="email[]" class="form-control form-control-sm rounded-0" required>
  67.                                         </div>
  68.                                         <div class="form-group">
  69.                                             <label class="control-label text-muted">Contact #</label>
  70.                                             <input type="text" name="contact[]" class="form-control form-control-sm rounded-0" required>
  71.                                         </div>
  72.                                         <div class="form-group">
  73.                                             <label class="control-label text-muted">Address</label>
  74.                                            <textarea name="address[]" rows="3" style="resize:none" class="form-control form-control-sm rounded-0" required></textarea>
  75.                                         </div>
  76.                                     </div>
  77.                                 </div>
  78.                             </div>
  79.                         </div>
  80.                         <div class="col-lg-4 col-md-6 col-sm-12 h-100" id="new_item">
  81.                             <div class="card rounded-0 shadow h-100">
  82.                                 <div class="card-body h-100">
  83.                                     <div class="container-fluid h-100">
  84.                                         <a href="javascript:void(0)" id="new-item-btn" class="text-dark fw-bolder fs-1 h-100 w-100 text-decoration-none">
  85.                                             <div class="d-flex w-100 h-100 align-items-center justify-content-center">
  86.                                                 <i class="fa fa-plus"></i>
  87.                                             </div>
  88.                                         </a>
  89.                                     </div>
  90.                                 </div>
  91.                             </div>
  92.                         </div>
  93.                     </div>
  94.                     <div class="row justify-content-center">
  95.                         <button class="btn btn-primary bg-gradient col-md-4 btn-large rounded-pill" type="button" id="submit-form">Submit Data</button>
  96.                     </div>
  97.                 </form>
  98.             </div>
  99.         </div>
  100.     </div>
  101. </body>
  102. <!--The ELement to be Cloned -->
  103. <noscript id="el-clone">
  104. <div class="col-lg-4 col-md-6 col-sm-12 item mb-3 h-100">
  105.     <div class="card rounded-0 shadow h-100">
  106.         <div class="card-body h-100">
  107.             <div class="container-fluid">
  108.                 <div class="w-100 text-end">
  109.                     <button class="btn btn-outline-danger btn-sm rounded-0 remove-item" type="button"><i class="fa fa-times"></i></button>
  110.                 </div>
  111.                 <div class="form-group">
  112.                     <label class="control-label text-muted">Name</label>
  113.                     <input type="text" name="name[]" class="form-control form-control-sm rounded-0" required>
  114.                 </div>
  115.                 <div class="form-group">
  116.                     <label class="control-label text-muted">Email</label>
  117.                     <input type="email" name="email[]" class="form-control form-control-sm rounded-0" required>
  118.                 </div>
  119.                 <div class="form-group">
  120.                     <label class="control-label text-muted">Contact #</label>
  121.                     <input type="text" name="contact[]" class="form-control form-control-sm rounded-0" required>
  122.                 </div>
  123.                 <div class="form-group">
  124.                     <label class="control-label text-muted">Address</label>
  125.                     <textarea name="address[]" rows="3" style="resize:none" class="form-control form-control-sm rounded-0" required></textarea>
  126.                 </div>
  127.             </div>
  128.         </div>
  129.     </div>
  130. </div>
  131. </noscript>
  132. <!--The ELement to be Cloned -->
  133.  
  134. </html>

Creating Submitted Data Display Page

This is the page where the page will be redirected when the form is submitted. It contains a table that list all the contact information submitted. This page can be only browse when the form is submitted. Save the scrip below as submitted_data.php.

  1. <?php 
  2. // Checks if There is a POST Data
  3. if($_SERVER['REQUEST_METHOD'] != 'POST'){
  4.     echo '<script> alert("No data has been submitted."); location.replace("./")</script>';
  5. }else{
  6.     extract($_POST);
  7. }
  8. ?>
  9. <!DOCTYPE html>
  10. <html lang="en">
  11.  
  12. <head>
  13.     <meta charset="UTF-8">
  14.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  15.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16.     <title>Cloning Element</title>
  17.     <link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
  18.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  19.     <script src="./js/jquery-3.6.0.min.js"></script>
  20.     <script src="./js/bootstrap.min.js"></script>
  21.     <script src="./js/script.js"></script>
  22.     <style>
  23.          :root {
  24.             --bs-success-rgb: 71, 222, 152 !important;
  25.         }
  26.  
  27.         html,
  28.         body {
  29.             height: 100%;
  30.             width: 100%;
  31.             font-family: Apple Chancery, cursive;
  32.         }
  33.  
  34.         .btn-info.text-light:hover,
  35.         .btn-info.text-light:focus {
  36.             background: #000;
  37.         }
  38.     </style>
  39. </head>
  40.  
  41. <body class="bg-light">
  42.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient" id="topNavBar">
  43.         <div class="container">
  44.             <a class="navbar-brand" href="https://sourcecodester.com">
  45.             Sourcecodester
  46.             </a>
  47.  
  48.             <div>
  49.                 <b class="text-light">Cloning Element</b>
  50.             </div>
  51.         </div>
  52.     </nav>
  53.     <div class="container py-5" id="page-container">
  54.         <div class="card rounded-0 shadow">
  55.             <div class="card-header">
  56.                 <div class="d-flex w-100">
  57.                     <h4 class="card-title col-8"> Submitted Data</h4>
  58.                     <div class="col-4 text-end">
  59.                         <a class="btn btn-light rounded-0 border btn-sm" href="./"><i class="fa fa-angle-left"></i> Back</a>
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.             <div class="card-body">
  64.                 <div class="container-fluid">
  65.                     <table class="table table-stripped table-bordered">
  66.                         <colgroup>
  67.                             <col width="5%">
  68.                             <col width="25%">
  69.                             <col width="15%">
  70.                             <col width="15%">
  71.                             <col width="40%">
  72.                         </colgroup>
  73.                         <thead>
  74.                             <tr class="bg-primary bg-gradient text-light">
  75.                                 <th class="text-center">#</th>
  76.                                 <th class="text-center">Name</th>
  77.                                 <th class="text-center">Email</th>
  78.                                 <th class="text-center">Contact #</th>
  79.                                 <th class="text-center">Address</th>
  80.                             </tr>
  81.                         </thead>
  82.                         <tbody>
  83.                             <?php 
  84.                                 $i = 1;
  85.                                 // Looping all the submitted data
  86.                                 foreach($name as $k => $v):
  87.                             ?>
  88.                                 <tr>
  89.                                     <td class="px-2 py-1 text-center"><?= $i++; ?></td>
  90.                                     <td class="px-2 py-1"><?= $v ?></td>
  91.                                     <td class="px-2 py-1"><?= $email[$k] ?></td>
  92.                                     <td class="px-2 py-1"><?= $contact[$k] ?></td>
  93.                                     <td class="px-2 py-1"><?= $address[$k] ?></td>
  94.                                 </tr>
  95.                             <?php endforeach; ?>
  96.                         </tbody>
  97.                     </table>
  98.                 </div>
  99.             </div>
  100.         </div>
  101.     </div>
  102. </body>
  103. </html>

Creating Main Function

The script below is a JavaScript file that contains our jQuery custom functions and event codes. The script includes the codes of cloning an item/set to be added at the form, removing the item/set from the form, and the form check process before submitting the data. Save the file as script.js and in my case, my CSS and JS files are organized by directory which makes this file located inside the JS directory.

  1. // removing the contact Item
  2. function remove_item(_this) {
  3.     _this.closest('.item').remove()
  4. }
  5. $(function() {
  6.     // Focuses the first Input of Form
  7.     $('input[name="name[]"]').first().focus()
  8.  
  9.     // Event Lister of Form Item Remove Button when Click
  10.     $('.remove-item').click(function() {
  11.         remove_item($(this))
  12.     })
  13.  
  14.     // Adds New Form Item when Add Item has been Clicked
  15.     $('#new-item-btn').click(function() {
  16.         // cloning the item card from noscript element
  17.         var item = $($('noscript#el-clone').html()).clone()
  18.  
  19.         // Inserting the new item befor 'Add Item' Card
  20.         $('#new_item').before(item)
  21.  
  22.         // Focuses the first input in the added item card
  23.         item.find('input[name="name[]"]').focus()
  24.  
  25.         // Event Lister of added item card Remove Button when Click
  26.         item.find('.remove-item').click(function() {
  27.             remove_item($(this))
  28.         })
  29.     })
  30.  
  31.     // Event when clicking the Submit Button
  32.     $('#submit-form').click(function() {
  33.         var form = $('#contact-form')
  34.         $(this).attr('disabled', true)
  35.             .text("Submitting Data ...")
  36.         if ($('#item-card .item').length <= 0) {
  37.             // Checks if there is atleast 1 Item Card
  38.             alert("No Contact Item Added.")
  39.             $(this).attr('disabled', false)
  40.                 .text("Submit Data")
  41.             return false;
  42.         } else if (form[0].checkValidity() == false) {
  43.             // Checks if All input fields are filled
  44.             form[0].reportValidity()
  45.             $(this).attr('disabled', false)
  46.                 .text("Submit Data")
  47.             return false;
  48.         } else {
  49.             // Form Submission
  50.             form.submit()
  51.         }
  52.     })
  53. })

There you go. You can now test the application on your end and check if it working properly and achieves the goal I stated above. If there's an error occurred on your end, review your codes with the codes I provided above. You can also download the source code I created for this tutorial. The download link/button is located after this article.

That ends this tutorial. I hope this will help you with what you are looking for and you'll find it useful with your current or future projects.

Explore more on this website for more Tutorials and Free Source Codes.

Related Links:

Happy Coding :)

Tags

Add new comment

About text formats
  • 1440 views