Cara Duplikasi Form Input Dengan jQuery dan membuat layout form

Assalamuâ€™alaikum warahmatullahi wabarakatuh

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Duplikasi Form Input Dengan jQuery. Jadi ide nya sendiri disini saya akan membuat sebuat fitur, dimana pada sebuah inputan kosong kita masukkan angka kemudian jika di tekan enter maka tag input akan hilang dan berganti dengan tag input type file sebanyak value yang di inputkan.

Dalam kasus ini kita anggap saja ingin memberikan upload file, dan file yang di upload lebih dari 1. Nah maka dari itu sebagai seorang designer perlu memberikan user kebebasan, dengan menambahkan fitur ini user tidak pusing melihat banyaknya form input. Dengan memberikan fitur ini juga sudah termasuk dalam ketegory User Interface yang friendly, baik langsung saja kita implementasikan Cara Duplikasi Form Input Dengan jQuery pertama – tama siapkan text editornya dan siapkan library jQuery nya

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Kemudian kita buat layout nya, pada latihan kali ini saya menggunakan bootstrap 4

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-6">
					<form>
						<div class="row">
							<div class="form-group col-md-12">
							  <label for="form_choose_username">Nama</label>
							  <input id="nama" name="nama" class="form-control" required>
							</div>
						</div>
						<div class="row">
							<div class="form-group col-md-12">
							  <label for="form_choose_username">Lulusan</label>
							  <input id="lulus" name="lulus" class="form-control" required>
							</div>
						</div>
						<div class="row">
							<div class="form-group col-md-12">
							  <label for="form_choose_username">Sertifikasi</label>
							  <p style="font-style: italic;font-size: 11px; color: #09b3a3" id="list">Masukkan Angka Berapa Banyak Sertifikat Anda Dan Tekan Enter</p>
							  <input id="sertifikasi" name="sertifikasi" class="form-control" type="text" style="width: 60px">
							</div>
						</div>
						<button class="btn btn-success">Save</button>
					</form>
			</div>
			<div class="col-md-3"></div>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form>

</div>

<label for="form_choose_username">Lulusan</label>

</div>

<label for="form_choose_username">Sertifikasi</label>

<p style="font-style: italic;font-size: 11px; color: #09b3a3" id="list">Masukkan Angka Berapa Banyak Sertifikat Anda Dan Tekan Enter</p>

</div>

</form>

</div>

</div>

</body>

</html>

Kemudian save dengan nama index.html, dan jalankan pada browsernya.

Selanjutnya kita berikan script jQuery nya untuk perintah duplikat form nya

<script type="text/javascript">
$("#sertifikasi").keypress(function(e) {
  if (e.which == 13) {
      var form = $("#sertifikasi").val();
      for(i=0; i<=(form-1); i++){
        $(this).remove();
        $("#list").append('<input type="file" name="" class="sertifikasi" style="display:block">')
      }
  }
}); 
</script>

$("#sertifikasi").keypress(function(e) {

if (e.which == 13) {

var form = $("#sertifikasi").val();

for(i=0; i<=(form-1); i++){

$(this).remove();

$("#list").append('<input type="file" name="" class="sertifikasi" style="display:block">')

}

});

</script>

Jika sudah save dan refresh pada browsernya, kemudian masukkan angka pada form sertifikat dan enter

Pada form input saya memasukkan kebutuhan saya 3, dengan begitu form upload akan tampil 3 buat dan form input angkanya menghilang karena saya berikan fungsi remove(). Sekian dari saya pada artikel Cara Duplikasi Form Input Dengan jQuery kita jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa, semoga bermanfaat.

Assalamuâ€™alaikum warahmatullahi wabarakatuh

Cara Duplikasi Form Input Dengan jQuery

Facebook DUMET School

Categories