Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Add & Remove Multiple Dynamic Fields Using JQuery in PHP Application - Easy Way to Do It

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2
    • 0
    • 645
    Comment on it

    Sometimes you need to adding dynamic fields in a form as per client requirement. The dynamic field is new input field which will be created whenever we click + button in our script. Here, in this tutorial, I have provided an easy way to add dynamic field using JQuery. I have created a script where you can add and remove multiple fields.

     

     

    Let's suppose, you want to add 5 field dynamically. For that put maxfield variable value equal to 5.
     

    You can also add more fields as per need. Lets see how can we do it.

     

    JavaScript code:

    First step is to include the jQuery library.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function(){
        var maxField = 5;
        var addButton = $('.add_button');
        var wrapper = $('.field_wrapper');
        var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">-</a></div>';
        var x = 1;
        $(addButton).click(function(){
            if(x < maxField){
                x++;
                $(wrapper).append(fieldHTML);
            }
        });
        $(wrapper).on('click', '.remove_button', function(e){
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        });
    });
    </script>

     

    Code Explanation:

    In the above code, maxField variable is set to 5 & x < maxField will check maximum number of input fields.
    If x is less than maxField & add button (+) is clicked, then new input field will be append to the parent div & x will be incremented.
    If remove button (-) is clicked then input field will be removed & x will be decremented.

     

    HTML Code:

    <div class="field_wrapper">
        <div>
            <input type="text" name="field_name[]" value=""/>
            <a href="javascript:void(0);" class="add_button" title="Add field">+</a>
        </div>
    </div>
    
    


    PHP code to get these fields value in your page.

    <?php
    print '<pre>';
    print_r($_REQUEST['field_name']);
    print '</pre>';
    //output
    Array
    (
        [0] => value1
        [1] => value2
        [2] => value3
        [3] => value4
    )
    ?>

     

    Add & Remove Multiple Dynamic Fields Using JQuery in PHP Application - Easy Way to Do It

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: