CODEWITHSUNDEEP
jqueryjquery-tabs
Sachin
Sachin

Reputation: 18767

How to preserve form data when switching between tabs?

Setup:

The homepage has 2 tabs on it:

Problem:

When the user comes back on Tab 1, all the data he filled out is lost.

Is there a way by which the form data can be preserved?

As a side-note, Tab 1 has a "Submit" button. Submit button also clears the form once you click it, but there an option - preventDefault() by which we can control its default behavior and preserve the user-entered data after click. Just wondering if there is anything similar for tabs?

Update 1:

I am able to acces the user-entered data on Tab 2 by simply referring to the field name which is on Tab 1. So I guess the data is not lost.

Update 2:

Code: http://www.jsfiddle.net/pnuJT

Upvotes: 2

Views: 2559

Answers (2)

patrickmcgraw
patrickmcgraw

Reputation: 2495

You need to specify the cache option when setting up your tabs.

$( ".selector" ).tabs({ cache: true });

It will prevent the tabs plugin from reloading the tab content every time you switch between them.

jQuery UI Tab Options

Upvotes: 2

sirmdawg
sirmdawg

Reputation: 2579

You mentioned you were using jQuery tabs in the comments but the jsfiddle didn't include that. Are you sure you are using this:

http://jqueryui.com/demos/tabs/

You could solve your problem pretty easy with using a plugin like that. The main issue is that you're reloading the page.

Upvotes: 0

Related Questions