Postingan lainnya
belajar ajax
maaf agan agan semua, saya ganggu lagi dengan pertanyaan..
saya punya text field seperti di gambar,
saya ingin text field kedua otomatis terisi setiap text field pertama dipilih. saya gunakan ajax
ini html nya
<input type="text" id="nomorcsc" list="nomor" value=""/>
<datalist id="nomor">
<?php
do {
?>
<option value="<?php echo $row_tes['idcsdform']; ?>"><?php echo $row_tes['clientcsd']; ?><?php echo $row_tes['nocsc']; ?></option>
<?php
} while ($row_tes = mysql_fetch_assoc($tes));
?>
</datalist>
<input type="text" id="qty" value=""/>
<input type="text" id="brt" value=""/>
<button class="add">Add</button>
dan ini ajax nya,
<script type="text/javascript">
$(document).ready(function(){
$('#nomorcsc').on('change',function(){
var nc = $(this).val();
if(nc){
$.ajax({
type:'POST',
url:'cobaa.php',
data:'idcsdform='+nc,
success:function(html){
$('#qty').html(html);
}
});
}
});
$('#nomorcsc').on('change',function(){
var nc = $(this).val();
if(nc){
$.ajax({
type:'POST',
url:'cobab.php',
data:'idcsdform='+nc,
success:function(html){
$('#brt').html(html);
}
});
}
});
});
</script>
dan ini cobaa.php nya,
<?php
if(isset($_POST['idcsdform']) && !empty($_POST['idcsdform'])){
$sql=mysql_query("SELECT * FROM formcsd JOIN csdcomm USING (idcsdcomm) WHERE idcsdform = '".$_POST['idcsdform']."'") or die (mysql_error());
$row = mysql_num_rows($sql);
if($row > 0){
while($rowdata = mysql_fetch_assoc($sql)){
echo '<input value="'.$rowdata['quantity'].'">'.$rowdata['quantity'].'/>';
}
}
}
?>
terima kasih banyak para masta. mohon arahan nya
text field kedua id="qty" dan cobaa.php untuk mengisi text field kedua tersebut
0
2 Jawaban:
Jawaban Terpilih
THE JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// eventya input jangan change.. karena saat milih list dia seakan2 sedang input ke
// #nomorcsc
$('#nomorcsc').on('input', function() {
var nc = $(this).val();
// find option .. each function = maksudnya akan dilakukan pencarian "<option>"
// dan diulang2 sebanyak jumlah <option> yg ada di data list...
$("#nomor").find("option").each(function() {
// jika ketemu
if ($(this).val() == nc) {
$.ajax({
type : 'POST',
url : 'cobaa.php',
data : {idcsdform: nc},
success : function(html) {
// nilai baliknya di split (memecah string)
var data = html.split('|');
// ngerti lah yaa..
$('#qty').val(data[0]);
$('#brt').val(data[1]);
}
});
}
})
});
// reset
$("#reset").click(function(){
$("#nomorcsc").val('');
});
});
</script>
THE HTML
<input type="text" id="nomorcsc" list="nomor" value=""/>
<datalist id="nomor">
<?php
do {
?>
<option value="<?php echo $row_tes['idcsdform']; ?>"><?php echo $row_tes['clientcsd']; ?><?php echo $row_tes['nocsc']; ?></option>
<?php
} while ($row_tes = mysql_fetch_assoc($tes));
?>
</datalist>
<input type="text" id="qty" value=""/>
<input type="text" id="brt" value=""/>
<!-- jangan lupa dikasih reset jika user salah pilih -->
<input type="button" id="reset" value="Reset">
<button class="add">Add</button>
THE PHP (cobaa.php)
<?php
if(isset($_POST['idcsdform']) && !empty($_POST['idcsdform'])){
// rapiin bro masukin variabel
$sqlString = "SELECT * FROM formcsd JOIN csdcomm USING (idcsdcomm) WHERE idcsdform = '".$_POST['idcsdform']."'";
$sql = mysql_query($sqlString) or die (mysql_error());
$row = mysql_num_rows($sql);
if($row > 0){
$rowdata = mysql_fetch_assoc($sql);
// nilai yg dikembalikan .. dipisahkan dengan tanda pipa "|"
echo $rowdata['quantity']. "|" . $rowdata['berat']; //sesuaikan nama field
}
}
?>
NB: saran jangan pake Datalist .. ngk enak.. .wkwkw.. pake select aja.. kalau mau bisa difilter.. pake select2.. cari library nya..
Semoga membantu (^_^)/ .... work asal teliti.. hehe
1
