Advertisement
arijulianto

Submit Form Dengan Jquery

Jun 10th, 2014
437
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 3.21 KB | None | 0 0
  1. <html>
  2.     <head>
  3.         <title>Submit Form Dengan Jquery</title>
  4.         <script language="javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>
  5.  
  6.         <!--perintah jquery beraksi-->
  7.         <script>
  8.             $(document).ready(function(){
  9.                 /*jika tombol submit ditekan*/
  10.                 $('#submit').click(function(){
  11.                     //ambil value/data yang diinput pada nama
  12.                     var nama = $('#nama').val();
  13.                     //ambil value/data yang diinput pada pekerjaan
  14.                     var job= $('#job').val();
  15.                     //ambil value/data yang diinput pada kota
  16.                     var kota = $('#kota').val();
  17.                     //ambil value/data yang diinput pada No. Telepon
  18.                     var phone = $('#phone').val();
  19.  
  20.                     //set tr td untuk diset pada tabel
  21.                     var data = '<tr>';
  22.                         data +='<td><input type="hidden" name="nama[] value="'+nama+'" />'+nama+'</td>';
  23.                         data +='<td><input type="hidden" name="job[] value="'+job+'" />'+job+'</td>';
  24.                         data +='<td><input type="hidden" name="kota[] value="'+kota+'" />'+kota+'</td>';
  25.                         data +='<td><input type="hidden" name="phone[] value="'+phone+'" />'+phone+'</td>';
  26.                         data +='</tr>';
  27.                     //set data pada tabel
  28.                     $('#dataPegawai').append(data);
  29.                     //kosongkan form
  30.                     $('#myForm')[0].reset();
  31.                 });
  32.             });
  33.         </script>
  34.         <!--/perintah jquery beraksi-->
  35.     </head>
  36.     <body>
  37.         <form action="" method="post" id="myForm">
  38.             <table>
  39.                 <caption><h3>Tutorial Jquery Submit Form</h3></caption>
  40.                 <tr>
  41.                     <td>Nama</td>
  42.                     <td>:</td>
  43.                     <td><input type="text" name="nama" id="nama" size="35" /></td>
  44.                 </tr>
  45.                 <tr>
  46.                     <td>Pekerjaan</td>
  47.                     <td>:</td>
  48.                     <td><input type="text" name="job" id="job" size="36" /></td>
  49.                 </tr>
  50.                 <tr>
  51.                     <td>Kota</td>
  52.                     <td>:</td>
  53.                     <td><input type="text" name="kota" id="kota" /></td>
  54.                 </tr>
  55.                 <tr>
  56.                     <td>No. Telepon</td>
  57.                     <td>:</td>
  58.                     <td><input type="text" name="phone" id="phone" /></td>
  59.                 </tr>
  60.                 <tr>
  61.                     <td> </td>
  62.                     <td> </td>
  63.                     <td><input type="button" id="submit" value="Submit" /></td>
  64.                 </tr>
  65.             </table>
  66.         </form>
  67.        
  68.     <form action="proses.php" method="post">
  69.     <table border="1">
  70.             <tr>
  71.                 <th>Nama</th>
  72.                 <th>Pekerjaan</th>
  73.                 <th>Kota</th>
  74.                 <th>No. Telepon</th>
  75.             </tr>
  76.             <tr>
  77.                 <tbody id="dataPegawai"></tbody>
  78.             </tr>
  79.         </table>
  80.     <input type="submit" name="simpan" value="Simpan" />
  81.     </form>
  82.     </body>
  83. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement