SQL and Database: Store data on client side using jquery data

Monday, 16 September 2013

Store data on client side using jquery data

Here I use jquery data to store data on client side. In this I create an object to store value from inputs and save it using jquery data and later display this data on a div.

JqueryData.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryData.aspx.cs" Inherits="JqueryData" %>

<!DOCTYPE html>

$(document).ready(function () {

$('#setData').click(function () {

var person = new Object();

person.firstname = $('#firstname').val();

person.lastname = $('#lastname').val();

person.age = $('#age').val();

person.eyecolor = $('#eyecolor').val();

$(document).data('person', person);

$('#message').html('Data saved');

});

$('#getData').click(function () {

var person = $(document).data('person');

if (jQuery.hasData(document)) {

$('#result').html('');

$('#message').html('Information saved');

$('#result').append('<br/>First Name: ' + person.firstname);

$('#result').append('<br/>Last Name: ' + person.lastname);

$('#result').append('<br/>Age: : ' + person.age);

$('#result').append('<br/>Eye Color: ' + person.eyecolor);

}

else

{

$('#message').html('No data saved');

}

});

$('#removedData').click(function () {

$(document).removeData('person');

$('#message').html('Data Removed');

$('#result').html('');

});

</script>

span

{

display: inline-block;

width: 260px;

padding: 2px;

}

{

text-decoration: none;

padding: 2px;

}

</style>

</head>

<body>

<span>

First name: <input type="text" id="firstname" />

</span>

<span>

Last name: <input type="text" id="lastname" />

</span>

<span>

Enter Age: <input type="text" id="age" />

</span>

<span>

Enter Eye Color: <input type="text" id="eyecolor" />

</span>

</div>

<a id="removedData" href="javascript:void(0)">Removed Data</a>

</div>

</div>

</form>

</body>

</html>

1 comment:

Add comment