Kumpulan Diaryku: Tabel Input Dinamis dan Pemrosesannya di Server

Adakalanya kita ingin input data, misalnya data karyawan dalam jumlah yang banyak sekaligus. Di mana jumlah data yang diinput ini tidak menentu. Untuk itu kita perlu membuat inputan yang dinamis sesuai dengan selera anda. Pada contoh berikut akan kita lihat bagaimana membuat inputan dinamis dengan menggunakan javascript kemudian bagaimana memproses hasil inputan tersebut di sisi server sehingga bisa kita masukkan ke dalam database.
Mungkin untuk lebih jelasnya anda coba demo berikut. Klik tombol tambah untuk menambah baris, tombol delete untuk mendelete baris, submit query untuk memprosesnya di server menggunakan PHP

Sekarang mari kita lihat kode-kodenya :
inputdinamis.html


	<html>
	<head>
	<script>
	var idrow = 2;

	function tambah(){
	var x=document.getElementById('datatable').insertRow(idrow);
	var td1=x.insertCell(0);
	var td2=x.insertCell(1);
	var td3=x.insertCell(2);
	var td4=x.insertCell(3);
	td1.innerHTML="<input type='tex't name='idkaryawan[]'>";
	td2.innerHTML="<input type ='text' name='nama[]'>";
	td3.innerHTML="<select name='sex[]'><option>Laki-laki</option><option>Perempuan</option></select>";
	td4.innerHTML="<input type ='text' name='email[]'>";
	idrow++;
	}

	function hapus(){
	if(idrow>2){
	var x=document.getElementById('datatable').deleteRow(idrow-1);
	idrow--;
	}
	}
	</script></head>
	<body>
	<form action=prosesdatakaryawan.php method=post>
	<table id=datatable border=0>
	<tr bgcolor=#ababab>
	<td>ID Karyawan</td>
	<td>Nama</td>
	<td>Jenis Kelamin</td>
	<td>Email</td>
	</tr>
	<tr>
	<td><input type='tex't name='idkaryawan[]'></td>
	<td><input type ='text' name='nama[]'></td>
	<td><select name='sex[]'><option>Laki-laki</option><option>Perempuan</option></select></td>
	<td><input type ='text' name='email[]'></td>
	</tr>
	</table>
	<input type=button value=tambah onclick=tambah()>
	<input type=button value=delete onclick=hapus()>
	<br>
	<input type=submit>
	</form>
	</body>
	</html>

Berikut kode PHP untuk memprosesnya, prosesdatakaryawan.php


	<?php
	echo "Membuat Query :<p>";
	foreach($_POST['idkaryawan'] as $key => $value){
	if($value){
	$query="INSERT INTO namatabel VALUES('".$value."','".$_POST['nama'][$key]."',
	'".$_POST['sex'][$key]."','".$_POST['email'][$key]."')<br>";
	//$lakukanquery = mysql_query($query);
	echo $query;
	}
	}
	?> baca artikel asli

Kumpulan Diaryku

Senin, 02 Mei 2011

Tabel Input Dinamis dan Pemrosesannya di Server

Tidak ada komentar:

Posting Komentar