1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 </head>
8 <body>
9 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10 <script>
11 $(document).ready(function() {
12 var max_fields = 10;
13 var wrapper = $(".container1");
14 var add_button = $(".add_form_field");
15
16 var x = 1;
17 $(add_button).click(function(e) {
18 e.preventDefault();
19 if (x < max_fields) {
20 x++;
21 $(wrapper).append('<div><input type="text" name="array[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
22 } else {
23 alert('You Reached the limits')
24 }
25 });
26
27 $(wrapper).on("click", ".delete", function(e) {
28 e.preventDefault();
29 $(this).parent('div').remove();
30 x--;
31 })
32 });
33 </script>
34 <?php
35 $a=$_POST['array'];
36 if ($a) {
37 ?>
38 <pre>
39<?=json_encode($a);?>
40</pre>
41 <? die; } ?>
42 <form action="?" method="POST">
43 <div class="container1">
44 <button class="add_form_field">Add New Field
45 <span style="font-size:16px; font-weight:bold;">+ </span>
46 </button><br>
47 <input type="text" name="array[]"><br>
48 </div>
49 <input type="submit" name="submit">
50 </form>
51 </body>
52</html>