Add or remove input fields dynamically in PHP using jQuery
Today we’ll show you how to add or remove input fields dynamically in PHP using jQuery. Previously we have implemented the same type of the functionality to add or remove input fields dynamically in React.
In this article, we will see an example to add multiple fields with the remove button and how to get field value after form submission using PHP. Also we can remove the added fields by clicking on the remove link.
Steps to add or remove input fields dynamically
1. Create HTML form
Let’s create a HTML form with a single input field and Add More button.
1 2 3 4 5 6 7 8 9 | <form method="post"> <div class="wrapper"> <div class="input-box"> <input type="text" name="input_name[]"> <button class="btn add-btn">Add More</button> </div> </div> <input type="submit" class="btn" value="Submit" /> </form> |
Also use the following style to design the page.
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 | <style> body { font-family: arial; padding-left: 10px; } .input-box { margin: 15px 0; } .input-box input { padding: 5px 10px; border-radius: 2px; border: 1px solid #999; } .btn { cursor: pointer; padding: 5px 10px; border-radius: 2px; border: 1px solid #17a2b8; color: #fff; background-color: #17a2b8; } .btn:hover { background-color: #138496; border-color: #117a8b; } .btn:focus { outline: 0; } .input-box a { color: red; font-size: 13px; text-decoration: none; } .input-box a:hover { text-decoration: underline; } </style> |
2. Add jQuery library
We have to add the following jQuery library in the head section of the page.
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
3. Add jQuery script
Let’s write a code to add or remove elements from the DOM using jQuery.
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 | <script type="text/javascript"> $(document).ready(function () { // allowed maximum input fields var max_input = 5; // initialize the counter for textbox var x = 1; // handle click event on Add More button $('.add-btn').click(function (e) { e.preventDefault(); if (x < max_input) { // validate the condition x++; // increment the counter $('.wrapper').append(` <div class="input-box"> <input type="text" name="input_name[]"/> <a href="#" class="remove-lnk">Remove</a> </div> `); // add input field } }); // handle click event of the remove link $('.wrapper').on("click", ".remove-lnk", function (e) { e.preventDefault(); $(this).parent('div').remove(); // remove input field x--; // decrement the counter }) }); </script> |
In the above script, we have set a maximum limit of input fields that indicates the user can add maximum 5 input fields but you can change it as per your requirements.
When the user clicks on the Add More button then a new input field with remove link will be added until the count reaches maximum limit. Similarly when the user clicks on the Remove link, the relevant input field will be removed.
4. Get values using PHP
After the form submission, we will get the value of input fields in the type of the array like below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php if (isset($_POST["input_name"]) && is_array($_POST["input_name"])){ echo '<pre>'; print_r($_POST["input_name"]); echo '</pre>'; $input_name = $_POST["input_name"]; foreach($input_name as $field_value){ // your insert query goes here... } exit; } ?> |
We have also shown you the logic to loop through each item where you can insert it into the database table.
5. Output
Combine all codes together and see how it works.
index.php
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 | <?php if (isset($_POST["input_name"]) && is_array($_POST["input_name"])){ echo '<pre>'; print_r($_POST["input_name"]); echo '</pre>'; $input_name = $_POST["input_name"]; foreach($input_name as $field_value){ // your insert query goes here... } exit; } ?> <!DOCTYPE html> <html> <head> <title>Dynamically add or remove input fields - Clue Mediator</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body { font-family: arial; padding-left: 10px; } .input-box { margin: 15px 0; } .input-box input { padding: 5px 10px; border-radius: 2px; border: 1px solid #999; } .btn { cursor: pointer; padding: 5px 10px; border-radius: 2px; border: 1px solid #17a2b8; color: #fff; background-color: #17a2b8; } .btn:hover { background-color: #138496; border-color: #117a8b; } .btn:focus { outline: 0; } .input-box a { color: red; font-size: 13px; text-decoration: none; } .input-box a:hover { text-decoration: underline; } </style> </head> <body> <h4>Dynamically add or remove input fields - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h4> <form method="post"> <div class="wrapper"> <div class="input-box"> <input type="text" name="input_name[]"> <button class="btn add-btn">Add More</button> </div> </div> <input type="submit" class="btn" value="Submit" /> </form> <script type="text/javascript"> $(document).ready(function () { // allowed maximum input fields var max_input = 5; // initialize the counter for textbox var x = 1; // handle click event on Add More button $('.add-btn').click(function (e) { e.preventDefault(); if (x < max_input) { // validate the condition x++; // increment the counter $('.wrapper').append(` <div class="input-box"> <input type="text" name="input_name[]"/> <a href="#" class="remove-lnk">Remove</a> </div> `); // add input field } }); // handle click event of the remove link $('.wrapper').on("click", ".remove-lnk", function (e) { e.preventDefault(); $(this).parent('div').remove(); // remove input field x--; // decrement the counter }) }); </script> </body> </html> |
Check out the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
