Form ajax example {html,php}

 HTML FILE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Form</title>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });

    $('#myForm').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result').html(data);
            }
        })
        return false;
    });
})
</script>
<style type="text/css">
body, table, input, select, textarea { font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid #999; }
td { padding: 5px; }
#result { background-color: #F0FFED; border: 1px solid #215800; padding: 10px; width: 400px; margin-bottom: 20px; }
</style>
</head>
<body>
<h4>AJAX Form</h4>
<div id="loading" style="display:none;"><img src="loading.gif" alt="loading..." /></div>
<div id="result" style="display:none;"></div>

<form id="myForm" method="post" action="proses.php">
    <table>
        <tr>
            <td width="100">NIM</td>
            <td>
                <input name="nim" size="30" type="text" />
            </td>
        </tr>
        <tr>

            <td>Nama</td>
            <td>
                <input name="nama" size="40" type="text" />
            </td>
        </tr>
        <tr>
            <td>Tempat Lahir</td>
            <td>

                <input name="tempat_lahir" size="40" type="text" />
            </td>
        </tr>
        <tr>
            <td>Tanggal Lahir</td>

            <td>
                <input name="tgl_lahir" size="40" type="text" />
            </td>

        </tr>
        <tr>
            <td>Alamat</td>
            <td>
                <input name="alamat" size="60" type="text" />
            </td>
        </tr>
        <tr>

            <td>No. Telp</td>
            <td>
                <input name="no_telp" size="30" type="text" />
            </td>
        </tr>
        <tr>
            <td>No. HP</td>
            <td>

                <input name="no_hp" size="30" type="text" />
            </td>
        </tr>
        <tr>
            <td>E-mail</td>
            <td>
                <input name="email" id="email" size="30" type="text" />
            </td>

        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Submit" />
                <input type="reset" value="Reset" />
            </td>
        </tr>
    </table>

</form>
</body>
</html>


PHP FILE

<?php

mysql_connect("****","********","");
mysql_select_db("testajax"); 

$nip = $_GET['q'];
if($nip){    
    $query = mysql_query("select alamat from tabelDataKaryawan where
nip=$nip");       
        while($d = mysql_fetch_array($query)){            
            echo $d['alamat'];    
    }
}

?>

0 comments: