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.

Create the widget :

To create widget, there is a small code or you can say that a structure of code that will create widget. This code contains class and functions, this class extents Wp_Widget. I will explain all code step by step. lets take a look on this widget structure.

class Profile_Widget extends WP_Widget {

   public function __construct() {
        // Constructor
    }

    public function form($instance) {
        // This function show's form / form fields to get data in admin widget area to show on front end.
    }

    public function update($new_instance, $old_instance) {
        // This function Updating widget values/data replacing old instances with new instances
    }

    public function widget($args, $instance) {
        // This function show's output of this widget.
    }

}
// end class

// init the widget - to run
add_action('widgets_init', 
            create_function('', 'return register_widget("Profile_Widget");'));

to show this form proper i have added some css so you can easily get css in this function. you can see i have added some jquery code, this jquery code is to add user profile image from wordpress media uploader. In this media uploader you can add image directly from your computer or specific url from another site or from you wordpress media. To see this form function output and media uploader check below screenshots :

Output :

Conclusion :

As you can see, to make widget is not complex. we made a simple widget to show some information of author. In this tutorial we have coverd widget and some extra feature of wordpress that is media uploader. In future posts, we will explain this media uploader in more details. so stay connected with my blog to get usefull stuff in simple manner, and i will be more happy to get some feedback from you in comment section, and also share this post if you like and if it is usefull for others. Thanks.

<!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>
Dynamic Fields Advance

Leave a Reply

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