Cara Membuat Duplikat Form Input Dengan Bootstrap dan Jquery
Hallo teman-teman apa kabar semuanya, kembali lagi dengan saya di panduan Source Code Aplikasi. Di artikel kali ini saya akan memberikan tips dan trik mengenai Cara Membuat Duplikat Form Input Dengan Bootstrap dan Jquery, di latihan kali ini kita akan merancang form input, dimana form input tersebut dapat di duplikat demikian itu di klik di tombol. Di bawah ini yaitu demo gambar yang akan kita bikin di tips dan trik kali ini.
Dapat kalian lihat di gambar di atas ini, demikian itu di klik di icon + karenanya form input akan dapat di duplikat
Nah di atas ini yaitu gambar bila di klik di icon +, dan bila di klik icon – karenanya form akan di remove. Bagus, tak perlu berlama-lama. Seketika saja kita praktekkan, pertama-tama teman-teman unduh terlebih dahulu bootstrap di situs resminya atau klik disini bagi mengunduh. Kalau telah unduh kemudian buka text editornya dan copy script di bawah ini
<!doctype html>
<html lang=en>
<head>
<title>Cara Merancang 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 di text editornya dan save dengan index.html, lalu jalankan di browsernya. Karenanya akan memperoleh 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 biasanya teman-teman jangan lupa berikan library Jquery nya
<script src=https://code.jquery.com/jquery-3.1.1.slim.js></script>
Kalau telah, tambahkan script Jquery nya bagi 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>
Kalau telah di tambahkan, save dan refresh di browsernya. Dan klik di icon + dan -, karenanya keduanya telah berjalan dengan bagus.
Teman-teman pun dapat memodifikasinya sendiri dari tips dan trik kali ini supaya lebih menarik. Bagus, mungkin demikian dulu di panduan kali ini mengenai Cara Membuat Duplikat Form Input Dengan Bootstrap dan Jquery kita jumpa lagi di artikel berikutnya. Semoga bermanfaat dan menjadi refrensi bagi kalian yang suka belajar dengan Jquery dan Bootstrap.
Terima Kasih dan Hingga Jumpa…
🙂
Sumber https://kursuswebsite.org
