JQuery ile form değerlerinin değişip değişmedigini kontrol etme
FORM bilgilerini veritabanına göndermeden önce, FORM değerlerinin değişip değişmedigini kontrol etmek istersek, önceki FORM bilgileri ile yeni FORM bilgilerini aşağıdaki örnekte görüldüğü üzere SERIALIZE ile kıyaslamamız yeterlidir.
- (function() {
- var formoncekiveri = $("#form").serialize();
- $("#kaydetbutton").click(function() {
- if ($("#form").serialize() != formoncekiveri ) {
- // form yeni verilere sahip
- }
- });
- });
HTML sayfasında görmek istersek
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Bilgisayar.me</title>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
- </head>
- <body>
- <form id="form">
- <table width="100%" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td width="10%"> </td>
- <td width="90%"> </td>
- </tr>
- <tr>
- <td>İsim</td>
- <td><input type="text" name="isim" id="isim" value="Hakan" /></td>
- </tr>
- <tr>
- <td>Soyad</td>
- <td><input type="text" name="soyad" id="soyad" value="Atilgan"/></td>
- </tr>
- </table>
- </form>
- <button name="kaydetbutton" id="kaydetbutton" type="submit">Kaydet</button>
- <script type='text/javascript'>
- (function() {
- var formoncekiveri = $("#form").serialize(); // ilk FROM verilerini sakla
- $(document).on("click","#kaydetbutton", function(e) {
- e.preventDefault();
- if ($("#form").serialize() != formoncekiveri ) { // ilk ve son FROM verilerini kıyasla
- alert("Form Değişti");
- } else {
- alert("Form Değişmedi");
- }
- });
- })(jQuery);
- </script>
- </body>
- </html>
