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.

Beğen  
Yazar

Makine mühendisliği mezunu bir yazılım uzmanıyım. Otomasyon ve back-end programlama üzerine çalışmaktayım. .net, MVC, ve PHP ile web, masaüstü, ve mobil uygulamalar geliştirmekteyim.

Bir Cevap Yazın

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

Yapılan Yorumlar ( 2 )