Cara Membuat Duplikat Form Input Dengan Bootstrap dan Jquery

Hallo teman-teman apa kabar semuanya, kembali lagi dengan saya pada tutorial Dumet School. Di artikel kali ini saya akan memberikan tips dan trik tentang Cara Membuat Duplikat Form Input Dengan Bootstrap dan Jquery, pada latihan kali ini kita akan membuat form input, dimana form input tersebut dapat di duplikat begitu di klik pada tombol. Di bawah ini adalah demo gambar yang akan kita buat di tips dan trik kali ini.

Bisa kalian lihat pada gambar di atas ini, begitu di klik pada icon + maka form input akan bisa di duplikat

Nah di atas ini adalah gambar jika di klik pada icon +, dan jika di klik icon – maka form akan di remove. Baik, tidak perlu berlama-lama. Langsung saja kita praktekkan, pertama-tama teman-teman download terlebih dahulu bootstrap di website resminya atau klik disini untuk mendownload. Jika sudah download kemudian buka text editornya dan copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
	<title>Cara Membuat Duplikat Form Input Dengan Bootstrap dan Jquery</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
	<div class="wrap">
		<form action="#" method="post">
			<div class="controls"> 
				<div class="form-group">
					<div class="entry input-group">
						<input class="form-control" name="data[]" type="text" placeholder="Ketik di sini..." required>
							<span class="input-group-btn">
								<button class="btn btn-success btn-add" type="button">
									<span class="glyphicon glyphicon-plus"></span>
								</button>
							</span>
					</div>
			   </div>
			</div>
		</form>
	</div>
</body>
</html>

Dan paste kan pada text editornya dan save dengan index.html, lalu jalankan pada browsernya. Maka akan mendapatkan output seperti gambar di bawah ini

Berikutnya kita costum css nya supaya lebih menarik, teman-teman tambahkan script css nya di bawah ini

<style>
		*{
			margin: 0;
			padding: 0;
		}
		body {
			text-align:center;
			background-color:gray;
			font-family:Arial, Helvetica, sans-serif;
			font-size:80%;
			color:#666;
		}
		.entry{
			margin-top:10px;
		}
		.wrap {
			width:730px;
			margin:30px auto;
			border-radius:4px;
			padding: 20px 5px;
		}
		h1 {
			font-family:Georgia, "Times New Roman", Times, serif;
			font-size:24px;
			color:#645348;
			font-style:italic;
			text-decoration:none;
			font-weight:100;
			padding: 10px;
		}
		.form-control{
			border-radius:0px;
		}
		
		.btn {
			border-radius:0px;
		}
	</style>

Langkah berikutnya kita akan implementasikan Cara Membuat Duplikat Form Input Dengan Bootstrap dan Jquery, seperti biasa teman-teman jangan lupa berikan library Jquery nya

<script src="https://code.jquery.com/jquery-3.1.1.slim.js"></script>

Jika sudah, tambahkan script Jquery nya untuk menjalankan duplikat dan remove nya di bawah ini

<script>
		$(function(){
		   $(document).on('click', '.btn-add', function(e)
		   {
			e.preventDefault();

			var controlForm = $('.controls:first'),
			 currentEntry = $(this).parents('.entry:first'),
			 newEntry = $(currentEntry.clone()).appendTo(controlForm);

			newEntry.find('input').val('');
			controlForm.find('.entry:not(:last) .btn-add')
			 .removeClass('btn-add').addClass('btn-remove')
			 .removeClass('btn-success').addClass('btn-danger')
			 .html('<span class="glyphicon glyphicon-minus"></span>');
		   }).on('click', '.btn-remove', function(e)
		   {
			$(this).parents('.entry:first').remove();

			e.preventDefault();
			return false;
		   });
	  }
	 );
	</script>

Jika sudah di tambahkan, save dan refresh pada browsernya. Dan klik pada icon + dan -, maka keduanya sudah berjalan dengan baik.

Teman-teman juga bisa memodifikasinya sendiri dari tips dan trik kali ini supaya lebih menarik. Baik, mungkin sekian dulu pada tutorial kali ini tentang Cara Membuat Duplikat Form Input Dengan Bootstrap dan Jquery kita jumpa lagi di artikel berikutnya. Semoga bermanfaat dan menjadi refrensi untuk kalian yang suka belajar dengan Jquery dan Bootstrap.

Terima Kasih dan Sampai Jumpa…

🙂

Cara Membuat Duplikat Form Input Dengan Bootstrap dan Jquery

Kategori