Menampilkan Field Otomatis Setelah Field Pertama Diisi

https://www.kursuswebsite.org/menampilkan-field-otomatis-setelah-field-pertama-diisi/

by DUMET School | Dec 15, 2017 | HTML CSS, Kursus Website, PHP MySQL, Tutorial, Website | 0 comments

Hallo teman-teman, kembali lagi dengan saya di dumetschool.com tempat kursus terbaik dan nomor satu. Kali ini saya akan membahas tentang Menampilkan Field Otomatis Setelah Field Pertama Diisi. Untuk studi case kali ini saya akan ambil kasus penjualan barang dimana harga barang akan tampil ketika kita memilih kode barang atau nama barangnya .

Oke langsung saja, seperti biasa kita buat struktur htmlnya terlebih dahulu dan databasenya untuk Menampilkan Field Otomatis Setelah Field Pertama Diisi. Scriptnya seperti di bawah ini ya teman-teman.

JavaScript

56 lines


<?php
// KONEKSI DATABASE
$servername="localhost";
$user="dumet";
$pass="school";
$db="shelli";
$connection= mysqli_connect($servername, $user, $pass, $db);
if(!$connection){
    die ("Connection failed: ".mysqli_connect_error());
}
// TAMPILKAN DATA BARANG DAN HARGA
$barang=mysqli_query($connection, "SELECT * FROM barang");
$jsArray = "var hrg_brg = new Array();\n"; 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title><strong>Menampilkan Field Otomatis Setelah Field Pertama Diisi</strong></title>
    <-e-style type="text/css">
        .container{width: 300px; margin:auto; background-color: salmon; padding: 20px;}
        h1{text-align: center;}
        table, input, select{width: 100%;}
    </style>
</head>
<body>
<div class="container">
    <h1>Penjualan</h1>
    <form name="autosumform" method="post" action="">
      <table>
        <tr>
            <td><label>Nama Barang</label></td>
            <td>
                <select name="kd_brg" onchange="changeValue(this.value)" >
                    <option>- Pilih -</option>
                    <?php if(mysqli_num_rows($barang)) {?>
                        <?php while($row_brg= mysqli_fetch_array($barang)) {?>
                            <option value="<?php echo $row_brg["kd_brg"]?>"> <?php echo $row_brg["nm_brg"]?> </option>
                        <?php $jsArray .= "hrg_brg['" . $row_brg['kd_brg'] . "'] = {hrg:'" . addslashes($row_brg['hrg']) . "'};\n"; } ?>
                    <?php } ?>
                </select>
            </td>
        </tr>
        <tr>
            <td><label>Harga</label></td>
            <td><input type="text" class="form-control" name="hrg" id="hrg" value="0" readonly="readonly"></td>
        </tr>
      </table>
    </form>
</div>
  </body>
</html>

Nah, disini teman-teman bisa perhatikan scriptnya, saya sudah masukan beberapa kode phpnya yang pertama kita buat koneksi untuk ke database, kemudian kita tampilkan data dari database ke form select option dan kemudian saya looping menggunakan while.

Setelah itu kita masuk ke javascript untuk menampilkan harga berdasarkan kode barang yang sudah kita buat di database. Berikut scriptnya, jangan lupa letakan di atas penutup tag body ya teman-teman.

JavaScript

6 lines


<-e-script type="text/javascript">
    <?php echo $jsArray; ?>
    function changeValue(kd_brg) {
      document.getElementById("hrg").value = hrg_brg[kd_brg].hrg;
    };
    </script> <!-- Tampilkan Harga berdasarkan kode barang -->

Maka setelah itu tampilannya akan seperti pada gambar di bawah ini.

Demikian artikel tentang cara Menampilkan Field Otomatis Setelah Field Pertama Diisi. Semoga bermanfaat dan selamat mencoba ya.

Kumpulan Tutorial Kito

Kamis, 04 April 2024

PHP-menampilkan data otomatis

Menampilkan Field Otomatis Setelah Field Pertama Diisi

Tidak ada komentar:

Posting Komentar