Expert of PHP: Add Remove Input Fields Dynamically using jQuery

Dynamically adding input fields are very helpful when working with a form. They are very good when you need to get multiple values of same field.

For example add education, add experience or add skills etc.

In these type of cases, we need multiple input fields. We can easily add and remove input fields dynamically using jQuery.

In this tutorial, i will show you how to add or remove input fields dynamically using jQuery, i will also show that how to get multiple values of these type of input fields using PHP.

After getting values of this input array, you can insert these values into database or you can perform any other operations on them. This is very useful script for adding and removing input fields dynamically using jQuery.

In this tutorial i am doing the following:

Add remove input fields dynamically using jQuery
Get multiple values of input array using PHP

1. Add remove input fields dynamically using jQuery

First we will need to create HTML form with the input field.

HTML

1

2

3

4

5

6

7

8

<?php echo $array_values; ?>

<form name="FormData" method="post" action="" >

<div class="wrapper">

<div><input type="text" name="input_array_name[]" placeholder="Input Text Here" /></div>

</div>

<p><button class="add_fields">Add More Fields</button></p>

<input type="submit" value="Submit" />

</form>

The above code will create a simple HTML form, you may noticed that i also placed $array_values; before form, this is a PHP variable which will show the output of all input fields values. You do not need to display it, you can simply store these values in your database.

jQuery Library

1

2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

We will need to add jQuery library, include jQuery library before the following jQuery script.

jQuery Script

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

<script>

//Add Input Fields

$(document).ready(function() {

    var max_fields = 10; //Maximum allowed input fields 

    var wrapper    = $(".wrapper"); //Input fields wrapper

    var add_button = $(".add_fields"); //Add button class or ID

    var x = 1; //Initial input field is set to 1

 //When user click on add input button

 $(add_button).click(function(e){

        e.preventDefault();

 //Check maximum allowed input fields

        if(x < max_fields){ 

            x++; //input field increment

 //add input field

            $(wrapper).append('<div><input type="text" name="input_array_name[]" placeholder="Input Text Here" /> <a href="javascript:void(0);" class="remove_field">Remove</a></div>');

        }

    });

    //when user click on remove button

    $(wrapper).on("click",".remove_field", function(e){ 

        e.preventDefault();

 $(this).parent('div').remove(); //remove inout field

 x--; //inout field decrement

    })

});

</script>

The above jQuery script is handling the add and remove functionality of input field.

The max_fields variable define the limit to add maximum number of input fields.

The wrapper is the parent div of all input fields and it is used to select the parent div of input field.

The add_button variable selects the button element.

The x variable is used to define the initial counter, it will also increase or decrease by clicking the add or remove button to count the input fields.

When user click on Add More Fields button, it will check the maximum number of input fields to be added, if counter variable x is less than max_fields, then it will append new input field and remove link button into its parent div which is wrapper and counter of input field will be incremented.

Similarly when user click on Remove button the relevant div of that input field is removed and counter of input field will be decremented.

2. Get multiple values of input array using PHP

To get the values of these input fields array, we will use PHP. Add the following PHP script in the header of your page before starting the <html> tag.

1

2

3

4

5

6

7

8

9

<?php

$array_values="";

if (isset($_POST["input_array_name"]) && is_array($_POST["input_array_name"])){ 

    $input_array_name = array_filter($_POST["input_array_name"]); 

    foreach($input_array_name as $field_value){

        $array_values .= $field_value."<br />";

    }

}

?>

Simple we are checking that $_POST["input_array_name"] is set and is it array, if it is true it will then passed into array_filter($_POST["input_array_name"]); because it may be possible that use just add new field but do not enter value then this function will remove blank array value and provide you only filled array values. This is important when you are storing values in database because we do not want to waste our database table field with empty space.

After that i am storing all array values into variable $array_values which will display the output. We already print this with our HTML form.

To insert these values into database, run your MySqli query in foreach() loop where i stored them in variable. You will also need to create a database connection and table before inserting. You can learn more about how to insert, view, edit and delete records from database using php and mysqli.

i have tried to explain each and every single step clearly, it you still have any query, kindly leave it in the below comment section. I will try to respond each and every query.

If you found this tutorial helpful, share it with your friends and developers group.

Expert of PHP

Thursday, July 25, 2019

Add Remove Input Fields Dynamically using jQuery

1. Add remove input fields dynamically using jQuery

HTML

jQuery Library

jQuery Script

2. Get multiple values of input array using PHP

No comments:

Post a Comment