Membuat Infinity Form Sederhana Dengan Javascript

Hai teman-teman semuanya, apa kabar? kita lanjut lagi pembelajaran kita tentang javascript, gimana masih semangat?? harus dong yah.. pada pembahasan kali ini kita akan belajar javascript tentang membuat infinity form sederhana dengan javascript, jadi pada kasusnya kita akan membuat sebuah form terus bertambah ketika kita klik menu tambahnya, untuk lebih jelasnya mungkin kita langsung saja praktekan,

Pertama silahkan teman-teman buat sebuah file html dan ketikan script berikut ini:

<div class="container">
	<h2>Form Dinamis</h2>
	<form id="form">
		<label> Data 1 : </label><input type="text" name="username" id="username">
		<div id="result"></div>
		<p id="add">Tambah Form</p>
		<input type="submit" value="send">
	</form>
	
</div>

Teman-teman bisa silhat sendiri dan plajari struktur yang saya buat, jika sudah jalankan pada browser maka hasilnya akan seperti berikut ini:

Jika sudah kita akan membuat fungsi dimana ketika tombol tambah form di klik maka inputannya akan bertambah, terus menerus ketika di klik, nah silahakan teman-teman ketikan script javascript berikut ini:

<script type="text/javascript">
	var form = document.getElementById('form')
	var add = document.getElementById('add')
	var data = 1

</script>

Saya memabut bebrapa variable yang nantinya akan ssaya gunakan, setelah itu kita akan tambahkan fungsi ketika tulisan tambah form di klik maka akan menambahkan form , script nya seperti berikut ini:

add.addEventListener('click', function(){
		document.getElementById('result').innerHTML += "<label> Data " + (data+=1) +" : </label><input type='text' name='username' id='username'><br>"
	})

Jadi kelengkapan untuk script javascriptnya adalah seperti berikut ini:

<script type="text/javascript">
	var form = document.getElementById('form')
	var add = document.getElementById('add')
	var data = 1

	add.addEventListener('click', function(){
		document.getElementById('result').innerHTML += "<label> Data " + (data+=1) +" : </label><input type='text' name='username' id='username'><br>"
	})
</script>

Oke sekarang silahakan teman-teman jalankan pada browser, lalu klik tulisan tambah fomnya maka hasilnya akan seperti berikut ini:

Gimana taman-teman? cukup mudah bukan, saya rasa untuk tutorial kali ini tentang Membuat Infinity Form Sederhana Dengan Javascript cukup sampai sini dulu, semoga tutorial yang singkat ini dapat bermanfaat untuk teman-teman yang membaca,

Terima kasih.