Form Dinamis Boostrap

on
Selamat malam. . ..
Kalian pernah dengar form dinamis . . .
...
Apa itu form dinamis?
Form dinamis adalah form yang berisi inputan yang bisa di tambah lebih dari satu. Contoh inputan hobbi.
Gambar 1. Form Dinamis

Langkah pertama

1. Download css, js, dan jquery disini Boostrap
2. Extract file Bootstrap.zip, lalu ambil file CSS dan JS nya.
3. Buat folder Bootstrap, lalu paste kan file CSS dan JS tadi ke dalam folder Bootstrap.
4. Contoh susunan folder
       + form dinamis
          - Bootstrap
             -css
             -js
          -index.php

5.  Buat file index.php


?
Index

  
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <!-- Bootstrap CSS -->
    <title>Form Dinamis!</title>
  </head>
  <body>
 <div class="container">
<!--form dinamis-->
 <div class="col-sm-6">
    <h4>Hobbi</h4>
  <div class="panel-body">
        <div class="input-group control-group after-add-more">
         <input type="text" name="addmore[]" class="form-control" placeholder="Examp. Blogger ">
            <div class="input-group-btn">
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
            </div>
        </div>
        <div class="copy-fields hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="text" name="addmore[]" class="form-control" placeholder="Examp. Blogger">
            <div class="input-group-btn">
              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>
  </div>
            </div>
  <!--/.form dinamis-->
</div>
  <!--ajax form dinamis-->
<script type="text/javascript">
    $(document).ready(function() {
      $(".add-more").click(function(){
          var html = $(".copy-fields").html();
          $(".after-add-more").after(html);
      });
      $("body").on("click",".remove",function(){
          $(this).parents(".control-group").remove();
      });
    });
</script>
 <!--/.ajax form dinamis-->
  </body>
</html>

  

<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <!-- Bootstrap CSS -->
    <title>Form Dinamis!</title>
  </head>
  <body>
 <div class="container">
<!--form dinamis-->
 <div class="col-sm-6">
    <h4>Hobbi</h4>
  <div class="panel-body">
        <div class="input-group control-group after-add-more">
         <input type="text" name="addmore[]" class="form-control" placeholder="Examp. Blogger ">
            <div class="input-group-btn"> 
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
            </div>
        </div>
        <div class="copy-fields hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="text" name="addmore[]" class="form-control" placeholder="Examp. Blogger">
            <div class="input-group-btn"> 
              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>
  </div>
            </div>
  <!--/.form dinamis-->
</div>
  <!--ajax form dinamis-->
<script type="text/javascript">
    $(document).ready(function() {
      $(".add-more").click(function(){ 
          var html = $(".copy-fields").html();
          $(".after-add-more").after(html);
      });
      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });
    });
</script>
 <!--/.ajax form dinamis-->
  </body>
</html>


Pembahasan 
1. Memanggil file css dan js
?
Memanggil file css dan js

  
1
2
3
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

  

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

2.  Form berisi inputan
?
Form berisi inputan

  
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<div class="col-sm-6">
    <h4>Hobbi</h4>
  <div class="panel-body">
        <div class="input-group control-group after-add-more">
         <input type="text" name="addmore[]" class="form-control" placeholder="Examp. Blogger ">
            <div class="input-group-btn">
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
            </div>
        </div>
        <div class="copy-fields hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="text" name="addmore[]" class="form-control" placeholder="Examp. Blogger">
            <div class="input-group-btn">
              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>
  </div>

  

<div class="col-sm-6">
    <h4>Hobbi</h4>
  <div class="panel-body">
        <div class="input-group control-group after-add-more">
         <input type="text" name="addmore[]" class="form-control" placeholder="Examp. Blogger ">
            <div class="input-group-btn"> 
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
            </div>
        </div>
        <div class="copy-fields hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="text" name="addmore[]" class="form-control" placeholder="Examp. Blogger">
            <div class="input-group-btn"> 
              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>
  </div>


3.  Ajax form dinamis
?
Ajax form dinamis

  
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<!--ajax form dinamis-->
<script type="text/javascript">
    $(document).ready(function() {
      $(".add-more").click(function(){
          var html = $(".copy-fields").html();
          $(".after-add-more").after(html);
      });
      $("body").on("click",".remove",function(){
          $(this).parents(".control-group").remove();
      });
    });
</script>
 <!--/.ajax form dinamis-->


<!--ajax form dinamis-->
<script type="text/javascript">
    $(document).ready(function() {
      $(".add-more").click(function(){ 
          var html = $(".copy-fields").html();
          $(".after-add-more").after(html);
      });
      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });

    });



</script>
 <!--/.ajax form dinamis-->
   

Download source code Github.com

Comments

Post a Comment