How to Add More Fields Using Jquery

How to Add More Fields Using Jquery

How to Add More Fields Using Jquery

0 Sales

Free

The complex field of input allows multiple values to be given in a process. It's very useful to receive multiple inputs in an HTML form for the same area. The features of the dynamic input fields can be implemented easily using jQuery. You can add multiple fields and quickly delete fields. In this tutorial, we'll teach you how to dynamically add or delete input fields or text boxes in a form using jQuery and use PHP to obtain multiple input fields.

 

The example code demonstrates how to generate fly input fields in a form and enter the value of the input field in the database. This script is very useful for adding multiple values in PHP to remove input fields. The jQuery will be used to simplify and control this feature. To add more fields dynamically using jQuery and PHP, the following functionalities will be implemented.

 

  • Use jQuery to add and remove dynamically input fields.

  • Use PHP to get multiple input fields.

JavaScript Code:

Include the jQuery library for adding and removing buttons by pressing case.

 

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


 

The following handle of JavaScript code adds functionality to remove the input field.

 

  • The function maxField specifies the maximum number of fields to be added.

  • The vector addButton selects the component of the add button.

  • The wrapper variable selects the input field parent element.

  • The fieldHTML function includes the new input field's HTML.

  • Once the Add button has been clicked, the maximum limit input fields will be checked. If the field counter (x) is less than maxField, the parent div (wrapper) field will be applied to the new input field HTML. It would also increase the field counter.

  • After clicking on the Remove key, the parent div of the remove button will be deleted. The counter of the field would also be decrement.

 

<script type="text/javascript">

$(document).ready(function(){

    var maxField = 10; //Input fields increment limitation

    var addButton = $('.add_button'); //Add button selector

    var wrapper = $('.field_wrapper'); //Input field wrapper

    var fieldHTML = '



'; //New input field html 


    var x = 1; //Initial field counter is 1

    

    //Once add button is clicked

    $(addButton).click(function(){

        //Check maximum number of input fields

        if(x < maxField){ 

            x++; //Increment field counter

            $(wrapper).append(fieldHTML); //Add field html

        }

    });

    

    //Once remove button is clicked

    $(wrapper).on('click', '.remove_button', function(e){

        e.preventDefault();

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

        x--; //Decrement field counter

    });

});

script>



 

HTML Code:

Initially, the Add button will display an input field. The duplicate input field will appear with the remove button when the add button is clicked.

<div class="field_wrapper">

    <div>

        <input type="text" name="field_name[]" value=""/>

        <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png"/>a>

    div>

div>

 

Get Multiple Values in PHP

After adding and uploading the various fields of the input form, the values can be extracted using PHP. You can use $POST in PHP to get multiple values as an array.

 

$field_values_array = $_POST['field_name'];


print_r($field_values_array);

//output

Array

(

    [0] => value1

    [1] => value2

    [2] => value3

    [3] => value4

)

?>


 

Using foreach loop to insert the values into the database or whatever you want after you have extracted the multiple input field values.

 

// Get multiple input field's value 

$field_values_array = $_POST['field_name'];


foreach($field_values_array as $value){

    // Your database query goes here

}

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : May 14, 2020

Updated Date : Feb 03, 2021

Ratings

Comments : 0

Downloads : 0