Tambahkan sedikit fungsi Jquery

Leave a comment

November 29, 2012 by evo3cx

Kita menambhakan fungsi jquery pada form sederhana kita, fungsi fade ini memunculkan dan menghilangkan objek yg kita inginkan.

 

<html>

<head><title>form sederhana </title>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js”></script&gt;

<?php

if(isset($_POST[“post”])){

                $nama=strip_tags($_POST[“nama”]);

                $kelas=strip_tags($_POST[“kelas”]);

                $npm=strip_tags($_POST[“npm”]);

                $kota=strip_tags($_POST[“kota”]);

                $kendaraan=strip_tags($_POST[“kendaraan”]);

}             

?>

 

<style type=”text/css”>

               

                body{

                               

                                background: #999999;

                                margin: 0 auto;

                                color:#000000;

                }

                #wrapper{

                                width: 960px;

                                margin: 0 auto;

                                background: #e6e6e6;

                }

                td{

                                background: #efefef;

                                text-weight: bold;

                                margin: 10px;

                }

                #buka{

                                color: #ffffff;

                                text-transform: uppercase;

                                margin: 30px auto;

                                padding: 40px auto;

                }

                #form{

                                display:none;

                }

</style>

 

<script>

$(document).ready(function(){

                $(“button”).click (function(){

                                $(“#form”).slideToggle();

                });

})

</script>

</head>

<body>

<div id=”wrapper”>

                <div id=”buka”> anda ingin mengisi form ???

                                <button> Isi </button>

                </div>

                <div id=”form”>

                                <form name=”form1″ id=”form1″ method=”post” action=””>

                                                <table style=”margin:10px”>

                                                                <tr>

                                                                                <td> Nama </td>

                                                                                <td> NPM </td>

                                                                                <td> Kelas </td>

                                                                                <td> Kota </td>

                                                                                <td> Kendaraan</td>

                                                                </tr>

                                                                <tr>

                                                                                <td> <input name=”nama” type=”text” width=”40px” id=”name” /></td>

                                                                                <td> <input name=”npm” type=”text” id=”name” /></td>

                                                                                <td> <input name=”kelas” type=”text” id=”name” /></td>

                                                                                <td> <input name=”kota” type=”text” id=”kota” /></td>

                                                                                <td> <select name=”kendaraan”>

                                                                                                                <option   size=”60px” value=”mobil”>Mobil</option>

                                                                                                                <option  size=”60px” value=”motor”>Motor</option>

                                                                                                                <option  size=”60px” value=”kereta”>kereta</option>

                                                                                                                <option  size=”60px” value=”bus”>Bus</option>

                                                                                                </select>

                                                                                </td>

                                                                </tr>

                                                                <tr>

                                                                                <td  colspan=”4″><input type=”submit” name=”button” value=”SUBMIT”></td>

                                                                                <td><input type=”hidden” name=”post” value=”form1″></td>

                                                                </tr>

                                                </table>

                                </form>

                </div>

</div>

<?php

if(!empty($nama)){

  echo “Nama anda :” .$nama.”<br/>”;

  echo “Npm Anda :” .$npm.”<br/>”;

  echo “Kelas anda:”.$kelas.”<br/>”;

  echo “Kota anda :”.$kota.”<br/>”;

  echo “Kendaraan yg anda gunakan :”.$kendaraan.”<br/>”;

  echo “<hr /><br />”;

  echo “<h2> Terima Kasih Anda Telah Mencoba Demo kami🙂 </h2>”;

 }

?>

</body>

</html>

 

Pertama kita menambahkan/memanggil ajax jquery dari google jika anda belum mengetahui bagaiman cara memanggil jquery dari google bisa lihat di sini https://evo3cx.wordpress.com/2012/11/13/pengenalan-jquery/

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js”></script&gt;

Lalu kita menambkan beberapa tag html

<div id=”buka”> anda ingin mengisi form ???

                                <button> Isi </button>

                </div>

                <div id=”form”>

Ini di maksudkan untuk ada sebuah tombol pada halaman html.

<script>

$(document).ready(function(){

                $(“button”).click (function(){

                                $(“#form”).slideToggle();

                });

})

</script>

Ini adalah bagian kita mengatur script jquery kita,  $(“button”).click (function(){  di maksudkan jika tombol button di tekan  maka $(“#form”).slideToggle();  akan di eksekusi, slideToggle() adalah fungsi pada library jquery di mana halaman yg di berikan akan muncul dan tersebunyi secara slide,

 

sebenarnya ada beberapa gambar yang ingin saya masukan tapi koneksi smart lagi bapuk bgt, jadi mungkin lain kali ya🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Gunadarma Logo

Categories

About Me

Reza Aditya Saputra 3ka07

visitor stats


%d bloggers like this: