Dynamically Add Remove input Fields with jQuery

Jquery is an amazing framework of javascript. Using this framework we can manage our webpage behavior as we want. Today we look for one of the example of dynamically add/remove input fields by jquery. We start with one input field and let user add more fields.

 

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Fields Advance</title>
<!-- custom-code -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <!-- Content Header (Page header) -->

    <!-- Main content -->
    <section class="content" style="margin-top: 50px;">
        <div class="box box-danger">
            <!-- /.box-header -->
            <!-- form start -->
            <form id="add_poll_form" class="form-horizontal" method="POST" enctype="multipart/form-data" > 
                <div class="box-body">
                    <div class="col-sm-10">
                        <div id='option_clone1' class="form-group option_clone" style="display: none;">
                            <label class="col-sm-2 label_option" id="label_option1">OPTION</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control value1" name="options_value[]" id="options_value1" placeholder="Enter Option">
                            </div>
                            <div class="col-sm-1">
                                <a href="#" class="btn btn-warning close_option" id="close1" data-dismiss="alert" aria-label="close" data-id="option_clone1">
                                    <span class="glyphicon glyphicon-remove"></span> 
                                </a>
                            </div>
                        </div>
                        <div id='option_clone2' class="form-group option_clone" style="">
                            <label class="col-sm-2 label_option" id="label_option2">OPTION</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control value1" name="options_value[]" id="options_value2" placeholder="Enter Option">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2 add_option" style="margin:0;padding:0;">
                        <button class="btn btn-info col-sm-12" type="button">
                            <i class="fa fa-plus-circle"></i>
                            Add Option
                        </button>
                    </div>
                    <div class="col-sm-12 box-footer" style="text-align:center;">
                        <button type="submit" class="btn btn-success" name="submit" id="add_poll">Submit</button>
                    </div>
                    <!-- /.box-footer -->
                </div> <!-- Your Page Content Here -->
            </form>
    </section>
    <!-- /.content -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>

newhd = 2;
    $(document).on('click', '.add_option', function() {
        newhd++;
        $last = $('.option_clone').last();
        hd_Elem = $('#option_clone' + 1).clone().attr('id', 'option_clone' + newhd).fadeIn('slow');
        hd_Elem.find('.value1').attr('id', 'option_value' + newhd).attr('name', 'options_value[]');
        hd_Elem.find('.label_option').attr('id', 'label_option' + newhd).text('OPTION')
        hd_Elem.find('.close_option').attr('id', 'close' + newhd).attr('data-id', 'option_clone' + newhd);
        $($last).after(hd_Elem);
        $('#option_clone' + newhd).find('input:text').val('');
    });

    $(document).on('click', '.close_option', function() {
        var id = $(this).attr('data-id');
        $('#' + id).fadeOut(300, function() { $(this).remove(); });
        // $('#' + id).remove();
    });
</script>
</body>
</html>

 Demo

 

Leave a Reply

Your email address will not be published. Required fields are marked *