Build Dynamic Input With jQuery ~ Dumb Coder

JQuery is most popular javascript extension that have rich of javascript library, small size and fast process. JQuery make javascript common task become simpler because it’s have easy to use API to do such things like HTML manipulation, event handling, animation, and ajax. With the help of jQuery we can simplified the code writing and focused on the main goal.

To build dynamic input, we must capable to manipulate the DOM / HTML document. There were two task that occur after user event, adding a new input and remove existing input. In this tutorial, each task triggered by clicking event on specific button.

Follow following steps bellow to make dynamic input:

STEP 1 Create The Form

Build simple form with one text input, one label and two button.

To create input like image above, you need jQuery, bootstrap, and font awesome.The complete HTML source code should be like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">

    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper" ng-app="penjualan">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">DYNAMIC INPUT DEMO</a>
        </div>
    </nav>
    <div class="container" style="margin: 0px">
        <div class="row" style="padding-top:10px">
         <div class="col-lg-6">
             <div class="panel panel-default">
                 <!-- /.panel-heading -->
                 <div class="panel-body">
                     <form>
                      <div class="dynamic-input-group">
                       <div class="form-group">
                        <label class="label-control">Dynamic Input</label>
                        <button type="button" id="addBtn" class="btn btn-md btn-primary pull-right">
                                  <i class="fa fa-plus-circle"></i>
                              </button>
                             </div>

                       <div class="form-group" id="dynamic-input">
            <input type="text" class="form-control" placeholder="This is dynamic input">
        </div>
                      </div>
                     </form>
                 </div>
             </div>
         </div>
        </div>
    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="dynamic-input.js"></script>

STEP 2 Create The Script Using jQuery

Our script will handle two functions:

Add funtion
This function will create new element below current input.
Remove function
This function will remove existing input.

Complete script source code should look like:

var newElement = "";

/* Add New Input */
$(document).on('click', '#addBtn', function(event) {
 newElement = "<div class='form-group' id='dynamic-input'><div class='input-group'><input type='text' class='form-control' placeholder='This is dynamic input'><span id='groupBtn' class='input-group-btn'><button type='button' id='removeBtn' class='btn btn-md btn-danger'><i class='fa fa-minus-circle'></i></button></span></div></div>";
 $(newElement).insertAfter($(".form-group").last());
});

/* Remove Input */
$(document).on('click', '#removeBtn', function(event) {
    $(this).parent().parent().parent().remove();
});

STEP 3 Try It !

The full source code can download here.

Dumb Coder

Just dumb man try talk about code.

Tuesday, July 12, 2016