Login
Membuat add input data secara dinamis

Membuat add input data secara dinamis

Kali ini saya akan berbagi script hasil kopi paste ... :v yang saya dapat dari salah satu forum .. yaitu bagaimana cara membuat add input data secara dinamis.

Ketika saya coba hasilnya sangat memukau ..karena kita bisa menambah atau mengurangi input data sesuka hati sesuai kebutuhan.

Ok langsung saja brikut scriptnya :

<!DOCTYPE HTML>
<html><head>

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

<script>

$(document).ready(function(){
   
  $('#add').click(function(){
   
  var inp = $('#box');
   
  var i = $('input').size() + 1;
   
  $('<div id="box' + i +'"><input type="text" id="name" class="name" name="name' + i +'" placeholder="Input '+i+'"/><img src="http://findicons.com/files/icons/753/gnome_desktop/64/gnome_edit_delete.png" title="Hapus"  width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo(inp);
   
  i++;
   
  });
   
   
  $('body').on('click','#remove',function(){
   
  $(this).parent('div').remove();
   
  });
   
});

</script>

<style>

body{ font-family:Tahoma, Geneva, sans-serif; color:#000; font-size:11px; margin:0; padding:0; background-color:#edecec}

.bachors{ width:480px;height:auto;margin:0 auto;margin-top:100px; padding:10px;}

.name{width:400px; height:30px; padding:10px; border-radius:5px; border:solid #0CF 1px; margin-bottom:15px; font-size:24px;-webkit-box-shadow: 1px 1px 10px #CCC;box-shadow: 1px 1px 10px #CCC; outline:none;}

input{ margin-top:5px;}

.add{margin-left:10px; margin-top:15px; cursor:pointer;}

</style>

</head>

<body>

<div class="bachors">

<div id="box">
<input name="name" type="text" id="name" class="name" placeholder="Input 1">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Fairytale_button_add.png" title="Tambah" width="32" height="32" border="0" align="top" class="add" id="add" />
</div>

</div>

</body>
</html>