Pada kesempatan kali ini saya akan Membuat Multiple Input Field Dengan jQuery. Dalam kasus sekarang saya akan membuat multiple insert field inputan dengan sedikit menggunaka bantuan script dari jQuery. Jadi Multiple input field disini saya menyiapkan form input agar bisa menambahkan form sesuai kebutuhan secara dinamis. Kenapa dinamis karena saat kita kelebihan menambahkan form inputan bisa langsung dihapus, jika masih kurang bisa langsung ditambahkan.

Langkah Pertama

Buatlah file baru dimana akan diisi dengan struktur dari HTMLnya, atau menampilkan form input, disini saya akan menggunakan library dari bootstrap agar mempermudah dalam memakai class form didalamnya. Silahkan ikuti code dan mulai mengetikkan seperti berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
</head>
<body>

bagian head saya sisipkan library dari Bootstrap dan Font awesome yang nanti tombolnya akan saya berikan Icon Fontawesome.

<div class="container my-5">
		<div class="row">
			<div class="col-md-8">
				<form method="post" action="">
            
				    <div class="form-group fieldGroup">
				        <div class="input-group">
				            <input type="text" name="username[]" class="form-control" placeholder="Enter Your Username"/>
				            <input type="text" name="email[]" class="form-control" placeholder="Enter Your email"/>
				            <input type="password" name="password[]" class="form-control" placeholder="Enter Your password"/>
				            <div class="input-group-addon ml-3"> 
				                <a href="javascript:void(0)" class="btn btn-success addMore"><i class="fas fa-plus"></i></a>
				            </div>
				        </div>
				    </div>
				    
				    <input type="submit" name="submit" class="btn btn-primary btn-sm" value="Submit"/>				    
				</form>
				<div class="form-group fieldGroupCopy" style="display: none;">
				    <div class="input-group">
				        <input type="text" name="username[]" class="form-control" placeholder="Enter Your Username"/>
				        <input type="text" name="email[]" class="form-control" placeholder="Enter Your email"/>
				        <input type="password" name="password[]" class="form-control" placeholder="Enter Your password"/>
				        <div class="input-group-addon"> 
				            <a href="javascript:void(0)" class="btn btn-danger remove"><i class="fas fa-trash"></i></a>
				        </div>
				    </div>
				</div>
			</div>
		</div>
	</div>

Langkah Kedua

Selanjutnya menyisipkan library jQuery serta script-script dari untuk proses event click tambah maupun hapus seperti dibawah ini:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
		<script>
		$(document).ready(function(){
    // membatasi jumlah inputan
    var maxGroup = 10;
    
    //melakukan proses multiple input 
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+maxGroup+' groups are allowed.');
        }
    });
    
    //remove fields group
    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
});
	</script>

JIka sudah langkah berikutnya adalah proses menambil nilai dari form ,silahkan ketikkan code berikut :

<?php
if(isset($_POST['submit'])){
    $uname = $_POST['username'];
    $email = $_POST['email'];
    $pass = $_POST['password'];
    if(!empty($uname)){
        for($a = 0; $a < count($uname); $a++){
            if(!empty($uname[$a])){
                $username = $uname[$a];
                $emails = $email[$a];
                $password = $pass[$a];
                
                //membuat insert data sementara
                echo 'Data ke -' .($a+1).'=> Nama: '.$username.'; Email: '.$emails.'; Password: '.$password.'</br>';
            }
        }
    }
}
?>

Baiklah simpan terlebih dahulu yang sudah diketikkan, lalu jalankan pada browser masing-masing dan lihat hasilnya seperti contoh gambar berikut:

cara-membuat-multiple-input-field-dengan-jquery-edi(010320)

Jika sahabat sudah melakukan input field seperti gambar diatas langsung saja klik tombol submit dan hasilnya akan seperti ini :

cara membuat-multiple-input-field-dengan-jquery-edi(010320)

Saya kira cukup dalam pembahasan kali ini tentang Membuat Multiple Input Field Dengan jQuery. Semoga bermanfaat dan sampai jumpa lagi.

terima kasih.