Jquery ile Form Verilerini Kaydetme

Web sayfanızda post ettiğiniz form tekrar aynı sayfaya döndüğünde formdaki seçili verileri kaybetmek istemeyebilirsiniz. Html5 ile tarayıcılarında artık esnek hale gelmesi, bu işi javascript ile yapmayı oldukça kolaylaştırdı. Localstorage özelliği javascript ile client tabanlı veri saklamanıza olanak veriyor.

Önce kullandığım iki fonksiyonu vermek istiyorum :


var anaForm = "#postbackForm";
$(document).ready(function() {
getFormState();
});
function saveFormState() {
$('input, select').each(
function(index){
var input = $(this);
try{
localStorage.setItem(input.attr('name'), input.val());
}catch(err){alert("save" + err.message);}
});
}

function getFormState() {
for ( var i = 0, len = localStorage.length; i < len; ++i ) {
try{
$("#"+localStorage.key(i)).val(localStorage.getItem(localStorage.key(i)));
}catch(err){alert("getFormStateError: " + err.message);}
}
localStorage.clear();
}
function doPostback() {
saveFormState();
$( anaForm ).submit();
}

Buradaki mantık, formu bir javascript kodu ile submit etmeden önce tüm form verilerini localstorage ile tarayıcı geçici veritabanına kaydetmek ve sayfa yüklendiğinde bu verileri yerlerine yerleştirmek. SaveFormState fonksiyonu formu submit etmeden tüm verileri tarayıcıya kaydeder, getFormState ise bu verileri tekrar yerlerine yerleştirir. DoPostBack ise benim formu submit etmek için kullandığım basit bir fonksiyon. Jquery’nin .ready fonksiyonu ile de sayfa yüklendiğinde getFormState fonksiyonunun çağrılmasını sağlıyoruz.

Bu kadar.

2 Comments

  1. merhaba bu nasıl kullanılacak bir örnek dosya paylaşırmısınız ? postbackForm sanırım form id ama çalıştıramadım

    1. Head tagı içerisine açtığın script tagına patlaştığım kodları yapıştır. Sayfandaki html’e ekledigin formun idsini postback ile değiştir. Formu post.php’ye post ettin diyelim. Hata buldun. Geri tuşuna bastın yada yonlendirdin. Formun tekrar yuklendiğinde çalışacaktır. Tarayıcının güncel olmasına dikkat et.kolay gelsin.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir