ask mengabungkan js autocomplete n function add row

Boy Fernandez · Dec 12, 2012
kk tny lg neh :)
knp js autocomplete klu di pakeiin table gak muncul y kelas nya
dan 1 lg klu mau gabungin js autocomplete ke function add row gmn y..
jd pas di row ke 2 dst pas ketik nama kelas nya jg muncul pake js autocomplete
makasi :)
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- sesuaikan dengan path jqueryui yang kamu punya -->
<link rel="stylesheet" href="js/themes/base/jquery.ui.all.css" />
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
			//Function Numeric Only untuk Text box
			function isNumberKey(evt)
			{
				var charCode = (evt.which) ? evt.which : event.keyCode
				if (charCode > 31 && (charCode < 48 || charCode > 57))
				   return false;
		       
				return true;
			}
<!---------------- autocomplete ------------------------------->	 			
$(function() {
$( ".nama" ).autocomplete({
source: "get_nama.php",
minLength: 2,
select: function( event, ui ) {
$(event.target).val(ui.item.nama);
$(event.target).next().next().val(ui.item.kelas);
}
});
});
<!---------------- autocomplete ------------------------------->
<!---------------- add row ------------------------------->	  
	
var i = 1;
$(function(){
	$("#addRow").click(function(){
		row = '<tr>'+
			'<td><input type="text" name="nama['+i+']"/></td>'+
			'<td><input type="text" name="kelas['+i+']"/></td>'+
			'<td><input type="text" name="absen['+i+']"/></td>'+
			'<td><button type="button" class="del">Del</button></td>'+
			'</tr>';
		$(row).insertBefore("#last");
		i++;
		});
	});
	$(".del").live('click', function(){
		$(this).parent().parent().remove();
		});
<!---------------- add row ------------------------------->	 
</script>
    </head>
    <body>
    <form id="form1" name="form1" method="post" action="">
<table cellspacing="0" border="1" cellpadding="3" align="center">
    <tr bgcolor="#CCCCCC">
        <td>NAMA</td>
		<td>KELAS</td>
		<td>ABSENSI</td>
        <td>DELETE</td>
  	</tr>
	<tr>
   		<td><input type="text" name="nama[0]" id="nama" class="nama" /></td>
		<td><input type="text" name="kelas[0]" id="kelas"/></td>
		<td><input type="text" name="absen[0]" id="absen"/></td>
		<td><button type="button" class="del">Del</button></td>
	</tr>
	<tr id="last">
		<td colspan="4"><button type="button" id="addRow">Add</button></td>
	</tr>
</table>
</form>
<table cellspacing="0" border="1">
<? for($i = 0; $i < 10; $i++){ ?>
<form action="" method="post">

  <tr>
	<td><input type="text" name="nama" id="nama" class="nama"/></td>
    <td><input type="text" name="kelas" id="kelas" onKeyPress="return isNumberKey(event)"/></td>
  </tr>
<?    } ?>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
</table>
</body>
</html>
Silahkan login untuk menjawab!
0
Ellyx Christian · Dec 14, 2012 · 0 Suka · 0 Tidak Suka 
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- sesuaikan dengan path jqueryui yang kamu punya -->
<link rel="stylesheet" href="js/themes/base/jquery.ui.all.css" />
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
//Function Numeric Only untuk Text box
function isNumberKey(evt)
{
	var charCode = (evt.which) ? evt.which : event.keyCode
	if (charCode > 31 && (charCode < 48 || charCode > 57))
	   return false;

	return true;
}

var i = 1;
$(function(){
	$( ".nama" ).autocomplete({
		source: "get_nama.php",
		minLength: 2,
		select: function( event, ui ) {
			$(event.target).val(ui.item.nama);
			var rel = $(event.target).attr('rel');
			$('#kelas-'+rel).val(ui.item.kelas);
		}
	});
	$("#addRow").click(function(){
		row = '<tr>'+
			'<td><input type="text" name="nama['+i+']" id="nama-'+i+'" rel="'+i+'"/></td>'+
			'<td><input type="text" name="kelas['+i+']" id="kelas-'+i+'"/></td>'+
			'<td><input type="text" name="absen['+i+']" id="absen-'+i+'"/></td>'+
			'<td><button type="button" class="del">Del</button></td>'+
			'</tr>';
		$(row).insertBefore("#last");
		$('#nama-'+i).autocomplete({
			source: "get_nama.php",
			minLength: 2,
			select: function( event, ui ) {
				$(event.target).val(ui.item.nama);
				var rel = $(event.target).attr('rel');
				$('#kelas-'+rel).val(ui.item.kelas);
			}
		});
		i++;
	});
	$(".del").live('click', function(){
		$(this).parent().parent().remove();
	});
});
</script>
    </head>
    <body>
    <form id="form1" name="form1" method="post" action="">
<table cellspacing="0" border="1" cellpadding="3" align="center">
    <tr bgcolor="#CCCCCC">
        <td>NAMA</td>
		<td>KELAS</td>
		<td>ABSENSI</td>
        <td>DELETE</td>
  	</tr>
	<tr>
   		<td><input type="text" name="nama[0]" id="nama-0" class="nama" rel="0" /></td>
		<td><input type="text" name="kelas[0]" id="kelas-0"/></td>
		<td><input type="text" name="absen[0]" id="absen-0"/></td>
		<td><button type="button" class="del">Del</button></td>
	</tr>
	<tr id="last">
		<td colspan="4"><button type="button" id="addRow">Add</button></td>
	</tr>
</table>
</form>
<table cellspacing="0" border="1">
<? for($i = 0; $i < 10; $i++){ ?>
<form action="" method="post">
 
  <tr>
	<td><input type="text" name="nama[<?php echo $i?>]" id="nama-<?php echo $i?>" class="nama" rel="<?php echo $i?>"/></td>
    <td><input type="text" name="kelas[<?php echo $i?>]" id="kelas-<?php echo $i?>" onKeyPress="return isNumberKey(event)"/></td>
  </tr>
<?    } ?>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
</table>
</body>
</html>