contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Membuat Form Input Dinamis

Posted in Javascript Jquery Life at 25 November 2016 With 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.



membuat form dinamis dengan jquery

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>

Untuk Cara Membuat Proses Simpan Form Dinamis dengan PHP bisa dilihat pada artikel tersebut

Download source code dilink ini

Artikel Terkait

Diskusi