Cara Membuat Input Textbox Dynamic Dengan jQuery

Pada kesempatan kali ini saya akan menjelaskan cara membuat input textbox dynamic dengan jquery. Perlu teman-teman ketahui sebelumnya, input textbox dynamic adalah input textbox yang dapat ditambahkan otomatis tanpa adanya keterbatasan jumlah yang ingin dibuat. Dan biasanya cara tersebut digunakan bukan cuma untuk input textbox saja, melainkan untuk form serta komponen-komponen form html lainnya, namun pada penjelasan yang saya jelaskan disini untuk input textbox, dan untuk penggunaan form serta komponen-komponen lainnya bisa teman-teman kembangkan lagi dari contoh yang saya berikan disini, dan pada dasarnya untuk penggunaan komponen-komponen lainnya sama seperti cara yang saya jelaskan disini.

Mungkin sebagian dari teman-teman sudah pernah membuatnya dengan PHP, namun pada contoh disini menggunakan jQuery yang menurut saya lebih efisien dan simple jika dilihat dari sisi User Interface. meskipun dengan kode PHP bisa dibuat, namun biasanya membutuhkan banyak logical untuk membuatnya dan jika teman-teman membuatnya menggunakan jQuery kodenya pun tidak terlalu rumit, lebih ringkas dan hasilnya lebih efisien. Untuk membuatnya teman-teman dapat mengikuti tahapan dibawah ini.

Berikut Tahapannya :

Sebelumnya teman-teman buat terlebih dahulu satu buah file dengan nama index.html
Jika sudah, ketikan kode seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cara Membuat Form Input Textbox Dynamic Dengan jQuery</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
 .tambah{
 margin-left:5px;  
 } 
</style>
<body>

<div class="container">

  <h1 class="text-center">Form Input Textbox Dynamic Dengan jQuery</h1><hr>
  <div class="col-md-12"> 
   <div class="form-group baru">
    <div class="input-group">
     <input class="form-control" name="pendidikan" type="text" required>
     <div class="input-group-btn">
      <button type="button" class="btn btn-success tambah"><i class="fa fa-plus"></i></button>
     </div>
    </div>
   </div> 
  </div>

</div>
</body>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$(function(){
   
   $(document).on('click', '.tambah', function(e)
   {
    e.preventDefault();
    var  kolom = $('.col-md-12:first'),
         formGroup = $(this).parents('.form-group:first'),
         inputTextbox = $(formGroup.clone()).appendTo(kolom);

    inputTextbox.find('input').val('');
    kolom.find('.baru:not(:last) .tambah').removeClass('tambah').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<i class="fa fa-minus"></i>');

   });

   $(document).on('click', '.btn-remove', function(e){
    $(this).parents('.baru:first').remove();
    e.preventDefault();
    return false;
   });

});
</script>
</html>

<!DOCTYPE html>

<head>

<title>Cara Membuat Form Input Textbox Dynamic Dengan jQuery</title>

</head>

<style>

.tambah{

margin-left:5px;

}

</style>

<body>

<h1 class="text-center">Form Input Textbox Dynamic Dengan jQuery</h1><hr>

</div>

</body>

$(function(){

$(document).on('click', '.tambah', function(e)

{

e.preventDefault();

var kolom = $('.col-md-12:first'),

formGroup = $(this).parents('.form-group:first'),

inputTextbox = $(formGroup.clone()).appendTo(kolom);

inputTextbox.find('input').val('');

kolom.find('.baru:not(:last) .tambah').removeClass('tambah').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<i class="fa fa-minus"></i>');

});

$(document).on('click', '.btn-remove', function(e){

$(this).parents('.baru:first').remove();

e.preventDefault();

return false;

});

</script>

</html>

Selanjutnya save terlebih dahulu file tersebut, dan lihat hasilnya dibrowser.

Sampai disini penjelasan saya mengenai cara membuat input textbox dynamic dengan jquery, semoga bermanfaat.

Cara Membuat Input Textbox Dynamic Dengan jQuery

Berikut Tahapannya :

Facebook DUMET School

Categories