Paste Range Data dari Excel ke Form HTML Menggunakan Javascript

Beberapa hari ini saya sedang membuat sebuah program web untuk mengetahui klasifikasi jenis tanah dengan parameter yang telah ditentukan. Input nilai parameter tanah yang bisa dimasukkan berjumlah 10, seperti terlihat pada gambar di bawah ini. Namun, owner meminta agar data dari excel bisa dicopy dengan cepat ke dalam form HTML. Data di dalam excel dikelompokkan menjadi sebuah tabel beraturan kemudian dipilih untuk selanjutnya disalin ke dalam clipboard (Ctrl+C). Pekerjaan utamanya adalah bagaimana agar ketika user memasukkan range nilai tersebut pada input pertama, maka javascript secara otomatis akan memecah nilai-nilai tadi dan memasukkannya ke dalam input lain yang bernilai nol.

Form HTML dengan banyak input
Form HTML dengan banyak input
Data dari Spreadsheet
Data dari Spreadsheet
Range data dari excel dimasukkan ke dalam input pertama (Fine #200)
Range data dari excel dimasukkan ke dalam input pertama (Fine #200)
Data akan secara otomatis menempati input lainnya.
Data akan secara otomatis menempati input lainnya.

Potongan kode di bawah ini adalah salah satu cara untuk menyelesaikan kasus di atas. Tentu saja potongan kode ini harus dimodifikasi sesuai dengan format range data yang akan disalin dan urutan serta letak elemen input HTML tersebut. Prinsipnya, sebuah kolom dengan kolom lain pada spreadsheet akan dipisahkan oleh tabulasi “\t” sedangkan antara baris satu dengan baris lainnya dipisahkan oleh new line “\n”. Namun setelah saya coba, antar baris akan dideteksi sebagai spasi ” ” pada form HTML, bukan sebagai new line.

$(document).ready(function(){
	/* Paste values from spreadsheet if pasted in first input */
	$('#firstcolumn input[type=text].1').change(function(){
		var string = $(this).val();
		// data antar baris dipisahkan oleh spasi
		var rows = string.split(" "); 
		var i = 1;
		for(var val in rows){
			// data antar kolom dipisahkan oleh tabulasi
			var cells = rows[val].split("\t"); 
			first = '.'+i;
 
			// jika data yang dipaste hanya 1 data saja (bukan data dari excel)
			if(cells.length == 1){ 
				break;
			}
 
			// saya menggunakan class .1 .2 pada baris form input
			// artinya class .1 adalah baris input 1, dst
			$('#firstcolumn .'+i).val(cells[0]); 
			$('#secondcolumn .'+i).val(cells[1]); 
			i++;
		}		
	});
});

Leave a Reply

Your email address will not be published. Required fields are marked *