Membuat Form Input Dinamis

Publish Date : 25-11-2016 , dibaca 31353 kali, Hari ini dibaca : 2 kali ,0 comments

Tips tutorial kali ini yaitu Cara Membuat Form Input Dinamis dengan Jquery + Bootstrap, Adakalanya saat kita membuat aplikasi kita membutuhkan form dinamis untuk menyempurnakan aplikasi yang kita buat, menginputkan data lebih dari satu pada form dan kemudian menyimpan data sekaligus merupakan salah satu cara yang dapat seorang web programer untuk memanjakan pengguna programnya..

Contoh Membuat Form Input Dinamis

Berikut contoh sederhana untuk membuat form input dinamis dengan Jquery. Misalnya user diminta untuk mengisi nama dan hobi, dimana hobi bisa lebih dari satu, maka untuk menambah hobi cukup dengan klik tombol tambah rincian hobi, dan link hapus untuk menghapus elemen form input dinamis.

Source Code membuat form input dinamis

Adapun source code untuk membuat form input dinamis adalah sebagai berikut :

<html lang="en">
<head>
  <title>Bootstrap Jquery Add More Field Example</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Bootstrap Jquery Add More Field Example</div>
    <div class="panel-body">
        <form action="action.php" method="POST">
        <div class="input-group control-group after-add-more">
          <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
          <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="control-group text-center">
            <br>
            <button class="btn btn-success" type="submit">Submit</button>
        </div>
        </form>
        <!-- Copy Fields -->
        <div class="copy hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
            <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>
</div>
<script type="text/javascript">
    $(document).ready(function() {
      $(".add-more").click(function(){ 
          var html = $(".copy").html();
          $(".after-add-more").after(html);
      });
      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });
    });
</script>
</body>
</html>