Published November 24, 2020 by RIT with 0 comment

CARA UPDATE DATA DENGAN DROPDOWN ATAU COMBOBOX DENGAN AJAX JQUERY

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

cara update data dengan dropdown atau combobox dengan ajax jquery


Pada postingan kali ini mengenai update data dengan dropdown menggunakan ajax Jquery, disaat user melakukan perubahan data, user hanya klik atau mencet atau pilih dropdown yang di inignkan lalu akan muncul alert javascript berhasil, maka secara otomatis data telah tersimpan. Langsung saja :  

Pertama-tama buat lah table dengan nama user, dengan struktur seperti gambar di bawah ini

lalu isikan database nya dengan isian seperti gambar di bawah ini :

0 - download dulu plugin jquery di sini scroll hingga kebawah lalu tekan tombol download.
1 - letakkan jquery yg telah didownload folder dalam satu folder.
2 - buatlah file index.php
3 - buat file lagi dengan nama update_proses.php
4 - copy script dibawah ini sesuaikan dengan file index.php dan update_proses.php


index.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php $koneksi = mysqli_connect('localhost','root','','test');  ?>
<script type="text/javascript" src="../jquery.min.js"></script>
 
<table border="1">
    <tr>
        <td>Nama</td>
        <td>Pekerjaan</td>
    </tr>
<?php 
    $q = "SELECT * FROM user";
    $myq = mysqli_query($koneksi, $q);
    while($r = mysqli_fetch_assoc($myq)):
 ?>
    <tr>
        <td><?php echo $r['nama']; ?></td>
        <td>
            <select class="status_pekerjaan" id-pegawai='<?php echo $r['id']; ?>' >
                <option value=""> - Pilih -</option>
                <option value="1" <?php if( $r['pekerjaan']==1) echo 'selected';?> > Admin</option>
                <option value="2" <?php if( $r['pekerjaan']==2) echo 'selected';?> > Kebersihan</option>
                <option value="3" <?php if( $r['pekerjaan']==3) echo 'selected';?> > Keamanan</option>
                <option value="4" <?php if( $r['pekerjaan']==4) echo 'selected';?> > Guru</option>
            </select>
        </td>
 
    </tr>
<?php endwhile; ?>
</table>
 
<!-- script update -->
 
    <script type="text/javascript">
        $(document).ready( function(){
            $('.status_pekerjaan').change(function(){
                var id_pegawai = $(this).attr('id-pegawai');
                var pekerjaan = $(this).val();
 
                $.ajax({
                    type :'POST',
                    url  :'update_proses.php',
                    data :{
                          id_pegawai : id_pegawai,
                          pekerjaan  : pekerjaan
                        },
                    success : function(result){
                        alert(result);
 
                    }
                });
 
            });
        });
    </script>
 
<!-- END script update -->   


update_proses.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php 
    require_once'index.php'; 
    if(isset($_POST['id_pegawai']))
    {
        $id_pegawai = $_POST['id_pegawai'];
        $pekerjaan  = $_POST['pekerjaan'];
 
        $q = "UPDATE user SET pekerjaan='$pekerjaan' WHERE id='$id_pegawai' ";
        $myq = mysqli_query($koneksi, $q);
        if($myq) echo "berhasil diganti";
        else echo 'gagal ganti';
    }
 
?>


#hasil_nya


user memilih status pekerjaan

saat user telah memilih menu dropdown, maka akan muncul pop up atau alert javascript bahwa update telah berhasil

Terima Kasih
Thank's

TAG TAGS :
update data dengan dropdown menggunakan ajax Jquery dan Mysql dengan PHP| update data otomatis tanpa menekan tombol simpan | update data otomatis | update data otomatis dengan Jquery Ajax | menyimpan data otomatis dengan Jquery Ajax | cara passing data dengan dropdown di jquery ajax | kotak pencarian data dengan ajax di php | automatically ajax Jquery | how to update query with ajax jQuery | how to update query with ajax after select on dropdown | ajax update with dropdown option onchange | update data from mysql using dropdown with ajax |


BACA JUGA :

SOURCE :
- https://stackoverflow.com/questions/42453785/update-the-value-of-select-box-with-php-mysql-jquery-ajax
- https://stackoverflow.com/questions/10365464/submit-form-on-select-change-via-ajax


, , , , , ,

      edit

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)